5 個有用的 TypeScript 技巧

英文 | https://medium.com/@scotthickmann/5-helpful-shorthands-in-typescript-a38cfec6f6a7

TypeScript 最近已成為一種非常流行的程式設計語言。JavaScript 現在被用于各種各樣的開發中。

随着越來越多的大型項目使用 JavaScript，許多人現在已經轉而使用 TypeScript 編寫代碼，TypeScript 通過編譯提供類型和向後相容性。

在這篇文章中，我想強調幾個我希望我在開始編寫現代 JavaScript 和 TypeScript 代碼時就知道的技巧。本文主要針對那些已經了解 TypeScript 并希望改進其編碼風格的人。

前幾點适用于 TypeScript 和現代 JavaScript，而後面的幾點是特定于 TypeScript 的。話雖如此，讓我們開始吧。

01、空合并運算符

如果想在變量為空或未定義的情況下恢複預設值，則可以使用空合并運算符。

const name: string | null = null;
const displayName = name ?? 'Anonymous';      

上面的代碼會将 displayName 設定為“匿名”，因為 name 為空。另一種方法是使用條件運算符，它更冗長：

const displayName = name === null ? 'Anonymous' : name;      

02、Maps和Sets

需要時使用maps和sets！他們可以讓你的生活更輕松。如果你需要檢查一個項目是否包含在一個集合中，我們可以簡單地編寫：

const language = new Set(['hello', 'world']);
const hasHello = language.has('hello');      

這不僅比使用帶有 .includes 的數組更簡潔，而且更高效，也更易于審閱者了解。

03、泛型

盡可能避免使用 unknown 或 any as 類型。有一種更好的方法來處理可以采用多種類型的資料：泛型。例如，假設我需要使用一個将資料嵌套到響應對象中的函數。我可以執行以下操作并保持類型安全：

function createResponse<T extends Record<string, unknown>>(data: T) {
  return {
    success: true,
    data
  };
}      

根據需要，傳回值将具有以下類型：

{
    success: boolean;
    data: T;
}      

04、在構造函數中配置設定執行個體屬性

當我們編寫一個類時，我們經常需要根據傳遞給構造函數的參數來設定屬性。幸運的是，在 typescript 中有一種速記方法可以做到這一點。 

而不是這樣做：

class User {
  public name: string;
  private age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}      

而是我們可以這樣寫：

class User {
  constructor(public name: string, private age: number) {}
}      

05、枚舉

枚舉肯定被低估了。之前，當我建立一個事件監聽器時，我曾經這樣做：

import EventEmitter from 'events';


const eventEmitter = new EventEmitter();


eventEmitter.on('user', (user) => {
  console.log(user);
})


eventEmitter.emit('user', { name: 'John', age: 30 });      

但是，如果你希望重命名你正在收聽的事件，現在最好像下面那樣做。 

如果你試圖将事件名稱“使用者”更改為“帳戶”，你可以放心，你的代碼仍然可以工作，并且你不會忘記将更改複制粘貼到某處。

import EventEmitter from 'events';


enum EventName {
  User = 'user',
  Post = 'post'
}


const eventEmitter = new EventEmitter();


eventEmitter.on(EventName.User, (user) => {
  console.log(user);
});


eventEmitter.emit(EventName.User, { name: 'John', age: 30 });      

總結

以上就是我想跟大家分享的5個關于TypeScript 的開發小技巧，希望對你有用，感謝你的閱讀，祝程式設計愉快！

學習更多技能

請點選下方公衆号

​