TypeScript中的重要概念有哪些

這篇文章主要介紹了TypeScript中的重要概念有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇TypeScript中的重要概念有哪些文章都會有所收獲，下面我們一起來看看吧。

Typescript中的幾個重要概念

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

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


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


// 在這種場景下，有區別體現


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


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

2.type  interface  enum

• type:用來約束數據類型(數據結構，數據屬性且可以是聯合類型，元組類型)

• interface:用來約束數據類型(數據結構，數據屬性且不可以是聯合類型，元組類型)

• enum:用來約束數據類型的值，而并非數據類型

使用場景如：

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




// type和interface區別1


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


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


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




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


// type和interface區別2
既然`interface`是一種數據結構，那肯定是可以實現這種數據結構的，所以`interface`可以實現的功能


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


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


// enum和const的區別
/**
他們兩者的相同點，都是定義數據,
且定義的數據不可更改.不同點在于
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.映射類型

將對象或數組中類型轉換為另一個類型

// 假設一個系統賬號登錄的場景:


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


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




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


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


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


//當然這樣的舉例說服我們去使用確實還缺少一些說服力,但是他的場景就是:在定義類型之后，可以重新設置定義類型的屬性值

4.交叉類型

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


這個和extends功能上相差不大，但是extends如果是類的話需要調用父函數構造函數


大致使用如下：
*/


interface UserApi {
    getOrderList():void
}


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


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


    }
}


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

5.聯合類型

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


interface UserApi {
    getUserList():void
}


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

6.元組

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


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

關于“TypeScript中的重要概念有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“TypeScript中的重要概念有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。