TypeScript中的六個(gè)重新讓你認(rèn)知的知識(shí)點(diǎn)

文章來(lái)源于公眾號(hào)：前端人 作者：鬼哥

之所以會(huì)寫這篇文章，是因?yàn)樵诩夹g(shù)群里有小伙伴在討論的時(shí)候，提出需要來(lái)提升對(duì) TypeScript 理解,本文將講述幾個(gè) TypeScript 常見并且不易理解的幾個(gè)知識(shí)點(diǎn)，簡(jiǎn)單的使用就自行官網(wǎng)文檔了!

Typescript中的幾個(gè)重要概念

1.any 和 T(泛型)的區(qū)別

/**
any 和 T ,一個(gè)是任意類型，一個(gè)是泛類型
臥槽，這也太難讓人理解他的區(qū)別了吧，字面意思幾乎一樣，
但是我連續(xù)讀了:泛..泛.泛    任意..任意類型，讀了十遍,還是感受到了差異
*/


any：任意類型，代表的是所有類型
泛型:泛型他就是所有類型中的一種類型,并不是完全的所有類型，所以在函數(shù)中返回的類型要和定義的類型一摸一摸，不能修改他原有的類型


// 在這種場(chǎng)景下，有區(qū)別體現(xiàn)


//正確
function getInfo(age: any): any {
    return "鬼哥今年:"+age
}
getInfo("18歲")


//錯(cuò)誤
function getInfo(age: T): T {
    return "鬼哥今年:"+age
}
getInfo("18歲")
//這里直接報(bào)錯(cuò)

2.type interface enum

• type:用來(lái)約束數(shù)據(jù)類型(數(shù)據(jù)結(jié)構(gòu)，數(shù)據(jù)屬性且可以是聯(lián)合類型，元組類型)

• interface:用來(lái)約束數(shù)據(jù)類型(數(shù)據(jù)結(jié)構(gòu)，數(shù)據(jù)屬性且不可以是聯(lián)合類型，元組類型)

• enum:用來(lái)約束數(shù)據(jù)類型的值，而并非數(shù)據(jù)類型

使用場(chǎng)景如：

//人
interface People {
}
//動(dòng)物
interface Animal {
}




// type和interface區(qū)別1


// 正確（人既可以是動(dòng)物，也可以是人）
type User=People | Animal;


// 錯(cuò)誤（人既可以是動(dòng)物，也可以是人），使用interface定義卻是不可以的
interface User { People | Animal };


其實(shí)從語(yǔ)法上可以看出他們兩的區(qū)別，`type` 是用`=`符號(hào),既然是等于，那肯定就存在多種情況的，`interface`使用的是`{}`符號(hào)，是一種`定義`的形式,既然是`定義`,那肯定就是覺得性質(zhì)的，只會(huì)有一種可能




/**************************************/


// type和interface區(qū)別2
既然`interface`是一種數(shù)據(jù)結(jié)構(gòu)，那肯定是可以實(shí)現(xiàn)這種數(shù)據(jù)結(jié)構(gòu)的，所以`interface`可以實(shí)現(xiàn)的功能


// 比如運(yùn)用interface用來(lái)定義接口，然后實(shí)現(xiàn)接口的功能:
interface UserModelApi {
    getUserList:()=>Promise,
    getOrderList:()=>Promise,
}


class HtppApi implements UserModelApi{
    getUserList(){
        return new Promise((resolve)=>{
        });
    }
    getOrderList(){
        return new Promise(()=>{
        });
    }
}


// enum和const的區(qū)別
/**
他們兩者的相同點(diǎn)，都是定義數(shù)據(jù),
且定義的數(shù)據(jù)不可更改.不同點(diǎn)在于
1)其實(shí)和上面描述`type`與`interface`一樣，
他們都是一個(gè)是定義，一個(gè)是賦值
2)下面的代碼是不是從感覺使用枚舉看上去語(yǔ)法的閱讀性更強(qiáng)
3)`enum`枚舉可以用來(lái)定義類型
*/


