說在前面

   本文難度偏中下，涉及到的點(diǎn)大多為如何在項(xiàng)目中合理應(yīng)用ts，小部分會(huì)涉及一些原理，受眾面較廣，有無TS基礎(chǔ)均可放心食用。
                        **>>>> 閱完本文，您可能會(huì)收獲到<<<<**

1. 若您還不熟悉 TS，那本文可幫助您完成 TS 應(yīng)用部分的學(xué)習(xí)，伴隨眾多 Demo 例來引導(dǎo)業(yè)務(wù)應(yīng)用；
2. 若您比較熟悉 TS，那本文可當(dāng)作復(fù)習(xí)文，帶您回顧知識(shí)，希望能在某些點(diǎn)引發(fā)您新發(fā)現(xiàn)和思考；
3. 針對(duì)于 class 組件的 IState 和 IProps，類比 Hook 組件的部分寫法和思考；

??????TIPS：超好用的在線 TS 編輯器（諸多配置項(xiàng)可手動(dòng)配置） 傳送門：TS 在線 ??????

一、什么是 TS

不扯晦澀的概念，通俗來說 TypeScript 就是 JavaScript 的超集，它具有可選的類型，并可以編譯為純 JavaScript 運(yùn)行。（筆者一直就把 TypeScript 看作 JavaScript 的 Lint）那么問題來了，為什么 TS 一定要設(shè)計(jì)成靜態(tài)的？ 或者換句話說，我們?yōu)槭裁葱枰?JavaScript 添加類型規(guī)范呢 ？

經(jīng)典自問自答環(huán)節(jié)——因?yàn)樗梢越鉀Q一些 JS 尚未解決的痛點(diǎn)：

1. JS 是動(dòng)態(tài)類型的語言，這也意味著在實(shí)例化之前我們都不知道變量的類型，但是使用 TS 可以在運(yùn)行前就避免經(jīng)典低級(jí)錯(cuò)誤。 例： Uncaught TypeError：'xxx' is not a function

?? 典中典級(jí)別的錯(cuò)誤??：

file

file

file

JS 就是這樣，只有在運(yùn)行時(shí)發(fā)生了錯(cuò)誤才告訴我有錯(cuò)，但是當(dāng) TS 介入后：

file

file

好家伙！直接把問題在編輯器階段拋出，nice！

2. 懶人狂歡。 規(guī)范方便，又不容易出錯(cuò)，對(duì)于 VS Code，它能做的最多只是標(biāo)示出有沒有這個(gè)屬性，但并不能精確的表明這個(gè)屬性是什么類型，但 TS 可以通過類型推導(dǎo)/反推導(dǎo)（說白話：如果您未明確編寫類型，則將使用類型推斷來推斷您正在使用的類型），從而完美優(yōu)化了代碼補(bǔ)全這一項(xiàng)：

file

file

第一個(gè) Q&A——思考 ：

那么我們還能想到在業(yè)務(wù)開發(fā)中 TS 解決了哪些 JS 的痛點(diǎn)呢？（提問）

回答，總結(jié)，補(bǔ)充：
-對(duì)函數(shù)參數(shù)的類型限制；
-對(duì)數(shù)組和對(duì)象的類型限制，避免定義出錯(cuò) 例如數(shù)據(jù)解構(gòu)復(fù)雜或較多時(shí)，
可能會(huì)出現(xiàn)數(shù)組定義錯(cuò)誤 a = { }, if (a.length){ // xxxxx }
-let functionA = 'jiawen' // 實(shí)際上 let functionA: string = 'jiawen'

3. 使我們的應(yīng)用代碼更易閱讀和維護(hù)，如果定義完善，可以通過類型大致明白參數(shù)的作用；

相信通過上述簡(jiǎn)單的bug-demo，各位已對(duì)TS有了一個(gè)初步的重新認(rèn)識(shí)
接下來的章節(jié)便正式介紹我們?cè)跇I(yè)務(wù)開發(fā)過程中如何用好TS

二、怎么用 TS

 在業(yè)務(wù)中如何用TS/如何用好TS？這個(gè)問題其實(shí)和 " 在業(yè)務(wù)中怎么用好一個(gè)API " 是一樣的。首先要知道這個(gè)東西在干嘛，參數(shù)是什么，規(guī)則是什么，能夠接受有哪些擴(kuò)展......等等。 簡(jiǎn)而言之，擼它！

