iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
自我挑戰組

TypeScript 能手養成之旅系列 第 12

TypeScript 能手養成之旅 Day 12 泛用型別(Generics Types)

前言

今天要來介紹 泛用型別,在我們前面介紹的 型別化名 ,而 泛用型別 就是將 型別化名 參數化,接下來我們將型別帶入 泛用型別,就會獲的該型別的結果,究竟是如何使用呢? 讓我們來繼續看下去。

泛用型別使用方式

基本語法

我們使用 type 來將 tryIt 指定一個 泛用型別 並帶一個參數為 T ,使用如下:

type tryIt<T> = {
  value: T;
};

let x:tryIt<String>
x = { value: 'cy'} // pass
x = { value: 11 } // 噴錯

從這個範例我們可以得知,變數宣告 x 時,將 tryIt 泛用型別中的 T 參數帶入 String ,當我們 value 的值帶入數字,TypeScript 將會提醒我們錯誤。

結合 interface

interface tryValue<T> {
  value: T;
}

const oneTest = (x: tryValue<String>): String => {
  return x.value
}

console.log(oneTest({value: 'cy'})) // 'cy'

透過 extends,可以建立限制的泛用型別

interface tryValue<T extends number> {
  value: T
}

// 有給 tryValue 參數 10,且為 number, pass
const twoTest = (x: tryValue<10>): tryValue<10> => {
  return x
};

// 沒給參數, 噴錯
const twoTest = (x: tryValue): tryValue => {
  return x
};

// 參數為錯誤型別, 噴錯
const twoTest = (x: tryValue<true>): tryValue<true> => {
  return x
};

經由 extends 我們可以更嚴格限制所要帶入參數為何。

泛用型別也是可以 scope 的

function combo<T extends number[]>(cy: T) {
  return function lastCombo<K extends String>(will: K) {
    return [cy, will];
  };
}
const myCombo = combo([28])('omg');

結語

今天稍微介紹一下 泛用型別 常用的地方,還有很多結合使用的地方,大家可以一起探索更多使用方式。


上一篇
TypeScript 能手養成之旅 Day 11 明文型別(Literal Types)
下一篇
TypeScript 能手養成之旅 Day 13 特殊型別 - Never
系列文
TypeScript 能手養成之旅16

尚未有邦友留言

立即登入留言