日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

TypeScript 是 JavaScript 的超集，JavaScript 能夠做的事情，它都可以做且還增加了很多功能，例如靜態(tài)類型、增強的面向?qū)ο缶幊棠芰Φ取?/p>

公司主營業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出葫蘆島免費做網(wǎng)站回饋大家。

本文是筆者日常學習、使用 TypeScript 過程中自己記錄的一些知識點，現(xiàn)在總結(jié)分享給大家。包含了做為初學者在學習 TypeScript 時應關(guān)注的核心知識，在掌握了這些知識點后，就是在項目中的靈活應用。

下圖為本文概覽：

社區(qū)發(fā)展現(xiàn)狀調(diào)研

近些年 TypeScript 在前端圈備受推崇，正在被越來越多的前端開發(fā)者所接受，包括在 Node.js 后端開發(fā)中同樣如此。

下面從幾份開發(fā)者報告調(diào)查數(shù)據(jù)看 TypeScript 的發(fā)展現(xiàn)狀。

2022 年前端開發(fā)者現(xiàn)狀報告

本報告來源于 https://tsh.io/state-of-frontend/#report 調(diào)查面比較廣泛。來自 125 個國家的 3703+ 前端開發(fā)者及 19 位前端專家參與了該次調(diào)查。

關(guān)于 TypeScript ，過去一年里有將近 84.1%  的參與者表示使用過。

對于 TypeScript 前景描述，近 43% 開發(fā)者表示 “TypeScript 將超越 JavaScript 成為新的前端標準” 還是比較看好的。

2021 年 Node.js 年度報告

下面來看一份來國內(nèi)的 Node.js 2021 年度開發(fā)者調(diào)查報告 https://nodersurvey.github.io/reporters。

從 “代碼轉(zhuǎn)譯” 角度調(diào)研，有 47.5% 的開發(fā)者使用了 TypeScript。在 Node.js 后端框架中 Nest.js 最近幾年也是一個熱門選擇，該框架一個特點是完全基于 TypeScript，受到了更多開發(fā)者的青睞。

一些其它的調(diào)查者報告數(shù)據(jù)

還有一些其它的調(diào)查報告數(shù)據(jù)，例如 2021 年 Stack Overflow 調(diào)查者報告、Google 搜索量趨勢，NPM 下載量趨勢 從上面可以看出 TypeScript 近幾年的發(fā)展趨勢還是很快的。

現(xiàn)在的你可能還在考慮要不要學習 TypeScript，但在將來也許會是每個前端開發(fā)者、Node.js 開發(fā)者必備的技能。

TS 困擾與收益

初學者的 TS 困擾

做為一個初學者剛開始使用 TypeScript 時，你無法在使用一些 JavaScript 的思維來編碼，下面的一部分觀點也許是每一個 TypeScript 初學者都會遇到的疑問。

• 認為給每一個變量、函數(shù)設(shè)置類型會拖累代碼編寫速度。
• 一些難以理解的編譯錯誤，會讓你不知所措，為了能使得項目運行起來，又不得不試圖找出問題所在。
• 難以理解的范型概念，特別是對于只有 JavaScript 經(jīng)驗的開發(fā)人員。
• 從未參與過企業(yè)級應用程序開發(fā)，不知道如何更好的開始。

TS 的收益

• 類型安全：類比 Java 這些強類型語言，通過類型檢查也可及早發(fā)現(xiàn)問題。
• 增強的面向?qū)ο竽芰Γ褐С置嫦驅(qū)ο蟮姆庋b、繼承、多態(tài)三大特性
• 類似 babel：ES6 ES7 新語法都可以寫，最終 TS 會進行編譯。
• 生產(chǎn)力工具的提升：VS Code + TS 使 IDE 更容易理解你的代碼。
• 靜態(tài)代碼分析能力：解決原先在運行時（runtime） JavaScript 無法發(fā)現(xiàn)的錯誤。
• 易于項目后期維護、重構(gòu)：當版本迭代時，比如當我們?yōu)橐粋€函數(shù)新增加一個參數(shù)屬性或為一個類型增加狀態(tài)，如果忘記更新引用的地方，編譯器就會給予我們警告或錯誤提示。

開發(fā)環(huán)境搭建

TypeScript 不能被瀏覽器或 Node.js 和 Deno 這些運行時所理解，最終要編譯為 JavaScript 執(zhí)行，我們需要一個 compiler 做編譯。另外你可能會想到在 Deno 中不是可以直接寫 TypeScript 嗎，本質(zhì)上 Deno 也不是直接運行的 TypeScript，同樣需要先編譯為 JavaScript 來運行。

