TypeScript中的六個重新讓你認(rèn)知的知識點

文章來源于公眾號：前端人 作者：鬼哥

之所以會寫這篇文章，是因為在技術(shù)群里有小伙伴在討論的時候，提出需要來提升對 TypeScript 理解,本文將講述幾個 TypeScript 常見并且不易理解的幾個知識點，簡單的使用就自行官網(wǎng)文檔了!

Typescript中的幾個重要概念

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

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


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


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


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


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

2.type interface enum

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

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

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

使用場景如：

//人
interface People {
}
//動物
interface Animal {
}




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


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


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


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




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


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


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


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


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


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






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


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

3.映射類型

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

// 假設(shè)一個系統(tǒng)賬號登錄的場景:


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


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




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


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


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


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

4.交叉類型

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


這個和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ù)學(xué)中的交集的概念)
*/


interface UserApi {
    getUserList():void
}


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

6.元組

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


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

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