這篇文章主要介紹“怎么編寫(xiě)高效的TS代碼”，在日常操作中，相信很多人在怎么編寫(xiě)高效的TS代碼問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么編寫(xiě)高效的TS代碼”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為上千多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為西青企業(yè)提供專(zhuān)業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)，西青網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

一、盡量減少重復(fù)代碼

對(duì)于剛接觸 TypeScript 的小伙伴來(lái)說(shuō)，在定義接口時(shí)，可能一不小心會(huì)出現(xiàn)以下類(lèi)似的重復(fù)代碼。比如：

interface Person {   firstName: string;   lastName: string; }  interface PersonWithBirthDate {   firstName: string;   lastName: string;   birth: Date; }

很明顯，相對(duì)于 Person 接口來(lái)說(shuō)，PersonWithBirthDate 接口只是多了一個(gè) birth屬性，其他的屬性跟 Person  接口是一樣的。那么如何避免出現(xiàn)例子中的重復(fù)代碼呢?要解決這個(gè)問(wèn)題，可以利用 extends 關(guān)鍵字：

interface Person {    firstName: string;    lastName: string; }  interface PersonWithBirthDate extends Person {    birth: Date; }

當(dāng)然除了使用 extends 關(guān)鍵字之外，也可以使用交叉運(yùn)算符(&)：

type PersonWithBirthDate = Person & { birth: Date };

另外，有時(shí)候你可能還會(huì)發(fā)現(xiàn)自己想要定義一個(gè)類(lèi)型來(lái)匹配一個(gè)初始配置對(duì)象的「形狀」，比如：

const INIT_OPTIONS = {   width: 640,   height: 480,   color: "#00FF00",   label: "VGA", };  interface Options {   width: number;   height: number;   color: string;   label: string; }

其實(shí)，對(duì)于 Options 接口來(lái)說(shuō)，你也可以使用 typeof 操作符來(lái)快速獲取配置對(duì)象的「形狀」：

type Options = typeof INIT_OPTIONS;

而在使用可辨識(shí)聯(lián)合(代數(shù)數(shù)據(jù)類(lèi)型或標(biāo)簽聯(lián)合類(lèi)型)的過(guò)程中，也可能出現(xiàn)重復(fù)代碼。比如：