在線編譯

想嘗試一下而不想本地安裝的，可以看看以下這兩個在線工具：

• www.typescriptlang.org/play：這個是 TypeScript 官網(wǎng)提供的在線編譯運行，可將 TS 代碼編譯為 JS 代碼執(zhí)行。
• codesandbox.io：這個工具支持的框架很多，包括前端的 React、服務(wù)端的 Nest.js 等，在這里練手 TypeScript 也是可以的。

tsc VS ts-node

tsc 是將 TypeScript 代碼編譯為 JavaScript 代碼，全局安裝 npm install -g typescript 即可得到一個 tsc 命令，之后通過 tsc hello.ts 編譯 typescript 文件。

// 編譯前 hello.ts
const message: string = 'Hello Nodejs';

// 編譯后 hello.js
var message = 'Hello Nodejs';

與 tsc 不同的是 ts-node 是編譯 + 執(zhí)行?？梢栽陂_發(fā)時使用 ts-node，生產(chǎn)環(huán)境使用 tsc 編譯。

# 安裝全局依賴
$ npm install -g typescript
$ npm install -g ts-node

# 運行
$ ts-node hello.ts

框架/庫支持

使用 CRA、Vite 這種庫創(chuàng)建出來的前端 TS 項目、及后端 Nest.js 這樣的框架，默認都是支持 TypeScript 的，一些基礎(chǔ)的 tsconfig.json 配置文件，也都幫你配置好了。

初始化配置文件

TypeScript 編譯時會使用 tsconfig.json 文件做為配置文件，該配置所在的項目會被認為是根目錄。

使用 npx tsc --init 命令快速創(chuàng)建一個 tsconfig.json 配置文件，具體的配置可參考 文檔。

數(shù)據(jù)類型核心概念

TypeScript 除了包含 JavaScript 已有的 string、number、boolean、symbol、bigint、undefined、null、array、object 數(shù)據(jù)類型之外，還包括 tuple、enum、any、unknown、never、void、范型概念及類型聲明符號 ineterface、type。

基礎(chǔ)數(shù)據(jù)類型

在參數(shù)名稱后面使用冒號指定參數(shù)類型，同時也可在類型后面賦默認值，const 聲明的變量必須要賦予默認值否則 IDE 編譯器會提示錯誤，let 則不是必須的。

對于一些基礎(chǔ)的數(shù)據(jù)類型，如果后面有值，TS 可以自動進行類型推斷，不需要顯示聲明，例如 const nickname: string = '五月君' 等價于 const nickname = '五月君'。

const nickname: string = '五月君'; // 字符串
const age: number = 20; // Number 類型
const man: boolean = true; // 布爾型
let hobby: string; // 字符串僅聲明一個變量
let a: undefined = undefined; // undefined 類型
let b: null = null; // null 類型，TS 區(qū)分了 undefined、null 
let list: any[] = [1, true, "free"]; // 不需要類型檢查器檢測直接通過編譯階段檢測的可以使用 any，但是這樣和直接使用 JavaScript 沒什么區(qū)別了
let c: any;
c = 1;
c = '1';

數(shù)組 VS 元組

數(shù)組（Array）通常用來表示所有元素類型相同的集合，也可以使用數(shù)組泛型：Array 允許這個集合中存在多種類型。

const list1: number[] = [1, 2, 3];
const list2: Array = [1, '2', 3];

元組（Tuple）允許一個已知元素數(shù)量的數(shù)組中各元素的類型可以是不同的，通常是事先定義好的不能被修改，元組的定義和賦值必須要一一對應。

const list1: [number, string, boolean] = [1, '2', true]; // 正確
const list2: [number, string, boolean] = [1, 2, true]; // 元素 2 會報錯，不能將類型 "number" 分配給類型 "string"

元組更嚴格一些，不可出現(xiàn)越界操作，例如 list1 只有三個元素，下標從 0 ～ 2，如果執(zhí)行 list1[3] 就會報錯，如下所示，這在數(shù)組操作中是不會出現(xiàn)報錯的。

list1[3]

Tuple type '[number, string, boolean]' of length '3' has no element at index '3'.

函數(shù)類型聲明