file

TS 常用類型歸納

通過對(duì)業(yè)務(wù)中常見的 TS 錯(cuò)誤做出的一個(gè)綜合性總結(jié)歸納，希望 Demos 會(huì)對(duì)您有收獲

元語(primitives)之 string number boolean

  筆者把基本類型拆開的原因是: 不管是中文還是英文文檔，primitives/元語/元組 這幾個(gè)名詞都頻繁出鏡，筆者理解的白話：希望在類型約束定義時(shí)，使用的是字面量而不是內(nèi)置對(duì)象類型，官方文檔：

file

let a: string = 'jiawen';
let flag: boolean = false;
let num: number = 150

interface IState: {
  flag: boolean;
  name: string;
  num: number;
}

元組

// 元組類型表示已知元素?cái)?shù)量和類型的數(shù)組，各元素的類型不必相同，但是對(duì)應(yīng)位置的類型需要相同。

let x: [string, number];
x = ['jiawen', 18];   // ok
x = [18, 'jiawen'];    // Erro
console.log(x[0]);    // jiawen

undefined null

let special: string = undefined
// 值得一提的是 undefined/null 是所有基本類型的子類，
// 所以它們可以任意賦值給其他已定義的類型，這也是為什么上述代碼不報(bào)錯(cuò)的原因

object 和 { }

// object 表示的是常規(guī)的 Javascript對(duì)象類型，非基礎(chǔ)數(shù)據(jù)類型
const offDuty = (value: object) => {
  console.log("value is ",  value);
}

offDuty({ prop: 0}) // ok
offDuty(null) offDuty(undefined) // Error
offDuty(18) offDuty('offDuty') offDuty(false) // Error


//  {} 表示的是 非null / 非undefined 的任意類型
const offDuty = (value: {}) => {
  console.log("value is ", value);
}

offDuty({ prop: 0}) // ok
offDuty(null) offDuty(undefined) // Error
offDuty(18) offDuty('offDuty') offDuty(false) // ok
offDuty({ toString(){ return 333 } }) // ok

//  {} 和Object幾乎一致，區(qū)別是Object會(huì)對(duì)Object內(nèi)置的 toString/hasOwnPreperty 進(jìn)行校驗(yàn)
const offDuty = (value: Object) => {
  console.log("value is ",  value);
}

offDuty({ prop: 0}) // ok
offDuty(null) offDuty(undefined) // Error
offDuty(18) offDuty('offDuty') offDuty(false) // ok
offDuty({ toString(){ return 333 } }) // Error

如果需要一個(gè)對(duì)象類型，但對(duì)屬性沒有要求，建議使用 object 
{} 和 Object 表示的范圍太大，建議盡量不要使用

object of params

// 我們通常在業(yè)務(wù)中可多采用點(diǎn)狀對(duì)象函數(shù)（規(guī)定參數(shù)對(duì)象類型）

const offDuty = (value: { x: number; y: string }) => {
  console.log("x is ", value.x);
  console.log("y is ", value.y);
}

// 業(yè)務(wù)中一定會(huì)涉及到"可選屬性"；先簡(jiǎn)單介紹下方便快捷的“可選屬性”

const offDuty = (value: { x: number; y?: string }) => {
  console.log("必選屬性x ", value.x);
  console.log("可選屬性y ", value.y);
  console.log("可選屬性y的方法 ", value.y.toLocaleLowerCase());
}
offDuty({ x: 123, y: 'jiawen' })
offDuty({ x: 123 }) 

// 提問： 上述代碼有問題嗎？

答案：

// offDuty({ x: 123 }) 會(huì)導(dǎo)致結(jié)果報(bào)錯(cuò)value.y.toLocaleLowerCase()
// Cannot read property 'toLocaleLowerCase' of undefined

方案1: 手動(dòng)類型檢查
const offDuty = (value: { x: number; y?: string }) => {
    if (value.y !== undefined) {
            console.log("可能不存在的 ", value.y.toUpperCase());
  }
}
方案2：使用可選屬性 (推薦)
const offDuty = (value: { x: number; y?: string }) => {
  console.log("可能不存在的 ", value.y?.toLocaleLowerCase());
}

unknown 與 any

// unknown 可以表示任意類型，但它同時(shí)也告訴TS, 開發(fā)者對(duì)類型也是無法確定，做任何操作時(shí)需要慎重

