记录一个在线编辑ts的网站
在线编辑typescript
泛型的基本使用
在定义函数或者类的时候,类型不明确,可以使用泛型来规定传入,传出的值类型。比如:
当传入的数据类型不确定的时候,我们希望return一个和它相同的数据类型。
//这里使用any会丧失typescript的数据类型限定的作用
function getNum(data1:any) :any{
return data1
}
//可以使用泛型
function getNum1<T>(data:T) :T{
return T
}
//当然,在定义多个时,依旧有效
function getNumTwo<T,K>(num1:T,num2:K):K{
return num2
}
泛型接口
创建一个通用的泛型的返回接口
1.创建接口
2.接口定义一个类的结构
3.用来定义一个类中应该包含哪些属性和方法
4.接口也可以当成类型声明去使用
// interface myInterface{
// name: string
// age: number
// }
//代码规范:接口使用大驼峰命名
interface HaveType<V,M>{
value: V,
message: M
}
//在下面使用这个接口
function getNumTwo<T,U> (value:T,message:U) :HaveType<T,U>{
console.log(typeof(value))
console.log(typeof(message))
let haveType: HaveType<T, U> = {
value,
message
};
return haveType
}
console.log(getNumTwo('嘉然',18))
// [LOG]: "string"
// [LOG]: "number"
// [LOG]: {
// "value": "嘉然",
// "message": 18
// }
泛型类
extends与implements的区别:
1、extends 是继承父类,只要那个类不是声明为final或者那个类定义为abstract的就能继承,TypeScript中不支持多重继承,
但是可以用接口来实现,这样就用到了implements,继承只能继承一个类,但implements可以实现多个接口,用逗号分开就行了。
2、继承过后通常会定义一些父类没有的成员或者方法。
3、子类B对象的实例,不仅能够访问自己的属性和方法,也能够访问父类的属性和方法
// 接口和类结合使用
interface TypeP<U>{
name:U,
myName:() => U
}
class girl<T> implements TypeP<T> {
name:T
constructor(name:T){
this.name = name
}
myName(): T {
return this.name
}
}
const wife = new girl<string>('嘉然小姐')
console.log(wife.myName())
const wifeTwo = new girl<string>('樱岛麻衣')
console.log(wifeTwo.myName())
泛型约束
泛型约束可以限制每个类型变量接受的类型数量
在处理字符串或数组时,我们一般会假设length是可用的:
interface Length{
length : number;
}
//function identity<T>(arg:T) :T{
// console.log(arg.length) //在extends之前:ERROR,编辑器并不知道T含有length属性
// return arg
//}
function identity<T extends Length>(arg:T) :T{
console.log(arg.length) //在extends之前:ERROR,编辑器并不知道T含有length属性
return arg
}