TypeScript 如何定义接口

平时做项目写代码时,你是不是常遇到这种情况:明明函数参数和返回值的类型都写对了,可传进去的对象还是出了问题?比如想传一个用户信息,却不小心漏填了“年龄”,或者多写了一个不存在的“积分”字段,运行时才报错,排查起来特别麻烦。这时候,TypeScript 的“接口”就能帮你提前把好关,从根源上减少这类低级错误。

什么是TypeScript接口?

简单说,接口就像一份“合约”——你可以用它规定某个对象、函数甚至类的“必须有什么”和“不能有什么”。举个生活化的例子:公司给你发工牌,工牌上明确要求必须有“姓名”“部门”“工号”这三个信息,这就相当于接口的“必填项”;而像“身高”“入职日期”这种可选信息,就是接口的“可选字段”。不符合这份工牌要求的信息,公司不会认,TypeScript也会直接报错。

TypeScript 如何定义接口

怎么定义最简单的对象接口?

定义对象接口是最常用的场景,语法其实很简单,用interface关键字开头,后面跟接口名,再用大括号把要约束的字段包起来就行。

比如我们要约束一个“学生信息”对象:

`typescript

// 定义接口

interface Student {

name: string; // 必填的字符串类型姓名

age: number; // 必填的数字类型年龄

}

// 符合要求的对象

const myStudent: Student = {

name: "小明",

age: 12

};

`

要是你故意漏填age,或者把age写成字符串,TypeScript会立刻提示你“类型不对,缺少必填项”,不用等运行时才发现问题。

给接口加“可选字段”和“只读字段”

有时候对象不是所有字段都必须填,比如学生信息里的“班级”,转学生可能还没确定,这时候可以在字段名后面加?,表示可选。

`typescript

interface Student {

name: string;

age: number;

class?: string; // 可选字段,不是必填

}

// 不传class也没问题

const transferStudent: Student = {

name: "小丽",

age: 13

};

`

还有一种情况,有些信息一旦填了就不能改,比如“学号”,这可以用readonly标记,防止后续不小心修改。

`typescript

interface Student {

name: string;

age: number;

readonly studentId: string; // 只读字段,不能改

}

const myStudent: Student = {

name: "小明",

age: 12,

studentId: "2023001"

};

// 下面这行代码会报错,因为studentId是只读的

// myStudent.studentId = "2023002";

`

接口还能约束函数?

别以为接口只能管对象,它还能规范函数的“参数和返回值”。比如我们要定义一个“计算学生平均成绩”的函数,要求参数是两个数字,返回值也是数字,就可以用接口来约束:

`typescript

interface ScoreFunc {

(math: number, english: number): number;

}

// 定义符合接口的函数

const calcAvg: ScoreFunc = (a, b) => (a + b) / 2;

// 传非数字参数会报错,返回字符串也会报错

`

TypeScript接口就像代码里的“小规则”,把模糊的要求变成明确的约束,让代码更稳、更易读,也减少了后期调试的麻烦——就像提前把工牌的规则定好,不用等拿错卡才返工。

上一篇 JavaScript 数组怎么去重