文章來源于公眾號(hào)：前端人 作者：鬼哥
之所以會(huì)寫這篇文章，是因?yàn)樵诩夹g(shù)群里有小伙伴在討論的時(shí)候，提出需要來提升對(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:用來約束數(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ù)類型
使用場(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í)從語法上可以看出他們兩的區(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用來定義接口，然后實(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)下面的代碼是不是從感覺使用枚舉看上去語法的閱讀性更強(qiáng)
3)`enum`枚舉可以用來定義類型
*/
// 正確(語法理解上一看就知道，是這個(gè)對(duì)象有哪種情況)
enum Sex { M = "男", F = "女" }
// `enum` Sex枚舉可以用來定義類型
const getInfo=function(sex:Sex){
return `我的性別為:${sex}`;
}
/**************************************/
// 錯(cuò)誤（而這種語法看上去就是，這個(gè)對(duì)象有哪些值）
const Sex ={
M:"男",
F:"女"
}
// `const` Sex 不可以用來定義類型
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)然這樣的舉例說服我們?nèi)ナ褂么_實(shí)還缺少一些說服力,但是他的場(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ì)大家有所幫助。
