TypeScript的高級用法(持續更新)


為什么要使用TypeScript?

某乎已經解釋的很清楚了傳送門

我目前親身的感受,TpeScript帶來的好處

  • 類型系統可以避免很多js的靈活性帶來的隱藏bug,譬如在js里變量是可以到處定義,到處賦值,這就會導致中途你都不知道改成什么類型了,會不會有bug
  • 團隊協作代碼風格更加嚴格,這一般是強類型編程語言所帶來的特性之一,譬如很典型的Java,C#等

TpeScript香是香,只是使用中會帶來以下問題。

  • 入手門檻高,招人的門檻也高了不少
  • 不習慣這么嚴格的語法,導致最后寫成AnyScript,四不像

TypeScript的高級用法

支持”函數定義“

type Foo<T> = T
let nums: Foo<number> = 1

上面可以理解為

function Foo (T: any) {
  return T
}

如果我們對T的類型做限制

type foo<T extends string> = T;

則可以理解為

function Foo (T: string) {
  return T
}

當然了,我們也可以給T一個默認值

type Foo<T extends string = 'Hello World'> = T;

可以理解為:

function Foo (T: string = 'Hello World') {
  return T
}

支持條件判斷

T extends Z ? X : Y

e.g.

type IsNumber<T> = T extends number ? 'this is a number' : 'this is not a number';

動態推導出聯合類型

interface Student {
  name: string;
  age: number;
}

type studentKey = keyof Student; // "name" | "age"

遍歷聯合類型

通過 in 關鍵字

type key = 'vue' | 'react';

type MappedType = { [k in key]: string } // { vue: string; react: string; }

通過 索引

type frameworks = ['vue', 'react', 'angular'];
type f0 = frameworks[0]
type f1 = frameworks[1]
type f2 = frameworks[2]
type fa = frameworks[any]

支持 "作用域"

全局作用域

declare module '*.png';
declare module '*.svg';
declare module '*.jpg';

模塊作用域

就像 nodejs 中的模塊一樣,每個文件都是一個模塊,每個模塊都是獨立的模塊作用域。這里模塊作用域觸發的條件之一就是使用 export 關鍵字導出內容。

每一個模塊中定義的內容是無法直接在其他模塊中直接獲取到的,如果有需要的話,可以使用 import 關鍵字按需導入。

參考:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM