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

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

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

一期知識點擊這里

二期知識點擊這里

三期知識點擊這里

四期知識點擊這里

五期知識點擊這里

六期知識點擊這里

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

那么，Typescript 是不是很難？

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

1.infer關鍵字

• infer關鍵字
• 條件型別提供了一個infer關鍵字, 可以讓我們在條件型別中定義新的型別

// 需求: 定義一個型別, 如果傳入的是陣列, 就回傳陣列的元素型別,
//                     如果傳入的是普通型別, 則直接回傳這個型別

// type MyType<T> = T extends any[] ? T[number] : T;
// type res = MyType<string[]>;
// type res = MyType<number>;

// type MyType<T> = T extends Array<infer U> ? U : T;
// type res = MyType<string[]>;
// type res = MyType<number>;

2. unknown

/*
 1.什么是unknown型別?
 unknown型別是TS3.0中新增的一個頂級型別, 被稱作安全的any
* */
* 
// 1.任何型別都可以賦值給unknown型別
// let value:unknown;
// value = 123;
// value = "abc";
// value = false;

// 2.如果沒有型別斷言或基于控制流的型別細化, 那么不能將unknown型別賦值給其它型別

// let value1:unknown = 123;
// let value2:number;
// value2 = value1;
// value2 = value1 as number;
// if(typeof value1 === 'number'){
//     value2 = value1;
// }

// 3.如果沒有型別斷言或基于控制流的型別細化, 那么不能在unknown型別上進行任何操作

// let value1:unknown = 123;
// value1++;
// (value1 as number)++;
// if(typeof value1 === 'number'){
//      value1++;
// }

// 4.只能對unknown型別進行 相等或不等操作, 不能進行其它操作(因為其他操作沒有意義)

// let value1:unknown = 123;
// let value2:unknown = 123;
// console.log(value1 === value2);
// console.log(value1 !== value2);
// console.log(value1 >= value2); // 雖然沒有報錯, 但是不推薦, 如果想報錯提示, 可以打開嚴格模式

// 5.unknown與其它任何型別組成的交叉型別最后都是其它型別

// type MyType = number & unknown;
// type MyType = unknown & string;

// 6.unknown除了與any以外, 與其它任何型別組成的聯合型別最后都是unknown型別

// type MyType = unknown | any;
// type MyType = unknown | number;
// type MyType = unknown | string | boolean;

// 7.never型別是unknown型別的子型別
// type MyType = never extends unknown ? true : false;

// 8.keyof unknown等于never
// type MyType = keyof unknown;

// 9.unknown型別的值不能訪問其屬性,方法,創建實體
// class Person {
//     name:string = 'lnj';
//     say():void{
//         console.log(`name = ${this.name}`);
//     }
// }
// let p:unknown = new Person();
// p.say();
// console.log(p.name);


// 10.使用映射型別時, 如果遍歷的是unknown型別, 那么不會映射任何屬性
// type MyType<T> = {
//     [P in keyof T]:any
// }
// type res = MyType<unknown>

3. 迭代器和生成器

/*
和ES6迭代器一樣
for...of
從零玩轉JavaScript核心+新特性③
140-JavaScript-陣列高級API上(掌握)
從零玩轉JS新特性+流行框架⑥
34-Iterator介面(掌握)
35-Iterator介面應用場景(掌握)
* */
let someArray = [1, "string", false];
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}
/*
生成器
當生成目標為ES5或ES3，迭代器只允許在Array型別上使用，
在非陣列值上使用 for..of陳述句會得到一個錯誤，
就算這些非陣列值已經實作了Symbol.iterator屬性，
為了解決這個問題, 編譯器會生成一個簡單的for回圈做為for..of回圈
* */

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.ES6模塊
1.1分開匯入匯出
export xxx;
import {xxx} from "path";

1.2一次性匯入匯出
export {xxx, yyy, zzz};
import {xxx, yyy, zzz} from "path";

1.3默認匯入匯出
export default xxx;
import xxx from "path";
*/
/*
2.Node模塊
1.1通過exports.xxx = xxx匯出
通過const xxx = require("path");匯入
通過const {xx, xx} = require("path");匯入

1.2通過module.exports.xxx = xxx匯出
通過const xxx = require("path");匯入
通過const {xx, xx} = require("path");匯入
* */
/*
ES6的模塊和Node的模塊是不兼容的, 所以TS為了兼容兩者就推出了
export = xxx;
import xxx = require('path');
* */
import obj = require("./55/test");
console.log(obj);

6. 命名空間

/*
1.什么是命名空間?
命名空間可以看做是一個微型模塊,
當我們先把相關的業務代碼寫在一起, 又不想污染全域空間的時候, 我們就可以使用命名空間
本質就是定義一個大物件, 把變數/方法/類/介面...的都放里面

2.命名空間和模塊區別
在程式內部使用的代碼, 可以使用命名空間封裝和防止全域污染
在程式內部外部使用的代碼, 可以使用模塊封裝和防止全域污染
總結: 由于模塊也能實作相同的功能, 所以大部分情況下用模塊即可
* */
// namespace Validation {
//     const lettersRegexp = /^[A-Za-z]+$/;
//     export const LettersValidator  = (value) =>{
//         return lettersRegexp.test(value);
//     }
// }

/// <reference path="./56/test.ts" />
console.log(Validation.LettersValidator('abc'));
console.log(Validation.LettersValidator(123));

• test.js

var Validation;
(function (Validation) {
    var lettersRegexp = /^[A-Za-z]+$/;
    Validation.LettersValidator = function (value) {
        return lettersRegexp.test(value);
    };
})(Validation || (Validation = {}));
/*
1.什么是命名空間?
命名空間可以看做是一個微型模塊,
當我們先把相關的業務代碼寫在一起, 又不想污染全域空間的時候, 我們就可以使用命名空間
本質就是定義一個大物件, 把變數/方法/類/介面...的都放里面

2.命名空間和模塊區別
在程式內部使用的代碼, 可以使用命名空間封裝和防止全域污染
在程式內部外部使用的代碼, 可以使用模塊封裝和防止全域污染
總結: 由于模塊也能實作相同的功能, 所以大部分情況下用模塊即可
* */
// namespace Validation {
//     const lettersRegexp = /^[A-Za-z]+$/;
//     export const LettersValidator  = (value) =>{
//         return lettersRegexp.test(value);
//     }
// }
/// <reference path="./56/test.ts" />
console.log(Validation.LettersValidator('abc'));
console.log(Validation.LettersValidator(123));

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

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

推薦閱讀：

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

10萬字Go語言保姆級教程

2 萬字 Jquery 入門教程

3 萬字 html +css 入門教程

169集保姆級C語言視頻

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

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