interface SaveAction {    type: 'save';   // ... }  interface LoadAction {   type: 'load';   // ... }  type Action = SaveAction | LoadAction; type ActionType = 'save' | 'load'; // Repeated types!

為了避免重復(fù)定義 'save' 和 'load'，我們可以使用成員訪問(wèn)語(yǔ)法，來(lái)提取對(duì)象中屬性的類(lèi)型：

type ActionType = Action['type']; // 類(lèi)型是 "save" | "load"

然而在實(shí)際的開(kāi)發(fā)過(guò)程中，重復(fù)的類(lèi)型并不總是那么容易被發(fā)現(xiàn)。有時(shí)它們會(huì)被語(yǔ)法所掩蓋。比如有多個(gè)函數(shù)擁有相同的類(lèi)型簽名：

function get(url: string, opts: Options): Promise { /* ... */ }  function post(url: string, opts: Options): Promise { /* ... */ }

對(duì)于上面的 get 和 post 方法，為了避免重復(fù)的代碼，你可以提取統(tǒng)一的類(lèi)型簽名：

type HTTPFunction = (url: string, opts: Options) => Promise;   const get: HTTPFunction = (url, opts) => { /* ... */ }; const post: HTTPFunction = (url, opts) => { /* ... */ };

二、使用更精確的類(lèi)型替代字符串類(lèi)型

假設(shè)你正在構(gòu)建一個(gè)音樂(lè)集，并希望為專(zhuān)輯定義一個(gè)類(lèi)型。這時(shí)你可以使用 interface關(guān)鍵字來(lái)定義一個(gè) Album 類(lèi)型：

interface Album {   artist: string; // 藝術(shù)家   title: string; // 專(zhuān)輯標(biāo)題   releaseDate: string; // 發(fā)行日期：YYYY-MM-DD   recordingType: string; // 錄制類(lèi)型："live" 或 "studio" }

對(duì)于 Album 類(lèi)型，你希望 releaseDate 屬性值的格式為 YYYY-MM-DD，而 recordingType 屬性值的范圍為 live 或  studio。但因?yàn)榻涌谥?releaseDate 和 recordingType 屬性的類(lèi)型都是字符串，所以在使用 Album  接口時(shí)，可能會(huì)出現(xiàn)以下問(wèn)題：

const dangerous: Album = {   artist: "Michael Jackson",   title: "Dangerous",   releaseDate: "November 31, 1991", // 與預(yù)期格式不匹配   recordingType: "Studio", // 與預(yù)期格式不匹配 };

雖然 releaseDate 和 recordingType 的值與預(yù)期的格式不匹配，但此時(shí) TypeScript  編譯器并不能發(fā)現(xiàn)該問(wèn)題。為了解決這個(gè)問(wèn)題，你應(yīng)該為 releaseDate 和 recordingType 屬性定義更精確的類(lèi)型，比如這樣：

interface Album {   artist: string; // 藝術(shù)家   title: string; // 專(zhuān)輯標(biāo)題   releaseDate: Date; // 發(fā)行日期：YYYY-MM-DD   recordingType: "studio" | "live"; // 錄制類(lèi)型："live" 或 "studio" }

重新定義 Album 接口之后，對(duì)于前面的賦值語(yǔ)句，TypeScript 編譯器就會(huì)提示以下異常信息：

const dangerous: Album = {   artist: "Michael Jackson",   title: "Dangerous",   // 不能將類(lèi)型“string”分配給類(lèi)型“Date”。ts(2322)   releaseDate: "November 31, 1991", // Error   // 不能將類(lèi)型“"Studio"”分配給類(lèi)型“"studio" | "live"”。ts(2322)   recordingType: "Studio", // Error };

為了解決上面的問(wèn)題，你需要為 releaseDate 和 recordingType 屬性設(shè)置正確的類(lèi)型，比如這樣：

const dangerous: Album = {   artist: "Michael Jackson",   title: "Dangerous",   releaseDate: new Date("1991-11-31"),   recordingType: "studio", };

另一個(gè)錯(cuò)誤使用字符串類(lèi)型的場(chǎng)景是設(shè)置函數(shù)的參數(shù)類(lèi)型。假設(shè)你需要寫(xiě)一個(gè)函數(shù)，用于從一個(gè)對(duì)象數(shù)組中抽取某個(gè)屬性的值并保存到數(shù)組中，在 Underscore  庫(kù)中，這個(gè)操作被稱(chēng)為 “pluck”。要實(shí)現(xiàn)該功能，你可能最先想到以下代碼：

function pluck(record: any[], key: string): any[] {   return record.map((r) => r[key]); }

對(duì)于以上的 pluck 函數(shù)并不是很好，因?yàn)樗褂昧?any 類(lèi)型，特別是作為返回值的類(lèi)型。那么如何優(yōu)化 pluck  函數(shù)呢?首先，可以通過(guò)引入一個(gè)泛型參數(shù)來(lái)改善類(lèi)型簽名：

function pluck(record: T[], key: string): any[] {   // Element implicitly has an 'any' type because expression of type 'string' can't be used to    // index type 'unknown'.   // No index signature with a parameter of type 'string' was found on type 'unknown'.(7053)   return record.map((r) => r[key]); // Error }

通過(guò)以上的異常信息，可知字符串類(lèi)型的 key 不能被作為 unknown 類(lèi)型的索引類(lèi)型。要從對(duì)象上獲取某個(gè)屬性的值，你需要保證參數(shù) key  是對(duì)象中的屬性。

說(shuō)到這里相信有一些小伙伴已經(jīng)想到了 keyof 操作符，它是 TypeScript 2.1  版本引入的，可用于獲取某種類(lèi)型的所有鍵，其返回類(lèi)型是聯(lián)合類(lèi)型。接著使用 keyof 操作符來(lái)更新一下 pluck 函數(shù)：

function pluck(record: T[], key: keyof T) {   return record.map((r) => r[key]); }

對(duì)于更新后的 pluck 函數(shù)，你的 IDE 將會(huì)為你自動(dòng)推斷出該函數(shù)的返回類(lèi)型：

function pluck(record: T[], key: keyof T): T[keyof T][]

對(duì)于更新后的 pluck 函數(shù)，你可以使用前面定義的 Album 類(lèi)型來(lái)測(cè)試一下：

const albums: Album[] = [{   artist: "Michael Jackson",   title: "Dangerous",   releaseDate: new Date("1991-11-31"),   recordingType: "studio", }];  // let releaseDateArr: (string | Date)[] let releaseDateArr = pluck(albums, 'releaseDate');

示例中的 releaseDateArr 變量，它的類(lèi)型被推斷為 (string | Date)[]，很明顯這并不是你所期望的，它的正確類(lèi)型應(yīng)該是  Date[]。那么應(yīng)該如何解決該問(wèn)題呢?這時(shí)你需要引入第二個(gè)泛型參數(shù) K，然后使用 extends 來(lái)進(jìn)行約束：

function pluck(record: T[], key: K): T[K][] {   return record.map((r) => r[key]); }  // let releaseDateArr: Date[] let releaseDateArr = pluck(albums, 'releaseDate');

三、定義的類(lèi)型總是表示有效的狀態(tài)

假設(shè)你正在構(gòu)建一個(gè)允許用戶指定頁(yè)碼，然后加載并顯示該頁(yè)面對(duì)應(yīng)內(nèi)容的 Web 應(yīng)用程序。首先，你可能會(huì)先定義 State 對(duì)象：

interface State {   pageContent: string;   isLoading: boolean;   errorMsg?: string; }

接著你會(huì)定義一個(gè) renderPage 函數(shù)，用來(lái)渲染頁(yè)面：

function renderPage(state: State) {   if (state.errorMsg) {     return `嗚嗚嗚，加載頁(yè)面出現(xiàn)異常了...${state.errorMsg}`;   } else if (state.isLoading) {     return `頁(yè)面加載中~~~`;   }   return `
${state.pageContent}
`; }  // 輸出結(jié)果：頁(yè)面加載中~~~ console.log(renderPage({isLoading: true, pageContent: ""})); // 輸出結(jié)果：
大家好，我是阿寶哥
 console.log(renderPage({isLoading: false, pageContent: "大家好，我是阿寶哥"}));

創(chuàng)建好 renderPage 函數(shù)，你可以繼續(xù)定義一個(gè) changePage 函數(shù)，用于根據(jù)頁(yè)碼獲取對(duì)應(yīng)的頁(yè)面數(shù)據(jù)：

async function changePage(state: State, newPage: string) {   state.isLoading = true;   try {     const response = await fetch(getUrlForPage(newPage));     if (!response.ok) {       throw new Error(`Unable to load ${newPage}: ${response.statusText}`);     }     const text = await response.text();     state.isLoading = false;     state.pageContent = text;   } catch (e) {     state.errorMsg = "" + e;   } }

對(duì)于以上的 changePage 函數(shù)，它存在以下問(wèn)題：

• 在 catch 語(yǔ)句中，未把 state.isLoading 的狀態(tài)設(shè)置為 false;

• 未及時(shí)清理 state.errorMsg 的值，因此如果之前的請(qǐng)求失敗，那么你將繼續(xù)看到錯(cuò)誤消息，而不是加載消息。

出現(xiàn)上述問(wèn)題的原因是，前面定義的 State 類(lèi)型允許同時(shí)設(shè)置 isLoading 和 errorMsg  的值，盡管這是一種無(wú)效的狀態(tài)。針對(duì)這個(gè)問(wèn)題，你可以考慮引入可辨識(shí)聯(lián)合類(lèi)型來(lái)定義不同的頁(yè)面請(qǐng)求狀態(tài)：

interface RequestPending {   state: "pending"; }  interface RequestError {   state: "error";   errorMsg: string; }  interface RequestSuccess {   state: "ok";   pageContent: string; }  type RequestState = RequestPending | RequestError | RequestSuccess;  interface State {   currentPage: string;   requests: { [page: string]: RequestState }; }

在以上代碼中，通過(guò)使用可辨識(shí)聯(lián)合類(lèi)型分別定義了 3  種不同的請(qǐng)求狀態(tài)，這樣就可以很容易的區(qū)分出不同的請(qǐng)求狀態(tài)，從而讓業(yè)務(wù)邏輯處理更加清晰。接下來(lái)，需要基于更新后的 State 類(lèi)型，來(lái)分別更新一下前面創(chuàng)建的  renderPage 和 changePage 函數(shù)：

更新后的 renderPage 函數(shù)

function renderPage(state: State) {   const { currentPage } = state;   const requestState = state.requests[currentPage];   switch (requestState.state) {     case "pending":       return `頁(yè)面加載中~~~`;     case "error":       return `嗚嗚嗚，加載第${currentPage}頁(yè)出現(xiàn)異常了...${requestState.errorMsg}`;     case "ok":       `
第${currentPage}頁(yè)的內(nèi)容：${requestState.pageContent}
`;   } }

更新后的 changePage 函數(shù)

async function changePage(state: State, newPage: string) {   state.requests[newPage] = { state: "pending" };   state.currentPage = newPage;   try {     const response = await fetch(getUrlForPage(newPage));     if (!response.ok) {       throw new Error(`無(wú)法正常加載頁(yè)面 ${newPage}: ${response.statusText}`);     }     const pageContent = await response.text();     state.requests[newPage] = { state: "ok", pageContent };   } catch (e) {     state.requests[newPage] = { state: "error", errorMsg: "" + e };   } }

在 changePage 函數(shù)中，會(huì)根據(jù)不同的情形設(shè)置不同的請(qǐng)求狀態(tài)，而不同的請(qǐng)求狀態(tài)會(huì)包含不同的信息。這樣 renderPage 函數(shù)就可以根據(jù)統(tǒng)一的  state 屬性值來(lái)進(jìn)行相應(yīng)的處理。因此，通過(guò)使用可辨識(shí)聯(lián)合類(lèi)型，讓請(qǐng)求的每種狀態(tài)都是有效的狀態(tài)，不會(huì)出現(xiàn)無(wú)效狀態(tài)的問(wèn)題。

四、選擇條件類(lèi)型而不是重載聲明

假設(shè)你要使用 TS 實(shí)現(xiàn)一個(gè) double 函數(shù)，該函數(shù)支持 string 或 number 類(lèi)型。這時(shí)，你可能已經(jīng)想到了使用聯(lián)合類(lèi)型和函數(shù)重載：

function double(x: number | string): number | string; function double(x: any) {   return x + x; }

雖然這個(gè) double 函數(shù)的聲明是正確的，但它有一點(diǎn)不精確：

// const num: string | number const num = double(10);  // const str: string | number const str = double('ts');

對(duì)于 double 函數(shù)，你期望傳入的參數(shù)類(lèi)型是 number 類(lèi)型，其返回值的類(lèi)型也是 number 類(lèi)型。當(dāng)你傳入的參數(shù)類(lèi)型是 string  類(lèi)型，其返回的類(lèi)型也是 string 類(lèi)型。而上面的 double 函數(shù)卻是返回了 string | number  類(lèi)型。為了實(shí)現(xiàn)上述的要求，你可能想到了引入泛型變量和泛型約束：

function double(x: T): T; function double(x: any) {   return x + x; }

在上面的 double 函數(shù)中，引入了泛型變量 T，同時(shí)使用 extends 約束了其類(lèi)型范圍。

// const num: 10 const num = double(10); // const str: "ts" const str = double('ts'); console.log(str);

不幸的是，我們對(duì)精確度的追求超過(guò)了預(yù)期?，F(xiàn)在的類(lèi)型有點(diǎn)太精確了。當(dāng)傳遞一個(gè)字符串類(lèi)型時(shí)，double  聲明將返回一個(gè)字符串類(lèi)型，這是正確的。但是當(dāng)傳遞一個(gè)字符串字面量類(lèi)型時(shí)，返回的類(lèi)型是相同的字符串字面量類(lèi)型。這是錯(cuò)誤的，因?yàn)?ts 經(jīng)過(guò) double  函數(shù)處理后，返回的是 tsts，而不是 ts。

另一種方案是提供多種類(lèi)型聲明。雖然 TypeScript 只允許你編寫(xiě)一個(gè)具體的實(shí)現(xiàn)，但它允許你編寫(xiě)任意數(shù)量的類(lèi)型聲明。你可以使用函數(shù)重載來(lái)改善  double 的類(lèi)型：

function double(x: number): number; function double(x: string): string; function double(x: any) {   return x + x; }  // const num: number const num = double(10);  // const str: string const str = double("ts");

很明顯此時(shí) num 和 str 變量的類(lèi)型都是正確的，但不幸的是，double 函數(shù)還有一個(gè)小問(wèn)題。因?yàn)?double 函數(shù)的聲明只支持 string 或  number 類(lèi)型的值，而不支持 string | number 聯(lián)合類(lèi)型，比如：

function doubleFn(x: number | string) {   // Argument of type 'string | number' is not assignable to    // parameter of type 'number'.   // Argument of type 'string | number' is not assignable to    // parameter of type 'string'.   return double(x); // Error }

為什么會(huì)提示以上的錯(cuò)誤呢?因?yàn)楫?dāng) TypeScript 編譯器處理函數(shù)重載時(shí)，它會(huì)查找重載列表，直到找一個(gè)匹配的簽名。對(duì)于 number | string  聯(lián)合類(lèi)型，很明顯是匹配失敗的。

然而對(duì)于上述的問(wèn)題，雖然可以通過(guò)新增 string | number 的重載簽名來(lái)解決，但最好的方案是使用條件類(lèi)型。在類(lèi)型空間中，條件類(lèi)型就像 if  語(yǔ)句一樣：

function double(   x: T ): T extends string ? string : number; function double(x: any) {   return x + x; }

這與前面引入泛型版本的 double 函數(shù)聲明類(lèi)似，只是它引入更復(fù)雜的返回類(lèi)型。條件類(lèi)型使用起來(lái)很簡(jiǎn)單，與 JavaScript  中的三目運(yùn)算符(?:)一樣的規(guī)則。T extends string ? string : number 的意思是，如果 T 類(lèi)型是 string 類(lèi)型的子集，則  double函數(shù)的返回值類(lèi)型為 string 類(lèi)型，否則為 number 類(lèi)型。

在引入條件類(lèi)型之后，前面的所有例子就可以正常工作了：

// const num: number const num = double(10);  // const str: string const str = double("ts");   // function f(x: string | number): string | number function f(x: number | string) {   return double(x); }

五、一次性創(chuàng)建對(duì)象

在 JavaScript 中可以很容易地創(chuàng)建一個(gè)表示二維坐標(biāo)點(diǎn)的對(duì)象：

const pt = {};  pt.x = 3;  pt.y = 4;

然而對(duì)于同樣的代碼，在 TypeScript 中會(huì)提示以下錯(cuò)誤信息：

const pt = {}; // Property 'x' does not exist on type '{}' pt.x = 3; // Error // Property 'y' does not exist on type '{}' pt.y = 4; // Error

這是因?yàn)榈谝恍兄?pt 變量的類(lèi)型是根據(jù)它的值 {} 推斷出來(lái)的，你只能對(duì)已知的屬性賦值。針對(duì)這個(gè)問(wèn)題，你可能會(huì)想到一種解決方案，即新聲明一個(gè) Point  類(lèi)型，然后把它作為 pt 變量的類(lèi)型：