let Jiaven: unknown

Jiaven.toFixed(1) // Error

if (typeof Jiaven=== 'number') {
  Jiaven.toFixed(1) // OK
}

當(dāng)我們使用any類型的時(shí)候，any會(huì)逃離類型檢查，并且any類型的變量可以執(zhí)行任意操作，編譯時(shí)不會(huì)報(bào)錯(cuò)

anyscript === javascript

注意：any 會(huì)增加了運(yùn)行時(shí)出錯(cuò)的風(fēng)險(xiǎn)，不到萬不得已不要使用；

如果遇到想要表示【不知道什么類型】的場(chǎng)景，推薦優(yōu)先考慮 unknown

union 聯(lián)合類型

union也叫聯(lián)合類型，由兩個(gè)或多個(gè)其他類型組成，表示可能為任何一個(gè)的值，類型之間用 ' | '隔開

type dayOff = string | number | boolean

聯(lián)合類型的隱式推導(dǎo)可能會(huì)導(dǎo)致錯(cuò)誤，遇到相關(guān)問題請(qǐng)參考語雀 code and tips —— 《TS的隱式推導(dǎo)》

.值得注意的是，如果訪問不共有的屬性的時(shí)候，會(huì)報(bào)錯(cuò)，訪問共有屬性時(shí)不會(huì).上個(gè)最直觀的demo

function dayOff (value: string | number): number {
    return value.length;
}
// number并不具備length，會(huì)報(bào)錯(cuò)，解決方法：typeof value === 'string'

function dayOff (value: string | number): number {
    return value.toString();
}
// number和string都具備toString()，不會(huì)報(bào)錯(cuò)

never

// never是其它類型（包括 null 和 undefined）的子類型，代表從不會(huì)出現(xiàn)的值。

// 那never在實(shí)際開發(fā)中到底有什么作用？ 這里筆者原汁原味照搬尤雨溪的經(jīng)典解釋來做第一個(gè)例子

第一個(gè)例子，當(dāng)你有一個(gè) union type:

interface Foo {
  type: 'foo'
}

interface Bar {
  type: 'bar'
}

type All = Foo | Bar

在 switch 當(dāng)中判斷 type，TS是可以收窄類型的 (discriminated union)：

function handleValue(val: All) {
  switch (val.type) {
    case 'foo':
      // 這里 val 被收窄為 Foo
      break
    case 'bar':
      // val 在這里是 Bar
      break
    default:
      // val 在這里是 never
      const exhaustiveCheck: never = val
      break
  }
}

注意在 default 里面我們把被收窄為 never 的 val 賦值給一個(gè)顯式聲明為 never 的變量。
    
如果一切邏輯正確，那么這里應(yīng)該能夠編譯通過。但是假如后來有一天你的同事改了 All 的類型：

    type All = Foo | Bar | Baz

然而他忘記了在 handleValue 里面加上針對(duì) Baz 的處理邏輯，
這個(gè)時(shí)候在 default branch 里面 val 會(huì)被收窄為 Baz，導(dǎo)致無法賦值給 never，產(chǎn)生一個(gè)編譯錯(cuò)誤。
所以通過這個(gè)辦法，你可以確保 handleValue 總是窮盡 (exhaust) 了所有 All 的可能類型。

第二個(gè)用法  返回值為 never 的函數(shù)可以是拋出異常的情況
function error(message: string): never {
    throw new Error(message);
}

第三個(gè)用法 返回值為 never 的函數(shù)可以是無法被執(zhí)行到的終止點(diǎn)的情況
function loop(): never {
    while (true) {}
}

void

interface IProps {
  onOK: () => void
}
void 和 undefined 功能高度類似，但void表示對(duì)函數(shù)的返回值并不在意或該方法并無返回值

enum

筆者認(rèn)為ts中的enum是一個(gè)很有趣的枚舉類型，它的底層就是number的實(shí)現(xiàn)

1.普通枚舉
enum Color {
  Red, 
  Green, 
  Blue
};
let c: Color = Color.Blue;
console.log(c); // 2

2.字符串枚舉
enum Color {
  Red = 'red', 
  Green = 'not red', 
};

3.異構(gòu)枚舉 / 有時(shí)也叫混合枚舉
enum Color {
  Red = 'red', 
  Num = 2, 
};

<第一個(gè)坑>

