Typescript系列二（01）-常用類型

上周的時候，我們一起學(xué)習(xí)了Typescript的一些知識，但是有的小伙伴說，內(nèi)容有點(diǎn)復(fù)雜，所以本章節(jié)通過非常簡單代碼展示的形式來從頭到尾學(xué)習(xí)Typescript，從簡易到深入理解Typescript，一共分為兩個章節(jié)，大致30篇文章,以下是本次章節(jié)的學(xué)習(xí)清單，記得關(guān)注公眾號和鬼哥一起學(xué)習(xí)

第一章節(jié)

• Any Types 任何類型
• Array Types 數(shù)組類型
• Class Types 類別類型
• Literal Types 文字類型
• Comment Types 注釋類型
• Intersection Types 交叉類型
• Maybe Types 缺省類型
• Mixed Types 混合類型
• Interface Types 接口類型
• Module Types 模塊類型
• Object Types 對象類型
• Primitive Types 原始類型
• Tuple Types 元組類型
• Type Aliases 類型別名
• Type Annotations 類型注釋
• Type Casting Expressions 類型轉(zhuǎn)換表達(dá)式
• Typeof Types 字體類型
• Union Types 工會類型
• Variable Types 變量類型

第二章節(jié)

• Utility Types 實(shí)用類型

開始

Any Types 任何類型

類型any可分配給每種類型,所以白話就是任意類型

使用如下:

function funA(obj: any) {
  let info: number = obj.foo;
}

function funB(one: any, two: any): number {
  return one + two;
}

const userInfo:any = {userName:'鬼鬼',userAge:18}

Array Types 數(shù)組類型

存儲于多種類型的集合，使用 Array < Type > Type，其中 Type 是數(shù)組中元素的類型

使用如下:

const arr1: Array<number> = [1, 2, 3];

const arr2: Array<boolean> = [true, false, true];


interface User {
    userName:string,
    userAge:number
}
const arr3: Array<User> = [{
    userName:'鬼鬼',
    userAge:18
}];

Class Types 類別類別

Class類型

使用如下:

class UserInfo {
    public userName: string;
    public userAge: number;
    constructor(userName:string,userAge:number){
        this.userAge=userAge;
        this.userName=userName;
    }
  }

const userInfo: UserInfo = new UserInfo('鬼鬼',18);




class User {
  public userName: string;
  public userAge: number;
}

class UserInfo extends User {
  constructor(userName: string, userAge: number) {
    super();
    this.userAge = userAge;
    this.userName = userName;
  }
}

const userInfo: UserInfo = new UserInfo("鬼鬼", 18);
const user: UserInfo = new User();

Literal Types 文字類型

直接使用文字當(dāng)做類型。然后這個類型的變量就只能為這些值

使用如下:

type colors="success" | "warning" | "danger"

function getColor(name:colors) {
    switch (name) {
      case "success" : return "green";
      case "warning" : return "yellow";
      case "danger"  : return "red";
    }
}

getColor("success");

?? 看完三件事