TypeScript-接口

原创

杨不易呀

发布于 2023-09-28 19:02:14

1470

前言

TypeScript 中的接口（Interface）是用于定义对象的结构和类型的强大工具。它允许开发者明确定义对象应该包含哪些属性和方法，并在代码中实现类型检查和约束。接口提高了代码的可读性、可维护性和类型安全性，促进了团队协作。通过接口，可以创建自定义类型，以适应各种复杂数据结构和对象，从而在开发过程中提供更好的代码组织和错误预防。

接口类型概述

和 number, string, boolean, enum 这些数据类型一样接口也是一种类型, 也是用来约束使用者的

先来看看如果没有使用接口之前的弊端，如我现在有一个需求要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符串：

let obj = {
    firstName: "BN",
    lastName: "Tang"
}

function say({firstName, lastName}): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}

say(obj);

如上是正常的字符串类型，那么如果我给的不是字符串类型又会发生什么情况呢，当我把 lastName 存储的值改为 18 的时候编译器并没有报错，因为 JS 是弱类型的，那么这个时候就会有问题，因为我的需求是要求都是字符串类型的：

let obj = {
    firstName: "BN",
    lastName: 18
}

function say({firstName, lastName}): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}

say(obj);

利用 TS 当中的接口改造一下如上的小示例，来进行约束一下调用函数的时候给入的参数类型如下：

定义一个接口类型

interface FullName {
    firstName: string
    lastName: string
}

然后在改造一下函数的入参类型为刚刚定义的接口类型如下，然后发现编译器就直接报错了：

interface FullName {
    firstName: string
    lastName: string
}

let obj = {
    firstName: "BN",
    lastName: 18
}

function say({firstName, lastName}: FullName): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}

say(obj);

把 18 改为正常的字符串类型，然后在查看编译器，就不会报错了如下：

interface FullName {
    firstName: string
    lastName: string
}

let obj = {
    firstName: "BN",
    lastName: "Tang"
}

function say({firstName, lastName}: FullName): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}

say(obj);