TS的接口是用来干什么的,它作用体现在哪里?

140 阅读3分钟

一、属性的接口

属性接口,专门用来约束对象中的每一个属性 基本语法:

interface 接口名{
    属性名: 属性类型,
    属性名: 属性类型
}

案例:

// 定义一个接口
interface Istate{
    name:string,
    age:number,
    sex:string
}

// 使用定义的接口,里面就必须有和接口一样的参数,并且数据类型也得一样
let user:Istate = {
    name:'zhangsan',
    age:20,
    sex:'男'
}


// 定义一个对象接口
interface Istate2{
    // ? 可选 用的比较多
    age?:number,
    name:string,
    // readonly 只能读 不能改
    readonly password:number|string,
    // propName 自定义属性 值必须是任意类型 any
    [propName:string]: any
}

let user2:Istate2;
user2 = { 
    id1:1, // 这个就是我们 propName 自定义属性
    id2:2,
    id3:2, // 不管我们加多少个都可以
    age:12,
    name:'123',
    password:123
}
user2 = { // age?:number 即使我们没有 age 属性 也不会报错 因为它是可选属性,可以有也可以没有
    id2:1, 
    name:'123',
    password:123,
    list:'ul'
}

// 约束数组接口
interface IArray {
    [index:number]:string|number|boolean
}
let user3:IArray = [false,1,"1"] // 只要符合上面定义三种类型的一种就行

二、函数的接口

基本语法:

function getData(属性名: 属性类型,属性名: 属性类型,属性名: 属性类型):[属性类型,属性类型]{
        console.log(name,age,arg);
        return [返回值]
}
getData('属性值',属性值,属性值,'属性值',属性值)

案例:

// 自定义函数 void代表空值 也就是说不能有返回值
function getData(name?:string,age:number = 20,...arg:any[]):[string|number]{  // any代表所有数据类型
    console.log(name,age,arg);
    return [123]  // :[string|number] 代表了返回值的类型
}
getData('张三',20,30,'lisi',true)

三、类的接口

type和implements的概念:

type : 类型别名
概念:可以给一个或多个数据类型(string、number)取一个别名;

interface:接口
概念:定义参数或方法的数据类型

它们之间的相同点:都可以描述一个对象或者函数

它们之间的不同点:
type: 类型别名可以用于其它类型 (联合类型、元组类型、基本类型(原始值)),interface不支持

interface: interface 可以多次定义 并被视为合并所有声明成员 type 不支持

案例:

type strType1 = string|number;
    interface IsuperMan{
        name:strType1,
        age:number,
        fly:Function
    }
 // implements 关键词 遵循 类接口
    class Man implements IsuperMan{
        name = '超人'
        public age = 30
        public fly(){
            console.log(`${this.name}会飞`);
        }
    }
    const man = new Man()
    man.fly()

类接口需要 implements 关键词 来进行 遵循 约束

四、泛型接口

案例:

// 定义一个函数接口 融入泛型概念
    interface ICreate{
        <T>(name:string,age:T):string // 再定义时放一个 <泛型类型> 再里面放上自己的参数,这个是我们自己可以随便放的,不是固定的
    }
    const func:ICreate = function<T>(name:string,age:T):string{
        return '1'
    }
    // 等到调用时 我们再传入要的数据类型 就类似 函数与函数参数之间的关系
    func<number>('zhangsan',20);

    //对象接口融入泛型概念
    interface Iuser<T,K>{
        name:T,
        age:K,
        getuserInfo:(name:T,age:K)=>[T,K]
    }
    class User implements Iuser<string,number>{
        name:string = '张三'
        age:number = 20
        constructor(name:string,age:number){
            this.name = name
            this.age = age
        }
        getuserInfo<I,J>():[any,any]{
            return ['1',2]
        }
    }
    const user = new User('iisi',100)
    user.getuserInfo<string,number>()