可選參數(shù)使用 “?” 符號聲明，可選參數(shù)、函數(shù)參數(shù)的默認值需要聲明在必選參數(shù)之后。函數(shù)也可以聲明返回值類型，在某些情況下不需要顯示聲明，能夠自動推斷出返回值類型。

當一個函數(shù)沒有返回值時用 void 表示，在 JavaScript 中一個函數(shù)沒有返回值，它的結(jié)果也等同于 undefined。

// 定義函數(shù)返回值為空
// 給傳入的參數(shù)定義類型
// 給傳入的參數(shù)賦予默認值
const fn = function(content: string='Hello', nickname?: string): void {
  console.log(content, nickname);
}
fn(); // Hello undefined
fn('Hello', '五月君'); // Hello 五月君

// 指定函數(shù)的返回值為 string
function fn(): string {
 return 'str';
}

// 根據(jù)傳入的參數(shù)可以自動推斷類型
const add = (a: number, b: number) => {
  return a + b;
}

任何值 - any? 還是 unknown?

俗話說：“一入 any 深似海，從此類型是路人”，any 不會做任何類型檢查，下面這段代碼運行之后肯定會報 TypeError: value.toLocaleLowerCase is not a function 錯誤，并且這種錯誤只能在運行時才會發(fā)現(xiàn)，應盡可能的避免使用 any，否則就失去了使用 TypeScript 的意義。

const fn = (value: any) => {
  value.toLocaleLowerCase();
}
fn(1);

unknown 也表示任何值，相比于 any 它更加嚴謹，在使用上會有很多限制。

下面代碼在編譯時 fn1 函數(shù)會報錯 TSError: ? Unable to compile TypeScript: Object is of type 'unknown'。

const fn1 = (value: unknown) => {
  value.toLocaleLowerCase(); // 編譯失敗
}

const fn2 = (value?: unknown) => {
  return typeof value === 'string'; // 編譯通過
}

fn1(1); fn2(1);

不對 unknown 聲明的類型做任何取值操作，是沒問題的，正如上例的 fn2 函數(shù)。這個時候就有疑問了，既然什么都不能操作，有什么應用場景呢？

unknown 與類型守衛(wèi)

unknown 的意義在于我們可以結(jié)合 “類型守衛(wèi)” 在聲明的函數(shù)或其它塊級作用域內(nèi)獲取精確的參數(shù)類型。這樣在運行時也能避免出現(xiàn)類型錯誤這種常見問題。

例如，想對一個數(shù)組執(zhí)行 length 操作時，首先通過 Array.isArray 進一步精確參數(shù)的類型之后，在做一些操作。

const fn = (value?: unknown) => {
  if (Array.isArray(value)) {
    return value.length; // 編譯通過
  }
}

使用 is 關(guān)鍵詞自定義類型守衛(wèi) {參數(shù)名稱} is {參數(shù)類型}，這個意思是告訴 TypeScript 函數(shù) isString() 返回的是一個 string 類型。

function isString(str: unknown): str is string {
  return typeof str === 'string';
}

const fn = (value?: unknown) => {
  if (isString(value)) {
    return value.toLocaleLowerCase(); // 編譯通過
  }
}

例如，react-query 這個庫返回的 error 默認為 unknown 類型，如果在 render 時直接這樣寫 

${error.message}

是不行的，一個解決方案是拿到錯誤后用類型守衛(wèi)處理，如下所示：

const isError = (error: unknown): error is Error => {
  return error instanceof Error;
};

Error: {isError(error) && error.message}

另外一種方案是在調(diào)用它的 Api 時直接傳入一個 Error 對象：useMutation()

枚舉

枚舉定義了一組相關(guān)值的集合，通過描述性的常量聲明使代碼更具可讀性。默認情況下枚舉將字符串的值存儲為從 0 開始的數(shù)字，也可以顯示聲明為字符串。

enum OrderStatus {
  CREATED, // 0
  CANCELLED, // 1
  COMPLETED, // 2
}

enum OrderStatus {
  CREATED = 'created',
  CANCELLED = 'cancelled',
  COMPLETED = 'completed',
}

交叉、聯(lián)合類型、類型別名

交叉類型：是將多個類型合并為一個類型，使用符號 & 表示。例如，將 TPerson & TWorker 合并為一個新的類型 User。

interface TPerson {
 name: string,
 age: number,
}
interface TWorker {
 jobTitle: string,
}
type User = TPerson & TWorker;

const user: User = {
 name: 'Tom',
 age: 18,
 jobTitle: 'Developer'
}