enum Color {
  A,         // 0
  B,         // 1
  C = 20,    // 20
  D,         // 21
  E = 100,   // 100
  F,         // 101
}

若初始化有部分賦值，那么后續(xù)成員的值為上一個(gè)成員的值加1

<第二個(gè)坑> 這個(gè)坑是第一個(gè)坑的延展，稍不仔細(xì)就會(huì)上當(dāng)！

const getValue = () => {
  return 23
}

enum List {
  A = getValue(),
  B = 24,  // 此處必須要初始化值，不然編譯不通過
  C
}
console.log(List.A) // 23
console.log(List.B) // 24
console.log(List.C) // 25

如果某個(gè)屬性的值是計(jì)算出來的，那么它后面一位的成員必須要初始化值。
否則將會(huì) Enum member must have initializer.

泛型

筆者理解的泛型很白話：先不指定具體類型，通過傳入的參數(shù)類型來得到具體類型
我們從下述的 filter-demo 入手，探索一下為什么一定需要泛型

• 泛型的基礎(chǔ)樣式

function fun<T>(args: T): T {
    return args
}

如果沒接觸過，是不是會(huì)覺得有點(diǎn)懵？ 沒關(guān)系！我們直接從業(yè)務(wù)角度深入——

1.剛開始的需求：過濾數(shù)字類型的數(shù)組

declare function filter(
    array: number[], 
  fn: (item: unknown) => boolean
) : number[];

2.產(chǎn)品改了需求：還要過濾一些字符串 string[] 

彳亍，那就利用函數(shù)的重載, 加一個(gè)聲明, 雖然笨了點(diǎn)，但是很好理解

declare function filter(
  array: string[],
  fn: (item: unknown) => boolean
): string[];

declare function filter(
  array: number[],
  fn: (item: unknown) => boolean
): number[];

3.產(chǎn)品又來了! 這次還要過濾 boolean[]、object[] ..........

這個(gè)時(shí)候如果還是選擇重載，將會(huì)大大提升工作量，代碼也會(huì)變得越來越累贅，這個(gè)時(shí)候泛型就出場(chǎng)了，
它從實(shí)現(xiàn)上來說更像是一種方法，通過你的傳參來定義類型，改造如下：

declare function filter<T>(
  array: T[],
  fn: (item: unknown) => boolean
): T[];

泛型中的<T>可以是任意，但是大部分偏好為 T、U、S 等，

當(dāng)我們把泛型理解為一種方法實(shí)現(xiàn)后，那么我們便很自然的聯(lián)想到：方法有多個(gè)參數(shù)、默認(rèn)值，泛型也可以

type Foo<T, U = string> = { // 多參數(shù)、默認(rèn)值
  foo: Array<T> // 可以傳遞
  bar: U
}

type A = Foo<number> // type A = { foo: number[]; bar: string; }
type B = Foo<number, number> // type B = { foo: number[]; bar: number; }

既然是“函數(shù)”，那也會(huì)有“限制”，下文列舉一些稍微常見的約束

1. extends: 限制 T 必須至少是一個(gè) XXX 的類型

type dayOff<T extends HTMLElement = HTMLElement> = {
   where: T,
   name: string
}

2. Readonly<T>: 構(gòu)造一個(gè)所有屬性為readonly，這意味著無法重新分配所構(gòu)造類型的屬性。

interface Eat {
  food: string;
}

const todo: Readonly<Eat> = {
  food: "meat beef milk",
};

todo.food = "no food"; // Cannot assign to 'title' because it is a read-only property.

3. Pick<T,K>: 從T中挑選出一些K屬性

