一、什么是TS

TypeScript是具有類型語法的javascript,，也就是強類型語言。

二,、類型注解

2.1、常用類型注解

簡單類型：number  string  boolean  null  undefined

復(fù)雜類型：數(shù)組和函數(shù)

2.2,、簡單類型注解

let age:number = 18;
let hobby:string="play";
let bool:boolean = false;
let nullVal:null = null;
let undef:undefined = undefined;

三、數(shù)組類型注解（推薦寫法1）

// 寫法1
let arr:number[]= [1,2,3];
// 寫法2
let arr2:Array<number>= [1,2,3];

使用注解好處：

1. 不僅可以限制變量類型為數(shù)組而且可以限制數(shù)組成員的類型

2. 除了提示數(shù)組的屬性外,，還提示成員的屬性和方法

四,、聯(lián)合類型和別名

4.1、多個類型合并一個類型

let item:(string|number)[]=[18,'wjx'];

4.2,、類型別名

type ItemType = (string|number)[];
let item1:ItemType=["wjx",12];

type類型別名=具體類型（大駝峰命名規(guī)范）

五,、函數(shù)

5.1、基礎(chǔ)

function add(a:number,b:number):number{
    return a+b;
}

好處：避免了參數(shù)不對導(dǎo)致函數(shù)內(nèi)部邏輯錯誤,，對函數(shù)起到說明作用,。

5.2、函數(shù)表達式

函數(shù)整體注解(針對于函數(shù)表達式)

type addFun=(a:number,b:number)=>number;
const add1:addFun=function(a:number,b:number){
    return a+b;
}

5.3,、可選參數(shù)

function buildName(firstName: string, lastName?: string): string {
    if (firstName) {
        if (lastName) {
            return `${firstName} ${lastName}`;
        } else {
            return firstName;
        }
    } else if (lastName) {
        return lastName;
    } else {
        return '';
    }
}
console.info(buildName("wjx"))
console.info(buildName("wjx","hehe"));

注意：參數(shù)必須放在所有參數(shù)末尾

5.3,、無返回值

function eachArr(arr:number[]):void{
    arr.forEach((item:number)=>{
        console.info(item);
    })
}

注意：在TS中 void和undefined不是一回事，undefined在TS中是一種明確的簡單類型,，如果指定返回值為undefined,，那返回值必須是undefined類型

六、interface接口

場景：業(yè)務(wù)開發(fā)中,，前后端數(shù)據(jù)通信,，登錄為例,。

interface LoginForm{
    userName:string,
    passWord:string,
    code:string
}
const form:LoginForm={
    userName:"wjx",
    passWord:"123",
    code:"1234"    
}

6.1、接口可選設(shè)置

let props:Props={
    type:"primary",
}
//如果傳值,，必須類型一致
props={
    type:"primary",
    size:"large"
}

七,、type注解對象類型

除了interface之外，type同樣也適用,。

type Goods={
    id:number,
    price:string,
    name:string
}
let goods:Goods = {
    id:1,
    price:'100',
    name:'goods'
}

7.1,、interface對比type

相同點：描述對象類型，可以實現(xiàn)繼承,。

不同點：

1.type除了能描述對象還可以用來自定義其他類型(類型別名)

2.同名的interface會合并（屬性取并集,，不能出現(xiàn)類型沖突），同名type會報錯,。

推薦：使用type注解

8,、泛型

8.1、含義

泛型（Generics）是指在定義接口,、函數(shù)等類型的時候,，不預(yù)先指定具體的類型，而在使用的時候再指定類型的一種特性, 使用泛型可以復(fù)用類型并且讓類型更加靈活,。

8.2,、泛型接口

interface ResData<T>{
    code:number,
    data:T,
    msg:string
}
type GoodsType = {
    id:number,
    price:string,
    name:string
}
let resData:ResData<GoodsType> = {
    code:200,
    msg:'success',
    data:{
        id:1,
        price:'100',
        name:'goods'
    },
}