注意，聲明類型時不要與系統(tǒng)的關(guān)鍵詞沖突，例如上例中的 Worker 盡管使用 interface 聲明時沒有提示報錯，但使用時會有提示，因此才改為 TWorker。

聯(lián)合類型：表示一個變量通常由多個類型組成，這之間是一種或的關(guān)系，使用 | 符號聲明。意思是 id 即可以是 string 也可以是 number 類型。

let id: string | number;

類型別名：給一個類型起一個新名字。如果另外一個字段和 id 一樣也是由相同的多個類型組成，就要用到類型別名了，使用 type 關(guān)鍵字將多個基本類型聲明為一個自定義的類型，這種是 interface 替代不了的。

type StringOrNumber = string | number;
let id: StringOrNumber;
let no: StringOrNumber;

class、interface、type 類型聲明

TypeScript 中使用 class、interface、type 關(guān)鍵詞均可聲明類型。class 聲明的是一個類對象，這個好理解，容易迷惑的地方在于 interface 和 type 兩者分別該用于何處。

// class 聲明類型
class Person {
  nickname: string;
  age: number;
}

// interface 聲明類型
interface Person {
  nickname: string;
  age: number;
}

// type 聲明類型
type Person = {
  nickname: string;
  age: number;
}

interface 和 type 非常相似，大多數(shù)情況下 interface 的特性都可以使用 type 實現(xiàn)。但兩者還是有些區(qū)別：

• interface：用于聲明對象的行為，描述對象的屬性、方法，可以被繼承（extends）、實現(xiàn)（implements）不能用于定義基本類型，如果你想聲明一個接口，用 interface 就好了。
• type：可以用于聲明基本類型，盡管 type 也可以聯(lián)合多個類型，但 type 不是真正的 extends，而是使用一些操作符實現(xiàn)的類型合并。

從概念上每個人都有不同的理解，對于團隊來說無論使用哪一個，都應該保持好統(tǒng)一的規(guī)范。在 TypeScript 官網(wǎng)文檔中也提到了 如果不清楚該使用哪一個，請使用 interface 直到您需要 type。

鴨子類型

鴨子類型在程序設(shè)計中是動態(tài)類型的一種風格，它的關(guān)注點在于對象的行為能做什么，而不是關(guān)注對象所屬的類型。這個概念的名字源自一個 “鴨子測試”，可以解釋為 ：

“當看到一只鳥走起來像鴨子、游泳起來像鴨子、叫起來也像鴨子，那么這只鳥就可以被稱為鴨子?！?/p>

下例，使用 interface 定義了兩個類型 Duck、Bird，它們都有共同的特征 “走路”，于是對兩個類型分別定義了 walk() 方法。test() 方法中期望的 value 類型為 Duck，但實際調(diào)用時傳的 value 是 Bird，在 TypeScript 中是可以編譯通過的。

interface Duck {
 walk: () => void;
}
interface Bird {
 walk: () => void;
}

const test = (value: Duck) => {
 value.walk(); // 輸出 “bird” 測試通過
}
const value: Bird = {
 walk: () => {
  console.log('bird');
 }
}
test(value);

TypeScript 的鴨子類型是面向接口編程，雖然我們的例子 Duck、Bird 類型不一樣，但是都有共同的接口，是可以編譯通過的，對于面向?qū)ο缶幊痰恼Z言，例如 Java 就不行了。

范型

在參數(shù)和返回類型未知的情況下，可以使用范型來傳遞類型，保證組件內(nèi)的類型安全。

一個有用的場景是用范型定義接口返回對象。例如，接口返回值 Result 對象，每一個接口返回的 data 是不一樣的，這時 Result 對象的 data 屬性就適合用范型作為類型進行傳遞。

interface Result = {
  code: string;
  message: string;
  data: T;
}
interface User = {
  userId: string;
}
const users: Result = { // 獲取用戶列表接口返回值
  code: 'SUCCESS',
  message: 'Request success',
  data: [
    {
      userId: '123',
    }
  ]
}
const userInfo: Result = { // 獲取用戶詳情接口返回值
  code: 'SUCCESS',
  message: 'Request success',
  data: {
    userId: '123',
  }
}

在函數(shù)內(nèi)部使用范型變量時，存在類型約束，不能隨意操作它的屬性。例如下例，需要事先定義范型 T 擁有 length 屬性。

type TLenght = {
  length: number;
}
function fn(val: T) {
  if (val.length) {
    // do something
  }
}

