初學者這樣玩 TypeScript，遲早進大廠系列（第六期）

極客江南： 一個對開發技術特別執著的程式員，對移動開發有著獨到的見解和深入的研究，有著多年的iOS、Android、HTML5開發經驗，對NativeApp、HybridApp、WebApp開發有著獨到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術及Java、PHP等服務端技術，

初學者玩轉 TypeScript系列，總計 10 期，本文為第 6 期，點贊、收藏、評論、關注、三連支持！

一期知識點擊這里

二期知識點擊這里

三期知識點擊這里

四期知識點擊這里

五期知識點擊這里

對于初學者來說，學習編程最害怕的就是，難，

那么，Typescript 是不是很難？

首先，我可以肯定地告訴你，你的焦慮是多余的，新手對學習新技術有很強的排斥心理，主要是因為基礎不夠扎實，然后自信心不夠強，

1.可辨識聯合

• 什么是可辨識聯合
• 具有共同的可辨識特征，
• 一個型別別名, 包含了具有共同的可辨識特征的型別的聯合，

interface Square {
    kind: "square"; // 共同的可辨識特征
    size: number;
}
interface Rectangle {
    kind: "rectangle"; // 共同的可辨識特征
    width: number;
    height: number;
}
interface Circle {
    kind: "circle"; // 共同的可辨識特征
    radius: number;
}

/*
Shape就是一個可辨識聯合
因為: 它的取值是一個聯合
因為: 這個聯合的每一個取值都有一個共同的可辨識特征
*/

type Shape = (Square | Rectangle | Circle);

function aera(s: Shape) {
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.width * s.height;
        case "circle": return  Math.PI * s.radius ** 2; // **是ES7中推出的冪運算子
    }
}

2. 可辨識聯合完整性檢查

interface Square {
    kind: "square"; // 共同的可辨識特征
    size: number;
}
interface Rectangle {
    kind: "rectangle"; // 共同的可辨識特征
    width: number;
    height: number;
}
interface Circle {
    kind: "circle"; // 共同的可辨識特征
    radius: number;
}
/*
Shape就是一個可辨識聯合
因為: 它的取值是一個聯合
因為: 這個聯合的每一個取值都有一個共同的可辨識特征
* */
type Shape = (Square | Rectangle | Circle);
/*
在企業開發中如果相對可辨識聯合的完整性進行檢查, 那么我們可以使用
方式一: 給函式添加回傳值 + 開啟strictNullChecks
方式二: 添加default + never
* */
function MyNever(x: never):never {
    throw new Error('可辨識聯合處理不完整' + x);
}
function aera(s: Shape):number{
    switch (s.kind) {
        case "square": return s.size * s.size;
        case "rectangle": return s.width * s.height;
        case "circle": return  Math.PI * s.radius ** 2; // **是ES7中推出的冪運算子
        default:return MyNever(s)
    }
}

3. 索引型別

// 通過[]索引型別訪問運算子, 我們就能得到某個索引的型別
// class Person {
//     name:string;
//     age:number;
// }
// type MyType = Person['name'];

// 應用場景
// 需求: 獲取指定物件, 部分屬性的值, 放到陣列中回傳
/*
let obj = {
    name:'lnj',
    age:18,
    gender:true
}
function getValues<T, K extends keyof T>(obj:T, keys:K[]):T[K][] {
    let arr = [] as T[K][];
    keys.forEach(key=>{
        arr.push(obj[key]);
    })
    return arr;
}
let res = getValues(obj, ['name', 'age']);
console.log(res);
*/

// 索引訪問運算子注意點
// 不會回傳null/undefined/never型別
interface TestInterface {
    a:string,
    b:number,
    c:boolean,
    d:symbol,
    e:null,
    f:undefined,
    g:never
}
type MyType = TestInterface[keyof TestInterface];

4. 映射型別

