TypeScript - 使用筆記 (4)

泛型-Generics

  • 在定義函式、介面或類別的時候，不預先指定具體的型別，而在使用的時候再指定型別的一種特性
  • T 用來指代任意輸入的型別
function myFn<T>(a: T, b: T): T[] {    return [a, b]}// 指定類型：numbermyFn<number>(1,2)// 自動偵測類型：stringmyFn('hello', 'bed')
const addUid = <T extends { name: string }>(obj: T) => {  let uid = Math.floor(Math.random() * 100);  return { ...obj, uid };};let docOne = addUid({ name: 'Claude', age: 29 });// 用在函式參數的型別function createPair<typeX, typeY>(x: typeX, y: typeY): [typeX, typeY] { return [x, y];}console.log(createPair<string, number>('Meaning', 42));

with interface

// data還不確定類型時，可以使用泛型interface Resource<T> {  uid: number;  resourceName: string;  data: T;}// 可以指定類型，例如data的值要是一個物件const docThree: Resource<object> = {  uid: 1,  resourceName: 'person',  data: { name: 'Yong' },};

使用extends限制

  • 限定回傳的結果是number
interface Inter{    length: number}function fn<T extends Inter>(input: T):number{    return input.length}fn('666')fn(123) // Argument of type 'number' is not assignable to parameter of type 'Inter'

當組合兩個數列時

function join<T>(arr1: T[], arr2: T[]): T[] {    return [...arr1, ...arr2]}// 把所有的T使用string類型代入const res = join<string>(['1', '2', '3'], ['4', '5', '6'])res.map((x) => x.toUpperCase())

定義多個泛型參數

function printType<T, K>(t: T, k: K){    console.log(typeof t, typeof k)}printType<string, number>('abc', 123)

串接API取得資料時

  • 在Nuxt3使用useFetch
  • 可以定義一個ApiResponse，在多個API請求中重複使用
  interface ApiResponse<T> {    status: boolean    result: T  }  interface User {    name: string    age: number    role: string  }  interface Job {    title: string,    componany: string,    salary: number  }    const user = ref<User | null>(null)  const { data, error } = await useFetch<ApiResponse<User>>(`${apiBase}/user/1`)  if (data.value) {    user.value = data.value.result.user  }  if (error.value) {    console.error(error.value)  }  const job = ref<Job | null>(null);  const { data: jobData, error: jobError } = await useFetch<ApiResponse<Job>>(`${apiBase}/job`);  if (jobData.value) {    job.value = jobData.value.result;  }  if (jobError.value) {    console.error(jobError.value);  }

參考資料

# TypeScript