學(xué)習(xí)typescript

2019年6月21日11:22:22

阮一峰的書
阮一峰的typescript

安裝typescript npm install -g typescript

tsc 是它一個命令 編譯ts文件的
用法 tsc 文件名

基礎(chǔ)部分

定義類型

js 類型有兩種 原始數(shù)據(jù)類型boolean number String null undefined es6的Symbol 和對象類型

let isDone: boolean = false  //定義成其他數(shù)據(jù)類型時 編譯報錯
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類型不被做類型檢查

聯(lián)合類型

let a:string | number;
// a = false
a = 'aili'
// a = 7

number類型沒有l(wèi)ength屬性 報錯
function getLength(something: string | number): string {
    return something.length
}
訪問二者共有屬性或者方法是可以的
function getLength(something: string | number): string {
    return something.toString()
}

對象的類型 -- 接口

定義對象類型 接口這部分是難點

對行為的抽象 具體如何行動由類實現(xiàn) 其實看了基礎(chǔ)部分回過頭再來看 就是 定義 形狀 的

// 接口 定義了多少屬性方法 定義變量的時候得一致 不然報錯  不能多不能少
// 賦值的時候，變量的形狀必須和接口的形狀保持一致。
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'
    }
}

數(shù)組類型

方法比較多

// 數(shù)組類型
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']  //一下覺得好規(guī)范 嚴(yán)謹(jǐn) 慢慢感受到ts的類型檢查的強大

let list:any[] = [1,'a',true,{name:'aili'}]

函數(shù)類型

函數(shù)可以看成跟數(shù)據(jù)類型一樣 最靈活的
js函數(shù)式編程編程指南
這本書好像很牛皮的樣子 一共10章

定義函數(shù)

• 函數(shù)聲明

  function sum(x, y) {
      return x + y;
  }
  

• 函數(shù)表達(dá)式

  let mySum = function (x, y) {
      return x + y;
  };
  

// 函數(shù)類型
let mySum = function (x: number, y: number): number {
    return x + y;
};


// // 接口定義函數(shù)形狀 你要對你將實現(xiàn)的函數(shù) 有個很明確具體的認(rèn)識和實現(xiàn)思路 才可以把接口定義的很完美
interface Search {
    (a:string,b:string): boolean
}
let mysearch: Search;

mysearch = (a:string,b:string)=>{
    return a.search(b) !== -1
}

// 可選參數(shù) 還是跟類型定義一樣 加個問號就可以了  
// 可選參數(shù)后面不允許再出現(xiàn) 必須 參數(shù)了
// 順序 必選參數(shù)... 可選參數(shù)
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');


// 還有一種情況就是默認(rèn)參數(shù)不受參數(shù)位置影響 默認(rèn)參數(shù)自動識別為可選參數(shù)
function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

// 剩余參數(shù)  
// 用到了es6的rest參數(shù) 和析構(gòu)
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}
let a = [];
push(a, 1, 2, 3);

聲明文件

合理使用第三方庫 不沖突 我是這么理解的 定義一些全局方法 屬性 變量 類等
具體寫法具體查

文章參考的鏈接
箭頭函數(shù)
函數(shù)參數(shù)的默認(rèn)值
Rest參考值
symbol

END