fn('hello') // 5
fn([1, 2]) // 2
fn({ length: 3 }) // 3

范型定義也可以有多個。例如，swap 函數(shù)交換兩個變量。

實用類型工具

Utility type（實用類型) 不是一種新的類型，基于類型別名實現(xiàn)的一個工具集的自定義類型。包括：Parameters、Omit。

Parameters

Parameters：接收一個范型 T，這個 T 是一個 Function，將會提取這個函數(shù)的返回值為 tuple。

例如，兩個函數(shù) fn2 的參數(shù)同 fn1 相等，這時使用 Parameters 就很合適。

const fn1 = (name: string, age: number) => {}
const fn2 = (...[name, age]: Parameters) => {
 console.log(name, age);
}
fn2('五月君', 18);

Pritial

Pritial：將范型 T 的所有屬性變?yōu)榭蛇x。例如，user1 我必須寫 name、age，而 user2 就不用了，現(xiàn)在都變?yōu)檫x填了，只填寫需要的數(shù)據(jù)。

interface Person {
 name: string,
 age: number,
}

const user1: Person = { name: '五月君', age: 18 };
const user2: Partial = {};

實現(xiàn)原理：實用 keyof 關(guān)鍵詞取出  T 的所有的屬性，遍歷過程為每個屬性加了一個 ? 符號，也就表示可選的。

type Partial = {
    [P in keyof T]?: T[P];
};

Pick

Pick：選取范型 T 中指定的部分屬性，如果需要選出多個屬性，用聯(lián)合類型指定。

const user: Pick = { name: '五月君' };

實現(xiàn)原理：首先校驗第二個類型 K 的屬性必須在第一個類型 T 里面，之后遍歷傳入的聯(lián)合類型 K，形成一個新的類型。

type Pick = {
    [P in K]: T[P];
};

Omit

Omit：與 Pick 相反，將第一個范型 T 中的部分屬性刪除，如果要刪除多個屬性，用聯(lián)合類型指定需要刪除的屬性。

const user: Omit = { name: '五月君'}
// const user: Omit = {}

實現(xiàn)原理：Omit 使用了 Pick 和 Exclude 組合來實現(xiàn)的，這個地方有點繞：

• Exclude 的第一個類型 T 是一個聯(lián)合類型，T extends U ? never : T 這塊的判斷是，如果類型匹配，返回 never 就什么也沒有，不匹配則返回。我們的例子中，age 類型匹配沒有返回，返回的是未匹配的 name。
• 再通過 Pick 取出 Exclude 的結(jié)果，這樣也就相當于達到了過濾的效果。

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude = T extends U ? never : T;

type Omit = Pick>;


// 下面兩個是等價的
const user: Omit = {}
// 等價于
const user: Pick> = { name: '五月君' }

增強的面向?qū)ο竽芰?/h3>

ES6 時代為 JavaScript 增加了 class “語法糖”，可以方便的去定義一個類并通過 extends 關(guān)鍵詞實現(xiàn)繼承，盡管 ES6 中的 class 本質(zhì)上仍是基于原型鏈實現(xiàn)的，但代碼編寫方式看起來簡潔多了（以 class 關(guān)鍵詞進行的面向?qū)ο缶幊蹋?/p>

和其它的面向?qū)ο缶幊陶Z言相比較，會發(fā)現(xiàn) JavaScript 中的 class 少了好多功能。一個常見需求是不能私有化類成員，為了達到這個目的，通常有幾種做法：在屬性或方法前加上 _ 表示私有化，這屬于命名規(guī)則約束、使用 symbol 的唯一性實現(xiàn)私有化。

TypeScript 中增強了面向?qū)ο蟮木幊棠芰?，具備類的訪問權(quán)限控制、接口、模塊、類型注解等功能。

類成員訪問權(quán)限控制

對象的成員屬性或方法如果沒有被封裝，實例化后在外部就可通過引用獲取，對于用戶 phone 這種數(shù)據(jù)，是不能隨意被別人獲取的。

封裝性做為面向?qū)ο缶幊讨匾匦灾唬前杨悆?nèi)部成員屬性、成員方法統(tǒng)一保護起來，只保留有限的接口與外部進行聯(lián)系，盡可能屏蔽對象的內(nèi)部細節(jié)，防止外部隨意修改內(nèi)部數(shù)據(jù)，保證數(shù)據(jù)的安全性。

