首頁 > 文章 > web前端 > 淺談TypeScript中值得了解的7個方法

淺談TypeScript中值得了解的7個方法

青灯夜游轉載: 2021-09-17 10:53:341755瀏覽

這篇文章要跟大家分享7個你需要知道的TypeScript中的方法，希望對大家有幫助！

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

泛型

避免在程式碼重複中，創建可重複使用的類型，是我們編寫簡潔程式碼重要的一環。泛型是 TypeScript 的一個功能，它允許我們編寫可重複使用的類型。看下面的例子：

type Add<T> = (a: T, b: T) => T

const addNumbers: Add<number> = (a, b) => {
  return a + b
}

const addStrings: Add<string> = (a, b) => {
  return a + b
}

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

實用類型

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

下面這7個是我常用到的。

1. Pick4e2a32c6388cf5960c2e01475a1f2df9

#Pick會從Type 中挑選屬性集Keys 來建立一個新的類型，Keys 可以是一個字串字面或字串字面的聯合。 Keys 的值必須是 Type 的鍵，否則TypeScript編譯器會抱怨。當你想要從有很多屬性的物件中挑選某些屬性來創建更輕的物件時，這個實用類型特別有用。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Pick<User, "name" | "age">

// type BasicUser = {
//   name: string;
//   age: number;
// }

2. Omit4e2a32c6388cf5960c2e01475a1f2df9

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

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Omit<User, "address" | "occupation">

// type BasicUser = {
//   name: string;
//   age: number;
// }

3. Partial30690cee1a11d5dfbdced93b89f678ee

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

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type PartialUser = Partial<User>

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

4. Required30690cee1a11d5dfbdced93b89f678ee

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

type PartialUser = {
  name: string
  age: number
  address?: string
  occupation?: string
}

type User = Required<PartialUser>

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

5. Readonly30690cee1a11d5dfbdced93b89f678ee

Readonly 建構了一個類型，其類型的所有屬性被設定為唯讀。重新指派新的值 TS 就會報錯。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type ReadOnlyUser = Readonly<User>

const user: ReadOnlyUser = {
  name: "小智",
  age: 24,
  address: "厦门",
  occupation: "大迁世界"
}

user.name = "王大冶"
// Cannot assign to &#39;name&#39; because it is a read-only property.

6. ReturnType30690cee1a11d5dfbdced93b89f678ee

#ReturnType 從一個函數類型的回傳類型建立一個類型。當我們處理來自外部庫的函數類型並希望基於它們建立自訂類型時，它是非常有用的。

import axios from &#39;axios&#39;

type Response = ReturnType<typeof axios>

function callAPI(): Response{
  return axios("url")
}

除了上面提到的，還有其他實用類型可以幫助我們編寫更乾淨程式碼。關於實用工具類型的TypeScript文檔連結可以在這裡找到。

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

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

本文轉載在：https://segmentfault.com/a/1190000040574488

更多程式相關知識，請造訪：程式設計入門！！

以上是淺談TypeScript中值得了解的7個方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

typescript html 字符串接口泛型类型转换对象 https

陳述：

本文轉載於：segmentfault.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：深入解析js中回呼函數（詳解分享）下一篇：深入解析js中回呼函數（詳解分享）

看更多