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