interface Point {   x: number;   y: number; }  // Type '{}' is missing the following properties from type 'Point': x, y(2739) const pt: Point = {}; // Error pt.x = 3; pt.y = 4;

那么如何解決上述問(wèn)題呢?其中一種最簡(jiǎn)單的解決方案是一次性創(chuàng)建對(duì)象：

const pt = {    x: 3,   y: 4,  }; // OK

如果你想一步一步地創(chuàng)建對(duì)象，你可以使用類(lèi)型斷言(as)來(lái)消除類(lèi)型檢查：

const pt = {} as Point;  pt.x = 3; pt.y = 4; // OK

但是更好的方法是一次性創(chuàng)建對(duì)象并顯式聲明變量的類(lèi)型：

const pt: Point = {    x: 3,   y: 4,  };

而當(dāng)你需要從較小的對(duì)象來(lái)構(gòu)建一個(gè)較大的對(duì)象時(shí)，你可能會(huì)這樣處理，比如：

const pt = { x: 3, y: 4 }; const id = { name: "Pythagoras" }; const namedPoint = {}; Object.assign(namedPoint, pt, id);  // Property 'id' does not exist on type '{}'.(2339) namedPoint.name; // Error

為了解決上述問(wèn)題，你可以使用對(duì)象展開(kāi)運(yùn)算符 ... 來(lái)一次性構(gòu)建大的對(duì)象：

