TS之对象的类型 — 接口

简介: 在 TypeScript 中,我们使用接口(Interface)来定义对象的类型。

前言


今儿接着介绍对象类型。


在 TypeScript 中,我们使用接口(Interface)来定义对象的类型。


正文


什么是接口


在面向对象语言中,接口(Interface)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。

TypeScript 中的接口是一个非常灵活的概念,处理可用于对类的一部分进行抽象以外,也常用于「对象的形状(Shape)」进行描述。


简单的例子

// 接口一般首字母大写
interface Person {
    name: string,
    age: number
}
let frankie: Person = {
    name: 'Frankie',
    age: 22
}


上述例子中,我们定义了一个接口 Person,接着定义了一个变量 frankie,它的类型是 Person。这样,我们就约束了 frankie 的形状必须是和接口 Person 一致。

定义的变量比接口少了或者多了一些属性是不允许的:

interface Person {
    name: string,
    age: number
}
let frankie: Person = {
    name: 'Frankie'
}
// (1)少了 age 属性
// Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.
// (2)多了 height 属性
let mandy: Person = {
    name: 'Mandy',
    age: 22,
    height: 180
}
// Type '{ name: string; age: number; height: number; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'height' does not exist in type 'Person'.


可见,赋值的时候,变量的形状必须和接口保持一致。


可选属性


有时我们希望不要完全匹配一个形状,那么可以用可选属性:

interface Person {
    name: string,
    age?: number
}
let frankie: Person = {
    name: 'Frankie'
}
let mandy: Person = {
    name: 'Mandy',
    age: 22
}


可选属性的含义是该属性可以不存在,但这时仍然不允许添加未定义的属性。


任意属性


有时候,我们希望一个接口允许有任意的属性,可以使用如下方式:

interface Person {
    name: string,
    age?: number,
    [propName: string]: any
}
let frankie: Person = {
    name: 'Frankie',
    sex: 'male',
    height: 180,
}


使用了 [propName: string] 定义了任意属性取 string 类型的值。

需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集。

interface Person {
    name: string,
    age?: number,
    [propName: string]: string
}
let frankie: Person = {
    name: 'Frankie',
    age: 20,
    height: '180',
}
// Property 'age' of type 'number' is not assignable to string index type 'string'.
// Type '{ name: string; age: number; height: string; }' is not assignable to type 'Perso
n'.
// Property 'age' is incompatible with index signature.
// Type 'number' is not assignable to type 'string'.


上述例子中,任意属性的值允许是 string,但是可选属性 age 以及任意属性 height 的值却是 numbernumber 不是 string 的子属性,所以报错了。

目录
相关文章
|
4天前
|
JavaScript 编译器
TypeScript中类型守卫:缩小类型范围的艺术
【4月更文挑战第23天】TypeScript中的类型守卫是缩小类型范围的关键技术,它帮助我们在运行时确保值的精确类型,提升代码健壮性和可读性。类型守卫包括`typeof`(检查原始类型)、`instanceof`(检查类实例)和自定义类型守卫。通过这些方法,我们可以更好地处理联合类型、泛型和不同数据源,降低运行时错误,提高代码质量。
|
4天前
|
监控 JavaScript 安全
TypeScript在员工上网行为监控中的类型安全实践
本文演示了如何使用TypeScript在员工上网行为监控系统中实现类型安全。通过定义`Website`类型和`MonitoringData`接口,确保数据准确性和可靠性。示例展示了从监控设备获取数据和提交到网站的函数,强调了类型定义在防止错误、提升代码可维护性方面的作用。
35 7
|
3天前
|
JavaScript 前端开发
TypeScript内置类型一览(Record<string,any>等等)(下)
TypeScript内置类型一览(Record<string,any>等等)
|
3天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(中)
TypeScript内置类型一览(Record<string,any>等等)
|
3天前
|
JavaScript
TypeScript内置类型一览(Record<string,any>等等)(上)
TypeScript内置类型一览(Record<string,any>等等)
|
4天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
4天前
|
JavaScript 安全 前端开发
【TypeScript技术专栏】TypeScript中的类型推断与类型守卫
【4月更文挑战第30天】TypeScript的类型推断与类型守卫是提升代码安全的关键。类型推断自动识别变量类型,减少错误,包括基础、上下文、最佳通用和控制流类型推断。类型守卫则通过`typeof`、`instanceof`及自定义函数在运行时确认变量类型,确保类型安全。两者结合使用,优化开发体验,助力构建健壮应用。
|
4天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
4天前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
4天前
|
JavaScript 前端开发
TypeScript基础类型
TypeScript基础类型