interface Todo {
  name: string;
  job: string;
  work: boolean;


type TodoPreview = Pick<Todo, "name" | "work">;

const todo: TodoPreview = {
  name: "jiawen",
  work: true,
};
todo;

4. Omit<T, K>: 結(jié)合了 T 和 K 并忽略對(duì)象類型中 K 來構(gòu)造類型。

interface Todo {
  name: string;
  job: string;
  work: boolean;
}

type TodoPreview = Omit<Todo, "work">;

const todo: TodoPreview = {
  name: "jiawen",
  job: 'job',
};

5.Record: 約束 定義鍵類型為 Keys、值類型為 Values 的對(duì)象類型。

enum Num {
  A = 10001,
  B = 10002,
  C = 10003
}

const NumMap: Record<Num, string> = { 
  [Num.A]: 'this is A',
  [Num.B]: 'this is B'
}
// 類型 "{ 10001: string; 10002: string; }" 中缺少屬性 "10003"，
// 但類型 "Record<ErrorCodes, string>" 中需要該屬性,所以我們還可以通過Record來做全面性檢查

keyof 關(guān)鍵字可以用來獲取一個(gè)對(duì)象類型的所有 key 類型
type User = {
  id: string;
  name: string;
};

type UserKeys = keyof User;  // "id" | "name"

改造如下

type Record<K extends keyof any, T> = {
  [P in K]: T;
};
此時(shí)的 T 為 any；

還有一些不常用，但是很易懂的：

6. Extract<T, U>  從T,U中提取相同的類型

7. Partial<T>    所有屬性可選

type User = {
  id?: string,
  gender: 'male' | 'female'
}

type PartialUser =  Partial<User>  // { id?: string, gender?: 'male' | 'female'}
  
type Partial<T> = { [U in keyof T]?: T[U] }

8. Required<T>   所有屬性必須 << === >> 與Partial相反

type User = {
  id?: string,
  sex: 'male' | 'female'
}

type RequiredUser = Required<User> // { readonly id: string, readonly gender: 'male' | 'female'}

function showUserProfile (user: RequiredUser) {
  console.log(user.id) // 這時(shí)候就不需要再加?了
  console.log(user.sex)
}
type Required<T> = { [U in keyof T]-?: T[U] };   -? : 代表去掉？

三、TS 的一些須知

TS 的 type 和 interface

• interface（接口） 只能聲明對(duì)象類型，支持聲明合并（可擴(kuò)展）。

interface User {
  id: string
}
 
interface User {
  name: string
}
 
const user = {} as User
 
console.log(user.id);
console.log(user.name);

• type（類型別名）不支持聲明合并 -- l 類型

type User = {
  id: string,
}

if (true) {
  type User = {
    name: string,
  }

  const user = {} as User;
  console.log(user.name);
  console.log(user.id) // 類型“User”上不存在屬性“id”。
}

file

????????????
type 和 interface 異同點(diǎn)總結(jié)：

1. 通常來講 type 更為通用，右側(cè)可以是任意類型，包括表達(dá)式運(yùn)算，以及映射等；
2. 凡是可用 interface 來定義的，type 也可；
3. 擴(kuò)展方式也不同，interface 可以用 extends 關(guān)鍵字進(jìn)行擴(kuò)展，或用來 implements 實(shí)現(xiàn)某個(gè)接口；
4. 都可以用來描述一個(gè)對(duì)象或者函數(shù)；
5. type 可以聲明基本類型別名、聯(lián)合類型、元組類型，interface 不行；
6. ?? 但如果你是在開發(fā)一個(gè)包，模塊，允許別人進(jìn)行擴(kuò)展就用 interface，如果需要定義基礎(chǔ)數(shù)據(jù)類型或者需要類型運(yùn)算，使用 type。
7. interface 可以被多次定義，并會(huì)被視作合并聲明，而 type 不支持；
8. 導(dǎo)出方式不同，interface 支持同時(shí)聲明并默認(rèn)導(dǎo)出，而 typetype 必須先聲明后導(dǎo)出；

TS 的腳本模式和模塊模式

Typescript 存在兩種模式，區(qū)分的邏輯是，文件內(nèi)容包不包含 import 或者 export 關(guān)鍵字

腳本模式（Script） 一個(gè)文件對(duì)應(yīng)一個(gè) html 的 script 標(biāo)簽，
模塊模式（Module）一個(gè)文件對(duì)應(yīng)一個(gè) Typescript 的模塊。

腳本模式下，所有變量定義，類型聲明都是全局的，多個(gè)文件定義同一個(gè)變量會(huì)報(bào)錯(cuò)，同名 interface 會(huì)進(jìn)行合并；而模塊模式下，所有變量定義，類型聲明都是模塊內(nèi)有效的。

兩種模式在編寫類型聲明時(shí)也有區(qū)別，例如腳本模式下直接 declare var GlobalStore 即可為全局對(duì)象編寫聲明。

例子：

• 腳本模式下直接 declare var GlobalStore 即可為全局對(duì)象編寫聲明。

GlobalStore.foo = "foo";
GlobalStore.bar = "bar"; // Error

declare var GlobalStore: {
  foo: string;
};

• 模塊模式下，要為全局對(duì)象編寫聲明需要 declare global

GlobalStore.foo = "foo";
GlobalStore.bar = "bar";

declare global {
  var GlobalStore: {
    foo: string;
    bar: string;
  };
}

export {}; // export 關(guān)鍵字改變文件的模式

TS 的索引簽名

• 索引簽名可以用來定義對(duì)象內(nèi)的屬性、值的類型，例如定義一個(gè) React 組件，允許 Props 可以傳任意 key 為 string，value 為 number 的 props

interface Props {
  [key: string]: number
}

<Component count={1} /> // OK
<Component count={true} /> // Error
<Component count={'1'} /> // Error

TS 的類型鍵入

• Typescript 允許像對(duì)象取屬性值一樣使用類型

type User = {
  userId: string
  friendList: {
    fristName: string
    lastName: string
  }[]
}

type UserIdType = User['userId'] // string
type FriendList = User['friendList'] // { fristName: string; lastName: string; }[]
type Friend = FriendList[number] // { fristName: string; lastName: string; }

• 在上面的例子中，我們利用類型鍵入的功能從 User 類型中計(jì)算出了其他的幾種類型。FriendList[number]這里的 number 是關(guān)鍵字，用來取數(shù)組子項(xiàng)的類型。在元組中也可以使用字面量數(shù)字得到數(shù)組元素的類型。

type group = [number, string]
type First =  group[0] // number
type Second = group[1] // string

TS 的斷言

• 類型斷言不是類型轉(zhuǎn)換，斷言成一個(gè)聯(lián)合類型中不存在的類型是不允許的

function getLength(value: string | number): number {
    if (value.length) {
        return value.length;
    } else {
        return value.toString().length;
    }
  
    // 這個(gè)問題在object of parmas已經(jīng)提及，不再贅述
  
    修改后：
    
    if ((<string>value).length) {
        return (<string>value).length;
    } else {
        return something.toString().length;
    }
}

斷言的兩種寫法

1. <類型>值:  <string>value

2. 或者 value as string

特別注意?。?！ 斷言成一個(gè)聯(lián)合類型中不存在的類型是不允許的

function toBoolean(something: string | number): boolean {
    return <boolean>something;
}

• 非空斷言符 ！

TypeScript 還具有一種特殊的語法，用于從類型中刪除 null 和 undefined 不進(jìn)行任何顯式檢查。!在任何表達(dá)式之后寫入實(shí)際上是一個(gè)類型斷言，表明該值不是 null 或 undefined

function liveDangerously(x?: number | undefined | null) {
  // 推薦寫法
  console.log(x!.toFixed());
}

四、如何在 Hook 組件中使用 TS

usestate

• useState 如果初始值不是 null/undefined 的話，是具備類型推導(dǎo)能力的，根據(jù)傳入的初始值推斷出類型；初始值是 null/undefined 的話則需要傳遞類型定義才能進(jìn)行約束。一般情況下，還是推薦傳入類型（通過 useState 的第一個(gè)泛型參數(shù)）。

// 這里ts可以推斷 value的類型并且能對(duì)setValue函數(shù)調(diào)用進(jìn)行約束
const [value, setValue] = useState(0);

interface MyObject {
  name: string;
  age?: number;
}

// 這里需要傳遞MyObject才能約束 value, setValue
// 所以我們一般情況下推薦傳入類型
const [value, setValue] = useState<MyObject>(null);

-----as unkonwn as unkownun

useEffect useLayoutEffect

• 沒有返回值，無需類型傳遞和約束

useMemo useCallback

• useMemo 無需傳遞類型, 根據(jù)函數(shù)的返回值就能推斷出類型。
• useCallback 無需傳遞類型，根據(jù)函數(shù)的返回值就能推斷出類型。

但是注意函數(shù)的入?yún)⑿枰x類型，不然將會(huì)推斷為 any！

