ts5泛型

泛型

函数中的泛型

// 泛型

// 函数中要用到的类型 T ,类型不确定，泛指
const join = <T, P>(first: T, second: P) => {
  return `${first}${second}`
}

// join('1')  这样的写法ts自己也会推断
join<string, number>('1', 2)


function myFun<T>(params: Array<T>) {  // 或者 function myFun<T>(params: T[]) { 也可
  return params
}

myFun<string>(['1', '2', '3'])

类中使用泛型

// 类中使用泛型

class Person<T extends number | string> {  // 泛型约束
  constructor(private per: T[]) { }
  choosePerson(index: number): T {
    return this.per[index]
  }
}

const ren = new Person(['牛恒', '浩哥', '巨哥', 23])

console.log('ren', ren.choosePerson(1)); // ren 浩哥

interface RenA {
  names: string,
  age: number
}
class Person<T extends RenA> {  // 泛型约束
  constructor(private per: T[]) { }
  choosePerson(index: number): string {  // 定义的返回值类型必须与实际的返回值类型所对应
    return this.per[index].names
  }
}

// 为泛型指定类型时，可以是单一的类型，也可以是一个类型集合 (interface)
const ren = new Person([ // 也可以写为 const ren = new Person<RenA>([
  { names: '牛恒', age: 23 },
  { names: '浩哥', age: 26 },
  { names: '巨哥', age: 25 },
])

console.log('ren', ren.choosePerson(1));  // ren 浩哥

// 其他
interface AAA {
  length: number
}

function fn<T extends AAA>(a: T): number {
  return a.length
}

// console.log(fn('123'));  // 3

// console.log(fn({ length: 10 })); // 10

泛型接口

interface Generic<T> {
  num: T,
  config?: string
}
  
interface Props extends Generic<menuType> { }

as类型断言

interface iconType {
  [propsname: string]: JSX.Element
}

const iconList = {
  '/home': <UserOutlined />,
  '/user-manage': <UserOutlined />,
  '/user-manage/list': <UserOutlined />
} as iconType