同傳統(tǒng)的面向?qū)ο缶幊陶Z言類似，TypeScript 提供了 3 個關(guān)鍵詞 public、private、protected 控制類成員的訪問權(quán)限。

class Person {
  public name: string; // 屬性 “name” 可以被外部調(diào)用
  protected email: string; // 屬性“email”受保護，只能在類“Person”及其子類中訪問
  private phone: string;  // 屬性“phone”為私有屬性，只能在類“Person”中訪問。

  constructor(name: string, email: string, phone: string) {
    this.name = name;
    this.email = email;
    this.phone = phone;
  }

  public info() {
    console.log(`我是 ${this.name} 手機號 ${this.formatPhone()}`)
  }

  private formatPhone() { // 方法 “formatPhone” 為私有屬性，只能在類“Person”中訪問。
    return this.phone.replace(/(\d{3})\d{4}(\d{3})/, '$1****$2');
  }
}

接口

接口是一種特殊的抽象類，與抽象類不同的是，接口沒有具體的實現(xiàn)，只有定義，通過 interface 關(guān)鍵詞聲明。

TypeScript 對接口的定義是這樣的：

TypeScript 的核心原則之一是對值所具有的結(jié)構(gòu)進行類型檢查。它有時被稱做 “鴨式辨型法” 或 “結(jié)構(gòu)性子類型化”。在 TypeScript 里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

TypeScript 中只能單繼承，但可以實現(xiàn)多個接口。

interface Person {
  name: string;
  phone?: string;
}
interface Student {
  diploma(): void;
} 

class HighSchool implements Student, Person {
  name: string;

  diploma(): void {
    console.log('高中');
  }
}
class University implements Student, Person {
  name: string;

  diploma(): void {
    console.log('大學本科')
  }
}

面向?qū)ο蟪绦蛟O(shè)計概念不止這些，參見這篇文章 https://github.com/qufei1993/blog/issues/41。

總結(jié)

用還是不用？

最終要不要用 TypeScript，還要結(jié)合項目規(guī)模、維護周期、團隊成員多方面看，以下為個人的一些理解：

• 如果是一些產(chǎn)品的核心項目，維護周期長、參與人員多，TypeScript 是可以嘗試的，可能前期會感覺定義類型約束很多，對于后期的維護、重構(gòu)是有一定幫助的。
• 對于一些項目周期不長或是一些小項目，不想被 TypeScript 的類型約束所束縛，可以選擇 JavaScript。
• 不能規(guī)避的一個現(xiàn)實問題是 TypeScript 是有一些上手成本的，看團隊成員的情況，公司內(nèi)的產(chǎn)品項目不是一個人單打獨斗，開發(fā)是一個階段，后期還需要大家一起維護，可以看大家的意愿，對 TypeScript 了解程度，是否愿意學習嘗試。

該怎么學習？

文章開頭我們看了一些 TypeScript 社區(qū)發(fā)展現(xiàn)狀調(diào)研報告，從目前使用情況、發(fā)展趨勢看，已然成為前端開發(fā)者的必備技能之一。如果你還在猶豫要不要學習 TypeScript，那我建議你在時間允許的情況，開始做一些嘗試吧。

下面從個人角度，總結(jié)一些建議：

關(guān)注點一開始不要太放在工具上，選擇一個穩(wěn)定的編譯工具，例如 tsc、ts-node，這些就夠了。之后可以嘗試一些性能更好的編譯工具。

先了解一些 TypeScript 增強的基礎(chǔ)類型和類型約束，例如 枚舉、any VS unkonwn、數(shù)組 VS 元組及類型聲明符 type、interface 等，先入門在進階。不建議剛上來就搞一些很高級的操作，例如 “類型體操”。

多看官方的文檔 https://www.typescriptlang.org/ 即使英語不好，也可以嘗試著閱讀下，這是一手的學習資料，實在有困難的可以去看中文文檔，遇到問題多 Google。

學會總結(jié)分享，這是學習所有知識通用的方法。在寫過一個項目后，多多少少都會遇到一些問題，日常還是還要善于總結(jié)，這就是一種知識的沉淀和自我積累。目前你看到本文，并不是筆者一口氣寫完的，中間的一部分也是日常學習、使用 TypeScript 過程中自己記錄的一些知識點，現(xiàn)在總結(jié)分享給大家，自己也會加深印象。

分享文章：都在推薦TS，有必要學習嗎？該怎么學？
鏈接地址：http://www.dlmjj.cn/article/dhdjics.html