學習typescript
2019年6月21日11:22:22
阮一峰的書
阮一峰的typescript
安裝typescript npm install -g typescript
tsc 是它一個命令 編譯ts文件的
用法 tsc 文件名
基礎部分
定義類型
js 類型有兩種 原始數據類型boolean number String null undefined es6的Symbol 和對象類型
let isDone: boolean = false //定義成其他數據類型時 編譯報錯
let myName: string = 'Tom';
let myAge: number = 25;
let u: undefined = undefined;
let n: null = null;
function noThing():void{
console.log("just for consolelog something")
}
let unusable: void = undefined //也可以是null
任意類型Any
let aa:string = 'aili'
aa = 7
let bb:any = '1231asdfa'
bb = false
//未來聲明的變量
let cc;
cc = 'aili'
cc = 123
類型推論
沒有指定類型 編譯會報錯 但是ts會推測出類型 any類型不被做類型檢查
聯合類型
let a:string | number;
// a = false
a = 'aili'
// a = 7
number類型沒有length屬性 報錯
function getLength(something: string | number): string {
return something.length
}
訪問二者共有屬性或者方法是可以的
function getLength(something: string | number): string {
return something.toString()
}
對象的類型 -- 接口
定義對象類型 接口這部分是難點
對行為的抽象 具體如何行動由類實現 其實看了基礎部分回過頭再來看 就是 定義 形狀 的
// 接口 定義了多少屬性方法 定義變量的時候得一致 不然報錯 不能多不能少
// 賦值的時候，變量的形狀必須和接口的形狀保持一致。
interface Person {
name:String
age:number
sex:String
hasJob:boolean
}
let aili: Person = {
name: 'aili',
age:25,
sex:'male',
hasJob:true
}
// 上述定義有點問題 如果少一個多一個就報錯 有點死板
// 可選屬性
interface Person {
name:String
age:number
sex?:String
hasJob?:boolean
}
let aili: Person = {
name: 'aili',
age:25
}
// 任意類型
interface Person {
[propName: string]:string | number | boolean
}
let aili: Person = {
name: 'aili',
age:25,
hasJob:true
}
// 定義了三種類型 但是 定義變量的時候 給了any 這是會報錯的
interface Person {
[propName: string]:string | number | boolean
}
let aili: Person = {
name: 'aili',
age:25,
hasJob:true,
sex: any = {
}
}
// 只讀屬性
interface Person {
readonly id: number
[propName: string]:any
}
let aili: Person = {
id:1234,
name: 'aili',
age:25,
hasJob:true,
sex: {
a:'male',
b:'female',
c:'unknown'
}
}
數組類型
方法比較多
// 數組類型
let arr: number[] = [1,2,3,4,5]
let arr: string[] = ['1','2','3','4','5']
let arr: Array<number> = [1,2,3,4,5] //泛型
interface mineArr {
[index: number]: string
}
let arr:mineArr = ['a','b','c','d','e'] //一下覺得好規范 嚴謹 慢慢感受到ts的類型檢查的強大
let list:any[] = [1,'a',true,{name:'aili'}]
函數類型
函數可以看成跟數據類型一樣 最靈活的
js函數式編程編程指南
這本書好像很牛皮的樣子 一共10章
定義函數
- 函數聲明
function sum(x, y) { return x + y; } - 函數表達式
let mySum = function (x, y) { return x + y; };
// 函數類型
let mySum = function (x: number, y: number): number {
return x + y;
};
// // 接口定義函數形狀 你要對你將實現的函數 有個很明確具體的認識和實現思路 才可以把接口定義的很完美
interface Search {
(a:string,b:string): boolean
}
let mysearch: Search;
mysearch = (a:string,b:string)=>{
return a.search(b) !== -1
}
// 可選參數 還是跟類型定義一樣 加個問號就可以了
// 可選參數后面不允許再出現 必須 參數了
// 順序 必選參數... 可選參數
function buildName(firstName: string, lastName?: string) {
if (lastName) {
return firstName + ' ' + lastName;
} else {
return firstName;
}
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
// 還有一種情況就是默認參數不受參數位置影響 默認參數自動識別為可選參數
function buildName(firstName: string = 'Tom', lastName: string) {
return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');
// 剩余參數
// 用到了es6的rest參數 和析構
function push(array: any[], ...items: any[]) {
items.forEach(function(item) {
array.push(item);
});
}
let a = [];
push(a, 1, 2, 3);
聲明文件
合理使用第三方庫 不沖突 我是這么理解的 定義一些全局方法 屬性 變量 類等
具體寫法具體查
文章參考的鏈接
箭頭函數
函數參數的默認值
Rest參考值
symbol
