[JavaScript知识库]『TypeScript』interface 接口

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

?1. 接口声明

// 之前我们通过type用来声明一个对象类型
/*type Person = {
    name: string,
    age: number
}*/

// 对象类型的声明还有另外一种方式
interface Person {
    name: string,
    age: number
}

let obj:Person={
    name:"哈哈",
    age: 18
}

2. 可选属性

通过 ? 的方式声明，可以规定这个变量可以有这个属性也可以没有这个属性。

interface Person {
    name: string,
    friend?: {
        name: string,
        age?: number,
        girlFriend?: {
            name: string
        }
    }
}

let obj: Person = {
    name: "哈哈",
    friend: {
        name: "xixi"
    }
}

console.log(obj.name)
console.log(obj.friend?.name)
console.log(obj.friend?.girlFriend?.name)

3. 索引类型

interface Obj {
    [name:number]: string
}
let obj:Obj = {
    0: "0",
    1: "a",
    2: "b",
    3: "c",
    4: "d"
}

interface Obj1 {
    [name:string]: number
    angular:number,
}
let obj2:Obj1 = {
    "html": 0,
    "css": 1,
    "js": 2,
    "Vue": 3,
    "ts": 4,
    "angular": 5
}

4. 函数类型

// type Fn = (num:number) => void
interface IFn {
    (num1:number, num2:number): number
}
let fn:IFn = (num1,num2)=>{
    return num1+num2
}

//一般情况下 我们还是推荐大家来使用类型别名(type)来定义函数

5. 继承

interface Obj {
    name: string,
    run: () => void
}

interface Obj2 {
    age: number
}

//接口是支持多继承的(类的继承只能继承一个)
interface Obj12 extends Obj, Obj2 {
    jump: () => void
}
let obj: Obj12 = {
    name: "你好",
    age: 18,
    run(){},
    jump(){}
}

6. 字面量赋值

interface Person{
    name: string,
    age: number
}

let obj = {
    name: "你好",
    age: 18,
    flag: true
}

let p:Person = obj;

//在ts通过字面量直接赋值的过程中, 为了进行类型推导会进行严格的类型限制
//但是我们之后讲一个 变量 赋值给其他变量的时候, ts会进行一个(freshness)擦除操作

console.log(p);


function fn(a:Person){

}
fn(obj)

?7. interface 和 type的区别

1. 如果定义的是对象类型,那么通常推荐使用interface
2. 如果定义的是非对象 function Direction 推荐使用type

interface和type之间有什么异同
1.interface可以重复声明 ?type不能重复声明
2.type定义的别名, 别名是不能重复