const namedPoint = {...pt, ...id};  namedPoint.name; // OK, type is string

此外，你還可以使用對(duì)象展開(kāi)運(yùn)算符，以一種類(lèi)型安全的方式逐個(gè)字段地構(gòu)建對(duì)象。關(guān)鍵是在每次更新時(shí)使用一個(gè)新變量，這樣每個(gè)變量都會(huì)得到一個(gè)新類(lèi)型：

const pt0 = {}; const pt1 = {...pt0, x: 3}; const pt: Point = {...pt1, y: 4}; // OK

雖然這是構(gòu)建這樣一個(gè)簡(jiǎn)單對(duì)象的一種迂回方式，但對(duì)于向?qū)ο筇砑訉傩圆⒃试S TypeScript  推斷新類(lèi)型來(lái)說(shuō)，這可能是一種有用的技術(shù)。要以類(lèi)型安全的方式有條件地添加屬性，可以使用帶 null 或 {} 的對(duì)象展開(kāi)運(yùn)算符，它不會(huì)添加任何屬性：

declare var hasMiddle: boolean; const firstLast = {first: 'Harry', last: 'Truman'}; const president = {...firstLast, ...(hasMiddle ? {middle: 'S'} : {})};

如果在編輯器中鼠標(biāo)移到 president，你將看到 TypeScript 推斷出的類(lèi)型：

const president: {   middle?: string;   first: string;   last: string; }

最終通過(guò)設(shè)置 hasMiddle 變量的值，你就可以控制 president 對(duì)象中 middle 屬性的值：

declare var hasMiddle: boolean; var hasMiddle = true; const firstLast = {first: 'Harry', last: 'Truman'}; const president = {...firstLast, ...(hasMiddle ? {middle: 'S'} : {})};  let mid = president.middle console.log(mid); // S

到此，關(guān)于“怎么編寫(xiě)高效的TS代碼”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！