tyepscript基本语法总结（下）

欢迎留言评论交流，如果不对的地方欢迎指出，及时更正，还望见谅

1，ts中接口，关键字interface

接口类型分为：1.属性类型接口。2.函数类型接口，3.可索引类型接口，4.类类型接口

属性类型接口
interface FullName{ // 传入对象的约束
    firstName: string;
    secondName: string; // sceondName?:string;  如果属性后边加上？号 说明此参数可传可不传，可选参数
}
function printName(name:FullName){
    console.log(name.firstName+ '--'+name.Second)
}
var obj = { // 对象参数的顺序可以不一样
    age:20,
    firstName:'z',
    secondName:'pc'
}
printName(obj)

2.函数类型接口--对方法传入的参数以及返回值进行约束

interface encrypt{
    (key:string,value:string):string; // 约束传入的参数是string,返回的类型也是string
}
var md5:encrypt = function(key:string,value:string):string{
    return key+value
}
// 上边MD5函数，参数都已经被约束了 key value数据类型都是string,返回值也是string类型

3.可索引类型接口-常用于对数组，对象的约束（不常用）

ts定义数组
var arr:number[] = [1,2]
var arr:Array<string> = [1,2] 

可索引类型接口-对数组的约束
interface UserArr{
    [index:number]:string; // 代表数组索引是number类型，值是string类型
}
var arr:UserArr=['zpc','name']


可索引接口-对对象的约束 // 了解一下即可
interface Userobj{
    [index:string]:string
}
var arr:userobj= {name:'zpc'}

4.类类型接口

interface Animal{
    name:string
    eat(str:string):void
}
class Dog implements Animal {
    name:string;
    constructor(name:string){
        this.name = name
    }
    eat(){
        console.log(this.name)
    }
}

5.接口的扩展--接口可以继承接口

代码示例
interface Animal{
    eat():void;
}
interface Person extends Animal {
    work():void
}
class Programmer{
    public name:string
    constructor(name:string){
        this.name = name
    }
    coding(code:string){
        console.log(this.name)
    }
}
class Web extends Programmer implements Person{ // 子类实现父类之后，如果父类继承有别的接口，所有的方法都要重写

    constructor(name:string){ // 构造函数
        super(name)
    }
    eat(){ // 方法重写
        console.log(this.name)
    }
    work(){ // 方法重写
        console.log(this.name)
    }
}
var a = new Web()
a.eat()
a.work()

6.ts中的泛型

泛型：可以支持不特定的数据类型，要求：传入的参数和返回的参数一致
代码示例--泛型函数
function getData<T>(value:T):T{
    return value
}
getData<number>(123) // 参数必须是number
getData<string>('zpc') // 参数必须是string

7.泛型类

 

class MinCls<T>{ // 定义泛型类
    public list:T = []
    add(value:T):void{
        this.list.push(value)
    }
}
var m1 = new MinCls<number>() // 指定了泛型类中T代表number类型
m1.add(1) // 因为上边指定了参数类型，所以参数必须是number类型

8.泛型接口

interface ConfigFn{
   <T> (value:T):T
}
var getdata:ConfigFn = function<T>(value:T){
    return value
}
getdata<string>('zpc')