// 正確(語(yǔ)法理解上一看就知道，是這個(gè)對(duì)象有哪種情況)
enum Sex { M = "男", F = "女" }
// `enum` Sex枚舉可以用來(lái)定義類型
const getInfo=function(sex:Sex){
    return `我的性別為:${sex}`;
}






/**************************************/


// 錯(cuò)誤（而這種語(yǔ)法看上去就是，這個(gè)對(duì)象有哪些值）
const Sex ={
    M:"男",
    F:"女"
}
// `const` Sex 不可以用來(lái)定義類型
const getInfo=function(sex:Sex){
    return `我的性別為:${sex}`;
}

3.映射類型

將對(duì)象或數(shù)組中類型轉(zhuǎn)換為另一個(gè)類型

// 假設(shè)一個(gè)系統(tǒng)賬號(hào)登錄的場(chǎng)景:


//定義一個(gè)用戶信息的接口類型
interface User {
    age: number
    name: string
    password:string
}
//登錄成功設(shè)置用戶數(shù)據(jù)
const UserInfo:User={
    age:1,
    name: "鬼哥",
    password:"123456"
}


//輸出密碼為：123456
console.log(UserInfo.password)




//此時(shí)當(dāng)設(shè)置用戶數(shù)據(jù)成功后,User接口定義就不能再修改了，那我們就可以使用`映射類型`


//設(shè)置所有屬性為只讀
* keyof：獲取當(dāng)前對(duì)象所有屬性{"age" | "name" | "password"}
* T：泛型
* P: 當(dāng)前屬性


type SetReadonly ={
    readonly [P in keyof T]:T[P];
}
//新建只讀用戶數(shù)據(jù)對(duì)象
type ReadonlyUser = SetReadonly;
const UserInfo:ReadonlyUser={
    age:1,
    name: "鬼哥",
    password:"123456"
}
//直接報(bào)錯(cuò)，因?yàn)閁serInfo實(shí)力中的每個(gè)屬性都不可以修改
console.log(UserInfo.password)


//當(dāng)然這樣的舉例說(shuō)服我們?nèi)ナ褂么_實(shí)還缺少一些說(shuō)服力,但是他的場(chǎng)景就是:在定義類型之后，可以重新設(shè)置定義類型的屬性值

4.交叉類型

/**
意思其實(shí)就是，共同的意思(數(shù)學(xué)中的并集的概念)


這個(gè)和extends功能上相差不大，但是extends如果是類的話需要調(diào)用父函數(shù)構(gòu)造函數(shù)


大致使用如下：
*/


interface UserApi {
    getOrderList():void
}


// extends方式
interface AppApi extends UserApi {
    getUserList():void
}


const appApi:AppApi={
    getOrderList(){
    },
    getUserList(){


    }
}


//交叉類型方式
const appApi:AppApi&UserApi={
    getOrderList(){
    },
    getUserList(){
    }
}

5.聯(lián)合類型

/**
意思其實(shí)就是，相同部分的意思(數(shù)學(xué)中的交集的概念)
*/


interface UserApi {
    getUserList():void
}


interface AppApi{
    getUserList():void
}
//聯(lián)合類型方式
const appApi:AppApi|AppApi={
    getUserList(){
    }
}

6.元組

/**
這個(gè)從字面上就很好理解
元：元素(代碼里就是對(duì)象的意思)
組：數(shù)組


所以意思就是：一個(gè)包含多個(gè)類型對(duì)象的數(shù)組集合,這個(gè)不要想太多就是這么個(gè)東西
*/
type regionType={
    province:string,
    city:string
}
const region:regionType={
    province:"上海省",
    city:"上海市"
}
const tableList = ["鬼哥",15,region];

以上就是W3Cschool編程獅關(guān)于TypeScript中的六個(gè)重新讓你認(rèn)知的知識(shí)點(diǎn)的相關(guān)介紹了，希望對(duì)大家有所幫助。