TypeScript-5.Generics 泛型

筆記。這兩天提測，忙成狗。

// 泛型的簡單使用
const getArray = <T>(value: T, times: number = 5): T[] => {
  return new Array(times).fill(value) // fill()用固定值替換數組元素
}

console.log(getArray(2)) // [2,2,2,2,2]
console.log(getArray(2, 3)) // [2,2,2]

console.log(getArray<number>(2, 3).map(item => item + 1)) // [3,3,3]
console.log(getArray<string>('abc', 4).map(item => item.length)) // [3,3,3,3]

// <T> 可以是其他字母
const getArray2 = <T, U>(param1: T, param2: U, times: number): [T, U][] => { // 返回值是元組
  return new Array(times).fill([param1, param2])
}
getArray2(1, 'a', 3).forEach(item => {
  console.log(item[0])
  console.log(item[1])
})


// 類型別名 type XXXX 定義泛型
type GetArray = <T>(arg: T, times: number) => T[]
let getArray3: GetArray = (arg: any, times: number) => {
  return new Array(times).fill(arg)
}

// 接口定義泛型
interface GetArray1 { // 同 type GetArray1 = <T>(arg: any, times: number) => T[]
  <T>(arg: any, times: number): T[]
}

// 泛型變量也可提升到最外層 裏面都可以用
interface GetArray2<T> {
  (arg: any, times: number): T[],
  array: T[]
}

// 泛型約束
interface ValueWithLength {
  length: number
}
const getArray4 = <T extends ValueWithLength>(arg: T, times: number): T[] => {
  return new Array(times).fill(arg)
}
getArray4([1, 2], 3)
// getArray4(123, 3) 報錯
getArray('abc', 3)
getArray({length: 2}, 3)

// 在泛型約束中使用參數
const getProps = <T, K extends keyof T>(object: T, propName: K) => {
  return object[propName]
}
const object1 = {
  a: 'a',
  b: 'b'
}
getProps(object1, 'a')
// getProps(object1, 'c') 報錯 約束

昨晚上騎車，從小雨騎到雨停又騎到暴雨，凍得不行打車回去了。伴隨騎行的陳老師的課題是《愛是恆久忍耐又有恩慈》，有點啓發。

Love suffers long and is kind 
love does not envy
love does not parade itself
is not puffed up