ts-系列-接口+类型推论

TYF
4,170 阅读3分钟

这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战

类型推论

介绍

在TS中,某些没有明确指出类型的地方，TS的类型推论及机制会帮助提供类型

使用场景

  • 初始化变量的时候
  • 决定函数返回值的时候 示例

image.png

当我们初始化变量的时候虽然没有定义类型，但是他的类型是生效了的，比如我们把number的值修改为字符串是会报错的

image.png

注意点

  • 我们在使用类型推论的时候一定要给变量设置默认值，否则类型推论就会失效 示例

image.png

这个时候编辑器是不会给出任何提示的

  • 如果初始化类型中的默认值我们不确定，但又想让类型系统生效，那么就不要用类型推论，需要直接设置变量的类型 示例

image.png

这样类型系统就又生效了

函数的类型推论

  • 示例
function add(num1:number, num2:number):number {
    return num1 + num2
}
let sun = add(1,2)

上面这段示例中，我们创建了一个add函数，里边有俩个number类型的参数，并且定义了number类型的返回值，咋一看没什么问题，仔细一看，发现代码太臃肿了，本着代码精简(偷懒)的思想,我们通过类型推到推论改造一下

image.png

如图所示，我们删除了返回值的类型，，当鼠标挪到sun变量上的时候，函数add的返回值类型TS依旧可以帮我们推导出来，非常好用

接口

接口的使用场景

当一个对象类型被多次使用时，一般会使用接口interface来描述对象的类型，达到复用的目的。

使用方式

  • 使用 interface 关键字来申明接口。
  • 接口名称可以是任意合法的变量名称。
  • 申明接口后，直接使用接口名称作为变量的类型。
  • 因为每一行只能有一个属性类型，因此，属性类型没有分号。 示例
// 接口属性不换行
interface Person {
    name: string; age: number; sayHi(): void
}
let person: Person = {
    name: '张三',
    age: 19,
    sayHi() {
        console.log(this.name);
    }
}
let person2: Person = {
    name: '张三',
    age: 19,
    sayHi() {
        console.log(this.name);
    }
}
person2.sayHi()

// 接口属性换行 不用加分号
interface Person {
    name: string
    age: number
    sayHi(): void
}
let person: Person = {
    name: '张三',
    age: 19,
    sayHi() {
        console.log(this.name);
    }
}
let person2: Person = {
    name: '张三',
    age: 19,
    sayHi() {
        console.log(this.name);
    }
}
person2.sayHi()
  • 到这里大家就会发现其实使用ts的type属性也能实现复用
  • interface 和 type 区别
    • 相同点：都可以为对象指定类型
    • 不同点：interface只能为对象定义类型，type可以为任意类型指定别名
    • 示例
    type NumberOrString = number | string

接口继承

使用场景

如果俩个接口之间有相同的属性或方法，那么就可以将公共的属性或方法抽离出来，通过继承来实现复用

使用方式

  • 使用 extends关键字实现继承
  • 继承后子接口就拥有了父级的所有属性和方法
  • 接口可以使用多继承 示例
interface Animal {
    age: number
    color: string
}
interface Dog extends Animal {
    eat():void
}
let dog:Dog = {age:3,color:'yellow',eat(){}}

这个时候我们就可以看到接口Dog继承了 接口Animal，并且拥有了Animal中所有的属性

interface Animal {
    age: number
    color: string
}
interface AnimalsAction {
    sleep(): void
}

interface Cat extends Animal, AnimalsAction {
    eat(): void
}
let cat: Cat = { age: 2, color: 'yellow', sleep() { }, eat() { } }

当我们使用多继承的时候也是没有问题的，在我们的示例中Cat继承了Anmail和AnmailAction,并且拥有了他们所有的属性和方法

写在最后

  • TS系列文章会由浅入深的逐步带你领略TS的魅力
  • 欢迎大家评论，指出不完善的地方
avatar
文章
阅读
粉丝