小说阅读网,兽性总裁的爱奴,遮天辰东小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

比同事更秀? TS 這七個方法，你需要知道的！

TypeScript 中的類型系統(tǒng)是非常強大的。它為我們提供了類型安全。類型系統(tǒng)雖然受人喜愛，但如果我們不規(guī)劃和設計類型和接口，它也會讓我們的代碼變得混亂難讀。

泛型

避免代碼重復中，創(chuàng)建可重用的類型，是我們編寫簡潔代碼重要的一環(huán)。泛型是 TypeScript 的一個功能，它允許我們編寫可重用的類型。看下面的例子：

 
 
 
   
  
  
  type Add = (a: T, b: T) => T   
  
  
     
  
  
  const addNumbers: Add = (a, b) => {   
  
  
    return a + b   
  
  
  }   
  
  
     
  
  
  const addStrings: Add = (a, b) => {   
  
  
    return a + b   
  
  
  }

將正確的類型放入Add的泛型中，它可以被用來描述兩個數(shù)字的相加或兩個字符串的連接。我們不需要為每個函數(shù)寫一個類型，而只需要用泛型做一次。這不僅節(jié)省了我們的精力，而且還使我們的代碼更加簡潔，更不容易出錯。

實用類型

TypeScript 原生提供了幾個有用的實用類型來幫助我們進行一些常見的類型轉換。這些實用類型是全局可用的，它們都使用了泛型。

下面這7個是我經(jīng)常用到的。

1. Pick

Pick會從 Type 中挑選屬性集 Keys 來創(chuàng)建一個新的類型，Keys 可以是一個字符串字面或字符串字面的聯(lián)合。Keys 的值必須是 Type 的鍵，否則TypeScript編譯器會抱怨。當你想通過從有很多屬性的對象中挑選某些屬性來創(chuàng)建更輕的對象時，這個實用類型特別有用。

 
 
 
   
  
  
  type User = {   
  
  
    name: string   
  
  
    age: number   
  
  
    address: string   
  
  
    occupation: string   
  
  
  }   
  
  
     
  
  
  type BasicUser = Pick   
  
  
     
  
  
  // type BasicUser = {   
  
  
  //   name: string;   
  
  
  //   age: number;   
  
  
  // }

2. Omit

Omit與Pick相反。Keys 不是說要保留哪些屬性，而是指要省略的屬性鍵集。當我們只想從對象中刪除某些屬性并保留其他屬性時，這個會更有用。

 
 
 
   
  
  
  type User = {   
  
  
    name: string   
  
  
    age: number   
  
  
    address: string   
  
  
    occupation: string   
  
  
  }   
  
  
     
  
  
  type BasicUser = Omit   
  
  
     
  
  
  // type BasicUser = {   
  
  
  //   name: string;   
  
  
  //   age: number;   
  
  
  // }

3. Partial

Partial 構造了一個類型，其所有的類型屬性都設置為可選。當我們在編寫一個對象的更新邏輯時，這個可能非常有用。

 
 
 
   
  
  
  type User = {   
  
  
    name: string   
  
  
    age: number   
  
  
    address: string   
  
  
    occupation: string   
  
  
  }   
  
  
     
  
  
  type PartialUser = Partial   
  
  
     
  
  
  // type PartialUser = {   
  
  
  //   name?: string;   
  
  
  //   age?: number;   
  
  
  //   address?: string;   
  
  
  //   occupation?: string;   
  
  
  // }

4. Required

Required與Partial相反。它構造了一個類型的所有屬性都是必填的類型。它可以被用來確保在一個類型中沒有可選屬性出現(xiàn)。

 
 
 
   
  
  
  type PartialUser = {   
  
  
    name: string   
  
  
    age: number   
  
  
    address?: string   
  
  
    occupation?: string   
  
  
  }   
  
  
     
  
  
  type User = Required   
  
  
     
  
  
  // type User = {   
  
  
  //   name: string;   
  
  
  //   age: number;   
  
  
  //   address: string;   
  
  
  //   occupation: string;   
  
  
  // }

5. Readonly

Readonly 構建了一個類型，其類型的所有屬性被設置為只讀。重新分配新的值 TS 就會報錯。

 
 
 
   
  
  
  type User = {   
  
  
    name: string   
  
  
    age: number   
  
  
    address: string   
  
  
    occupation: string   
  
  
  }   
  
  
     
  
  
  type ReadOnlyUser = Readonly   
  
  
     
  
  
  const user: ReadOnlyUser = {   
  
  
    name: "小智",   
  
  
    age: 24,   
  
  
    address: "廈門",   
  
  
    occupation: "大遷世界"   
  
  
  }   
  
  
     
  
  
  user.name = "王大冶"   
  
  
  // Cannot assign to 'name' because it is a read-only property.

7. ReturnType

ReturnType 從一個函數(shù)類型的返回類型構建一個類型。當我們處理來自外部庫的函數(shù)類型并希望基于它們建立自定義類型時，它是非常有用的。

 
 
 
   
  
  
  import axios from 'axios'   
  
  
     
  
  
  type Response = ReturnType   
  
  
     
  
  
  function callAPI(): Response{   
  
  
    return axios("url")   
  
  
  }

除了上面提到的，還有其他實用類型可以幫助我們編寫更干凈代碼。關于實用工具類型的TypeScript文檔鏈接可以在這里找到。

https://www.typescriptlang.org/docs/handbook/utility-types.html

實用類型是TypeScript提供的非常有用的功能。開發(fā)人員應該利用它們來避免硬編碼類型。要比同事更秀? 這些就是你需要知道的!

~完，我是刷碗智，準備去去那個了，我們下期見!

作者：juno ng 譯者：前端小智

來源：medium 原文：https://medium.com/ng/7-utility-types-that-every-typescript-developer-should-know-788fe73421f1

【編輯推薦】

為什么說，MQ，是互聯(lián)網(wǎng)架構的解耦神器？
Prometheus告警規(guī)則管理
最高法、人社部：“996”嚴重違法！取消“996”，你們公司提上日程了嗎？
Python正面硬剛C語言，結果會怎樣？
CNNIC：我國已成為6G專利申請的主要來源國

分享名稱：比同事更秀? TS 這七個方法，你需要知道的！
文章位置：http://www.fisionsoft.com.cn/article/dpoieoh.html