作者：juno ng
譯者：前端小智
來源：medium
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
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. Pick<Type, Keys>
Pick<Type, Keys>
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. Omit<Type, Keys>
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. Partial<Type>
Partial<Type>
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. Required<Type>
Required<Type>
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. Readonly<Type>
Readonly<Type>
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 'name' because it is a read-only property. 複制
7. ReturnType<Type>
ReturnType<Type>
ReturnType
從一個函數類型的傳回類型建構一個類型。當我們處理來自外部庫的函數類型并希望基于它們建立自定義類型時，它是非常有用的。
import axios from 'axios'
type Response = ReturnType<typeof axios>
function callAPI(): Response{
return axios("url")
} 複制
除了上面提到的，還有其他實用類型可以幫助我們編寫更幹淨代碼。關于實用工具類型的TypeScript文檔連結可以在這裡找到。
https://www.typescriptlang.or...
實用類型是TypeScript提供的非常有用的功能。開發人員應該利用它們來避免寫死類型。要比同僚更秀? 這些就是你需要知道的！
~完，我是刷碗智，準備去去那個了，我們下期見！
原文：https://medium.com/ng/7-utili...
代碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://learue.co/2020/01/a-v...
交流
本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。