TS基础03

类的interface

泛型

泛型可以让我们创建一个可以在多种类型上工作的组件，它能够支持当前的数据类型，同时也能支持未来的数据类型，这大大提升了组件的可重用性。

 const addID = (obj:Object)=>{
  let id = Math.floor(Math.random()*1000)
  return {...obj,id}
}
let Id1=addID({name:'ha',age:10})
console.log(Id1)
console.log(Id1.name) //编译器中标红，但浏览器可以打出ha  //Property 'name' does not exist on type '{ id: number; constructor: Function; toString():   

那么，我们怎么将任意对象传递给 addID，而且仍然可以告诉 TypeScript 该对象具有哪些属性和值？这种场景就可以使用泛型了, – T 被称为类型参数：在将一个对象传入函数时，已经告诉了ts来捕获他的类型了

 const addIds = (obj:T)=>{
  let id = Math.floor(Math.random()*1000)
  return {...obj,id}
}

let Id2=addIds({name:'ha',age:10})
console.log(Id2.name)  

这样会出现问题：什么都可以传入函数，ts捕获类型后并不会报告问题，所以我们需要一个约束，通过将泛型类型T作为object的扩展，来告诉ts直接收对象

 const addIDs=(obj:T)=>{
  let id = Math.floor(Math.random()*1000)

  return {...obj,id}
}

let q = addIDs({name:'zze',age:'30'})
console.log(q.name)
let w = addIDs('sds') //Argument of type 'string' is not assignable to parameter of type 'object'.
// console.log(w)  

但是在js中数组也是对象，传入数组还是会逃避类型检查，所以使用object的参数应该带一个有值是字符串的name属性

 const addIDString = (obj:T)=>{
  let id = Math.floor(Math.random()*1000)
  return {...obj,id}
}
let s = addIDString({name:'jj',age:6})
console.log(s.age)
// let sa = addIDString(['kk','sd'])//Property 'name' is missing in type 'string[]' but required in type '{ name: string; }'
  

所以泛型允许在参数和返回类型提前未知的组件中具有类型安全

如果需要接受多个类型的函数最好使用泛型而不是any

使用一个泛型来扩展接口，确保传入的参数都有一个length属性

 interface haslength{
  length:number
}
const showLength = (obj:T)=>{
  console.log(obj.length,55)
  return obj.length
}
showLength('hello')  //5
// showLength(8) //Argument of type 'number' is not assignable to parameter of type 'haslength'.  

泛型接口

当不知道对象中的某个值是什么类型时就用泛型来传递类型

 interface Persien{
  name:string,
  age:number,
  document:T
}
const Persien1:Persien={
  name:'conal',
  age:1,
  document:['passport','bank']
}
const Persien2:Persien={
  name:'da',
  age:2,
  document:'passport,banl'
}