const value = 10;

const result = useMemo(() => value * 2, [value]); // 推斷出result是number類型

const multiplier = 2;
// 推斷出 (value: number) => number
// 注意函數(shù)入?yún)alue需要定義類型
const multiply = useCallback((value: number) => value * multiplier, [multiplier]);

useRef

• useRef 傳非空初始值的時(shí)候可以推斷類型，同樣也可以通過傳入第一個(gè)泛型參數(shù)來定義類型，約束 ref.current 的類型。

1. 如果傳值為null
const MyInput = () => {
  const inputRef = useRef<HTMLInputElement>(null); // 這里約束inputRef是一個(gè)html元素
  return <input ref={inputRef} />
}
  
2. 如果不為null
const myNumberRef = useRef(0);  // 自動(dòng)推斷出 myNumberRef.current 是number類型
myNumberRef.current += 1;

useContext

• useContext 一般根據(jù)傳入的 Context 的值就可以推斷出返回值。一般無需顯示傳遞類型

type Theme = 'light' | 'dark';
// 我們?cè)赾reateContext就傳了類型了
const ThemeContext = createContext<Theme>('dark');

const App = () => (
  <ThemeContext.Provider value="dark">
    <MyComponent />
  </ThemeContext.Provider>
)

const MyComponent = () => {
    // useContext根據(jù)ThemeContext推斷出類型，這里不需要顯示傳
  const theme = useContext(ThemeContext);
  return <div>The theme is {theme}</div>;

五、關(guān)于 TS 的一些思考

1. 關(guān)于 TSC 如何把 TS 代碼轉(zhuǎn)換為 JS 代碼

這個(gè)部分比較冗長(zhǎng)，后續(xù)可以單獨(dú)出一篇文章（2）來專門探索。

• 不過，tsconfig.json 的部分常用的配置屬性表還是值得一提的

{
  "compilerOptions": {
    "noEmit": true, // 不輸出文件
    "allowUnreachableCode": true, // 不報(bào)告執(zhí)行不到的代碼錯(cuò)誤。
    "allowUnusedLabels": false, // 不報(bào)告未使用的標(biāo)簽錯(cuò)誤
    "alwaysStrict": false, // 以嚴(yán)格模式解析并為每個(gè)源文件生成 "use strict"語句
    "baseUrl": ".", // 工作根目錄
    "lib": [ // 編譯過程中需要引入的庫文件的列表
      "es5",
      "es2015",
      "es2016",
      "es2017",
      "es2018",
      "dom"
    ]
    "experimentalDecorators": true, // 啟用實(shí)驗(yàn)性的ES裝飾器
    "jsx": "react", // 在 .tsx文件里支持JSX
    "sourceMap": true, // 是否生成map文件
    "module": "commonjs", // 指定生成哪個(gè)模塊系統(tǒng)代碼
    "noImplicitAny": false, // 是否默認(rèn)禁用 any
    "removeComments": true, // 是否移除注釋
    "types": [ //指定引入的類型聲明文件，默認(rèn)是自動(dòng)引入所有聲明文件，一旦指定該選項(xiàng)，則會(huì)禁用自動(dòng)引入，改為只引入指定的類型聲明文件，如果指定空數(shù)組[]則不引用任何文件
      "node", // 引入 node 的類型聲明
    ],
    "paths": { // 指定模塊的路徑，和baseUrl有關(guān)聯(lián)，和webpack中resolve.alias配置一樣
      "src": [ //指定后可以在文件之直接 import * from 'src';
        "./src"
      ],
    },
    "target": "ESNext", // 編譯的目標(biāo)是什么版本的
    "outDir": "./dist", // 輸出目錄
    "declaration": true, // 是否自動(dòng)創(chuàng)建類型聲明文件
    "declarationDir": "./lib", // 類型聲明文件的輸出目錄
    "allowJs": true, // 允許編譯javascript文件。
  },
  // 指定一個(gè)匹配列表（屬于自動(dòng)指定該路徑下的所有ts相關(guān)文件）
  "include": [
    "src/**/*"
  ],
  // 指定一個(gè)排除列表（include的反向操作）
  "exclude": [
    "demo.ts"
  ],
  // 指定哪些文件使用該配置（屬于手動(dòng)一個(gè)個(gè)指定文件）
  "files": [
    "demo.ts"
  ]
}

2. TS 泛型的底層實(shí)現(xiàn)

關(guān)于TS泛型進(jìn)階篇 鏈接：[https://dtstack.yuque.com/rd-center/sm6war/wae3kg](https://dtstack.yuque.com/rd-center/sm6war/wae3kg)


這個(gè)部分比較復(fù)雜，筆者還需沉淀，歡迎各位直接留言或在文章中補(bǔ)充！?。?

3. TS 泛型+類型反推在實(shí)際開發(fā)中的應(yīng)用