TypeScript--接口(interface)

简介: TypeScript--接口(interface)

介绍


TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在 TypeScript 里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

const getFullName = ({ firstName, lastName}) =>{
    return `${firstName}${lastName}`
}
getFullName({
    firstName:'liu',
    lastName:123
})

如果你的代码报如下错误

修改 tsconfig.json,将 strict 改为 false

上面我们期望的两个参数都是字符串,但没有限制, lastName 传的是数值,也不会报错,如果我们要限制参数,可以使用 ts 里的接口

// 定义了一个接口,名称为 NameInfo,里面的两个参数类型都是 string 类型的
interface NameInfo {
    firstName: string,
    lastName: string,
}
// 指定对应的接口名称,就会使用里面对应的类型
const getFullName = ({ firstName, lastName}: NameInfo) =>{
    return `${firstName}${lastName}`
}
// 只能传对应类型的值
getFullName({
    firstName:'liu', 
    lastName:"zou"
})


可选属性


接口里的属性不全都是必需的。 有些是只在某些条件下存在,或者根本不存在。 可选属性在应用“option bags”模式时很常用,即给函数传入的参数对象中只有部分属性赋值了。

// 定义了一个接口,名称为 NameInfo,里面的两个参数类型都是 string 类型的
interface NameInfo {
    firstName: string,
    lastName?: string,  //  lastName 后面加了 ? ,代表 lastName 参数是可选的
}
// 指定对应的接口名称,就会使用里面对应的类型
const getFullName = ({ firstName, lastName}: NameInfo) =>{
    return `${firstName}${lastName}`
}
// 只能传对应类型的值
getFullName({
    firstName:'liu', 
    // lastName:"zou" // 可选的,可以不需要传
})

带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个 ? 符号。


只读属性


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

 

interface NameInfo {
    firstName: string,
    readonly lastName: string,  //  readonly ,代表这个参数只读,不能修改
}
const getFullName = ({ firstName, lastName}: NameInfo) =>{
    return `${firstName}${lastName}`
}
getFullName({
    firstName:'liu', 
    lastName:"zou"  // 第一次赋值时可以
})


额外的属性检查


interface NameInfo {
    firstName: string,
    lastName: string,  
}
const getFullName = ({ firstName, lastName}: NameInfo) =>{
    return `${firstName}${lastName}`
} 
getFullName({
    firstName:'liu', 
    lastName:"zou", 
    size: 2 // 多传了一个 size 参数,会报错
})

绕开这些检查非常简单。 最简便的方法是使用类型断言:

interface NameInfo {
    firstName: string,
    lastName: string,  
}
const getFullName = ({ firstName, lastName}: NameInfo) =>{
    return `${firstName}${lastName}`
} 
getFullName({
    firstName:'liu', 
    lastName:"zou", 
    size: 2  
} as NameInfo)  // 使用类型断言,多传了个参数就不会报错了

然而,最佳的方式是能够添加一个字符串索引签名,前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性

interface NameInfo {
    firstName: string,
    lastName: string,  
    [propName: string]: any;  // 字符串索引签名
}
const getFullName = ({ firstName, lastName}: NameInfo) =>{
    return `${firstName}${lastName}`
} 
getFullName({
    firstName:'liu', 
    lastName:"zou", 
    size: 2  
})

表示的是 NameInfo 可以有任意数量的属性,并且只要它们不是 firstName 和 lastName,那么就无所谓它们的类型是什么。


继承接口


和类一样,接口也可以相互继承。 这让我们能够从一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里

interface Shape {
    color: string;
}
// 继承接口使用  extends 关键字
interface Square extends Shape {  // Square 接口继承了 Shape 接口,则 Square 接口里就有 Shape 接口的属性 color了
    sideLength: number;
}

一个接口可以继承多个接口,创建出多个接口的合成接口。

interface Shape {
    color: string;
}
interface PenStroke {
    penWidth: number;
}
interface Square extends Shape, PenStroke {
    sideLength: number;
}
const cart: Square = {  // 必须要下面的三个参数
    sideLength: 12,
    penWidth: 1,
    color:'red'
}

相关文章
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
41 1
|
30天前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
3月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
4月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
3月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
58 0
|
4月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
79 0
|
4月前
|
JavaScript Java 索引
TypeScript(四)接口
TypeScript(四)接口
46 0
|
4月前
|
JavaScript API
TypeScript 项目中接口的统一管理
TypeScript 项目中接口的统一管理
60 0
|
5月前
|
JavaScript 安全 前端开发
TypeScript 基础学习笔记:interface 与 type 的异同
TypeScript 基础学习笔记:interface 与 type 的异同
65 0