/*
1.什么是映射型別?
根據舊的型別創建出新的型別, 我們稱之為映射型別
* */
/*
interface TestInterface1{
    name:string,
    age:number
}
interface TestInterface2 {
    readonly name:string,
    readonly age:number
}
*/
interface TestInterface1{
    name:string,
    age:number
}
interface TestInterface2{
    readonly name?:string,
    readonly age?:number
}
type ReadonlyTestInterface<T> = {
    // [P in keyof T]作用: 遍歷出指定型別所有的key, 添加到當前物件上
    // readonly [P in keyof T]: T[P]
    // readonly [P in keyof T]?: T[P]
    -readonly [P in keyof T]-?: T[P]
}
type MyType = ReadonlyTestInterface<TestInterface2>


// 我們可以通過+/-來指定添加還是洗掉 只讀和可選修飾符


// 由于生成只讀屬性和可選屬性比較常用, 所以TS內部已經給我們提供了現成的實作
// Readonly / Partial

type MyType2 = Readonly<TestInterface1>
type MyType3 = Partial<TestInterface1>
type MyType4 = Partial<Readonly<TestInterface1>

5. 映射型別

• 什么是字面量?
  字面量就是源代碼中一個固定的值
  例如數值字面量: 1,2,3,…
  例如字串字面量: ‘a’,‘abc’,…

• 在TS中我們可以把字面量作為具體的型別來使用
  當使用字面量作為具體型別時, 該型別的取值就必須是該字面量的值

type MyNum = 1;
let value1:MyNum = 1;
let value2:MyNum = 2;

// Pick映射型別
// 將原有型別中的部分內容映射到新型別中

/*
interface TestInterface {
    name:string,
    age:number
}
type MyType = Pick<TestInterface, 'name'>
 */

// Record映射型別
// 他會將一個型別的所有屬性值都映射到另一個型別上并創造一個新的型別

type Animal = 'person' | 'dog' | 'cat';
interface TestInterface {
    name:string;
    age:number;
}
type MyType = Record<Animal, TestInterface>

let res:MyType = {
    person:{
        name:'zs',
        age:18
    },
    dog:{
        name:'wc',
        age:3
    },
    cat:{
        name:'mm',
        age:2
    }
}

6. 分布式條件型別

/*
1.條件型別(三目運算)
判斷前面一個型別是否是后面一個型別或者繼承于后面一個型別
如果是就回傳第一個結果, 如果不是就回傳第二個結果
語法: T extends U ? X : Y;
* */
// type MyType<T> = T extends string ? string : any;
// type res = MyType<boolean>

/*
2.分布式條件型別?
被檢測型別是一個聯合型別的時候, 該條件型別就被稱之為分布式條件型別
 */

// type MyType<T> = T extends any ? T : never;
// type res = MyType<string | number | boolean>;

// 從T中剔除可以賦值給U的型別， Exclude
// type MyType<T, U> = T extends U ? never : T;
// type res = MyType<string | number | boolean, number>
// type res = Exclude<string | number | boolean, number>

// 提取T中可以賦值給U的型別， Extract
// type res = Extract<string | number | boolean, number | string>

// 從T中剔除null和undefined， NonNullable
// type res = NonNullable<string | null | boolean | undefined>

// 獲取函式回傳值型別， ReturnType
// type res = ReturnType<(()=>number)>

// 獲取一個類的建構式引陣列成的元組型別， ConstructorParameters
// class Person {
//     constructor(name:string, age:number){}
// }
// type res = ConstructorParameters<typeof Person>;

// 獲得函式的引數型別組成的元組型別， Parameters
function say(name:string, age:number, gender:boolean) {
}
type res = Parameters<typeof say>;

碼字不易，在線求個三連支持，

大家記得收藏前，先點個贊哦！好的文章值得被更多人看到，

推薦閱讀：

13萬字C語言保姆級教程2021版

10萬字Go語言保姆級教程

2 萬字 Jquery 入門教程

3 萬字 html +css 入門教程

169集保姆級C語言視頻

最后，再多一句，粉絲順口溜，關注江哥不迷路，帶你編程上高速，

著作權所有，請勿轉載，轉載請聯系本人授權