TypeScript的學(xué)習(xí)總結(jié)，偶爾會記錄在Vue開發(fā)中的應(yīng)用（一）

前段時間利用空余時間開始學(xué)習(xí)TypeScript，自己也是剛剛?cè)肓碎T，寫這篇文章的目的只是為了總結(jié)自己學(xué)習(xí)的知識，文章中如果出現(xiàn)理解有誤，文字描述問題，歡迎在評論區(qū)評論！

TypeScript的原始數(shù)據(jù)類型

先說說JS的原始數(shù)據(jù)類型、引用類型、Symbol

我們都知道JS的5種原始數(shù)據(jù)類型：Sting Number Null Undefined Boolean

引用類型：Object

ES6新的類型：Symbol

TypeScript的原始數(shù)據(jù)類型

基本類型

Number(數(shù)字類型)

let decLiteral: number = 6;

String(字符串類型)

let name: string = "zhuchangfeng";

Array(數(shù)組)

兩種寫法都可以，任君選擇.

let atlet arr: (string | number)[] = [66, "55",'111'];
// 第二種方式是使用數(shù)組泛型，Array<元素類型>
let arr: Array<string | number> = [6, 5, 8, 9, "225"];

Null(空對象)

let n: null = null;

未申明的變量(Undefined)

let u: undefined = undefined;

Boolean布爾類型(布爾類型)

let createdByNewBoolean: boolean = true;
// Boolean()返回也是一個布爾值而new Boolean(true)是返回一個布爾對象這里要注意一下哈
let createdByNewBoolean: boolean = Boolean(true);

Tuple(元組)

let messArray=['someting',1,true,undefined];
<!--需要注意的是申明不同元素類型的數(shù)組對應(yīng)的值必須與申明的類型相同-->
let tuple:[number,string,undefined,null,string]=[6,'zhuchangfeng',undefined,null,'hello'];

Enu(枚舉)

枚舉 enum(枚舉成員會被賦值為從 0 開始遞增的數(shù)字，同時也會對枚舉值到枚舉名進行反向映射)

    enum Color {
        Red,
        Bule,
        Green = 10,
        Sat = <any>"s"
    }
    let c: Color = Color.Green; //10
    let colorName: string = Color[10]; //Green
    let sat: Color = Color.Sat; //s

Any(任意值)

任意類型 any(當我們無法確定類型時最簡單的方法就是申明any類型，不過用多了也不好，這樣會失去TypeScript的使用意義，還有一種叫斷言，下面我會講到.)

let a: any = 555;

Void(沒有任何類型)

沒有任何類型 void(最常用的地方就是用于函數(shù)申明，當我們函數(shù)不需要返回值的時候void就派上用場啦.)

    public click(): void {
        console.log("object");
    }
<!--如果沒有void，我們就需要返回一個值-->
    public getName(): string {
        const name: string = this.name;
        return name;
    }

類型斷言

類型斷言有兩種寫法<類型>名稱或者使用as

    let someValue: string = "zhuchangfeng";
    <!--第一種寫法-->
    let len: number = (<string>someValue).length;
    <!--第二種寫法-->
    let length: number = (someValue as string).length;
    console.log(len);
    console.log(length);

    public getLength(something: string | number): number {
        if ((<string>something).length) {
            return (<string>something).length;
        } else {
            return something.toString().length;
        }
    }

    public getLength(something: string | number): number {
        if ((something as string).length) {
            return (something as string).length;
        } else {
            return something.toString().length;
        }
}

Never(永不存在的值的類型)

引用官方的例子，我也想不出有什么例子...

// 返回never的函數(shù)必須存在無法達到的終點
function error(message: string): never {
    throw new Error(message);
}

// 推斷的返回值類型為never
function fail() {
    return error("Something failed");
}

// 返回never的函數(shù)必須存在無法達到的終點
function infiniteLoop(): never {
    while (true) {
    }
}

interface(接口)

interface IPerson {
    name: string;
    age?: number;
    readonly id: number;
    [propName: string]: any;
}
let tom: IPerson = {
    name: "zhuchangfeng",
    age: 5,
    id: 555,
    hello: 5
};
?的意思是可以存在，也可以不存在
[propName: string]: any的意思是可以接收任意值，如果定義為其他類型如[propName: string]: string所有的接收必須為string類型
readonly的意思是值只能讀取不能賦值

這就是最基礎(chǔ)的語法
說到接口(interface)不得不說另外一個類型別名(type)

type(類型別名)

type TUser = {
    name: string;
    age: string;
};
<!--對應(yīng)interface寫法-->
interface IUser {
    name: string;
    age: number;
}
type TSetUser = {
    (name: string, age: number): void;
};
<!--對應(yīng)interface寫法-->
interface ISetUser {
    (name: string, age: number): void;
}

這是最基礎(chǔ)的寫法
現(xiàn)在我們來說關(guān)于他們的相同和不同之處

type和interface同異之處

相同

  1. 都可以描述一個對象或者函數(shù)
<!--描述一個對象-->
type TUser = {
    name: string;
    age: string;
};
interface IUser {
    name: string;
    age: number;
}
<!--描述一個函數(shù)-->
type TSetUser = {
    (name: string, age: number): void;
};
<!--對應(yīng)interface寫法-->
interface ISetUser {
    (name: string, age: number): void;
}
  1. 都允許拓展(不過寫法上有些差別)
<!--interface extends interface-->
interface IName {
    name: string;
}
interface IUser extends IName {
    age: number;
}
<!--type & type-->
type TName = {
    name: string;
};
type TUser = TName & { age: number };
<!--interface extends type-->
type TName = {
    name: string
}
interface TAge extends TName {
    age: number;
}
let Attribute: TAge = { name: 'zyb', age: 23 };
<!--type extends interface-->
interface IName {
    name: string;
}
type TAge = IName & { 
    name: number
}
let Attribute: TAge = { name: 'zyb', age: 23 };

不同

  1. type 可以聲明基本類型別名，聯(lián)合類型，元組等類型
<!--聲明基本類型別名-->
type TName = sting
<!--聯(lián)合類型-->
interface IName = {
    name : sting
}
interface IAge = {
    age : number
}
type TAttribute = IName | IAge
<!--元組-->
type TArray=[IName,IAge]
  1. interface 能夠聲明合并
interface IName {
    name: string;
}
interface IName {
    age: string;
}
<!--相當于-->
interface IName {
    age: string;
    name: string;
}

先到這里吧，下一篇，我會記錄關(guān)于以上內(nèi)容部分語法在vue實踐中的使用，敬請期待...

再見！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容