TypeScript 接口基础

最新推荐文章于 2025-04-12 14:28:52 发布

每天都很想抱着树

最新推荐文章于 2025-04-12 14:28:52 发布

阅读量319

点赞数 1

分类专栏： TypeScript 文章标签： typescript 前端 javascript

本文链接：https://blog.youkuaiyun.com/Wk995/article/details/126592565

版权

TypeScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了TypeScript中的接口interface，包括接口定义确保对象结构一致性，使用索引签名描述可变属性，以及如何通过只读属性限制对象的修改。通过实例展示了如何应用这些概念，帮助理解TypeScript中接口的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口 interface

接口是一系列抽象方法的声明，它能合并众多类型声明至一个类型声明，能够规范对象的结构，属性的类型，属性值的类型

接口定义

interface UserInfo {
    userName: string;
    age: number;
}

function initUser ({userName, age}: UserInfo) {
    console.log(userName + '--' + age)
}

initUser({userName: '5k', age: 18}) // pass

initUser({userName:'5k', age: '18'}) // 不能将类型“string”分配给类型“number”

使用接口约定的对象，对象赋予的值就必须和接口限定的一模一样，多一个少一个都不行

interface UserInfo {
  userName: string;
  age: number;
}

let userInfo: UserInfo = {
  userName: "5k",
}; // err 类型 "{ userName: string; }" 中缺少属性 "age"，但类型 "UserInfo" 中需要该属性

let userInfo: UserInfo = {
  userName: "5k",
  age: 18,
  role: 'admin'
}; // err 不能将类型“{ userName: string; age: number; role: string; }”分配给类型“UserInfo”。

有时我们不确定一个属性是否一定存在或者在某些条件下才存在时，使用可选属性可以来声明改该属性不是必须的

interface UserInfo {
    userName?: string; // 可选属性在属性名后加个?即可
    age: number;
}

function initUser ({userName, age}: UserInfo) {
    console.log(userName + '--' + age)
}

initUser({age: 18}) // pass

在不确定被约束对象内是否有额外参数情况下，可以使用索引签名

索引签名

索引签名用于描述那些通过索引得到的类型，比如arr[key], 或obj[key]
索引签名只要属性名和属性值满足约定即可，不约束数量

interface stringObject {
    [propName: string]: string;
    
}

const userInfo: stringObject = {
    userName: '5k',
    gender: '男',
    age: 18, // 报错 不能将类型“number”分配给类型“string”,
}

interface stringArray {
    [propName: number]: string;
}

const userArr: stringObject = ['5k', '小王']

当设置了索引签名后，其余属性值类型必须与索引签名属性值类型兼容

interface UserInfo {
    [propName: string]: string;
    age: number // 类型“number”的属性“age”不能赋给“string”索引类型“string”
}

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值，可以在属性名前用readonly来指定只读属性

interface UserInfo {
    readonly userName: string;
    age: number;
}

const userInfo: UserInfo = {
    userName: '5k',
    age: 18
}

userInfo.age = 20 // pass
userInfo.userName = '小王' // 无法分配到 "userName" ，因为它是只读属性

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用const，若做为属性则使用readonly

只读数组

const userArr:ReadonlyArray<string> = ['5k', '小王']

userArr[1] = '大王' // err 类型“readonly string[]”中的索引签名仅允许读取