【TypeScript 4.5】006

2025-07-29 15:12:08

【TypeScript 4.5】006 【TypeScript 4.5】006-第 6 章对象类型一、认识对象类型1、概述说明在 JavaScript 中我们分组和传递数据的基本方式是通过对象完成的在 TypeScript 中我们通过对象类型来表示对象对象类型匿名对象、接口命名、类型别名。2、代码演示代码语言：javascript代码运行次数：0运行复制// 1、匿名方式 function gr

【TypeScript 4.5】006

【TypeScript 4.5】006-第 6 章对象类型一、认识对象类型

1、概述

说明

在 JavaScript 中我们分组和传递数据的基本方式是通过对象完成的

在 TypeScript 中我们通过对象类型来表示对象

对象类型

匿名对象、接口命名、类型别名。

2、代码演示

代码语言：javascript代码运行次数：0运行复制

// 1、匿名方式
function greet(person: { name: string, age: number }) {
    return "hello " +  + "I am " + person.age + " years old!"
}
// 接口对象类型
interface Person {
    name: string,
    age: number
}
// 2、接口方式
function greet1(person: Person) {
    return "hello " +  + "I am " + person.age + " years old!"
}
// 类型别名对象类型
type Person1 = {
    name: string,
    age: number
}
// 、类型别名方式
function greet2(person: Person1) {
    return "hello " +  + "I am " + person.age + " years old!"
}

二、可选属性

1、属性修改器

对象类型中的每个属性都可以指定：

1）定义对象类型

2）设置属性是否是可选的

）属性是否可以被写入

2、可选属性

代码语言：javascript代码运行次数：0运行复制

type Shape = {}
interface PaintOpti {
    shape: Shape,
    xPos?: number,
    yPos?: number
}
function printShape(opts: PaintOpti) {
    // 此处，当 xPos 或 yPos 未传入的时候打印结果未 undefined
    // 如果加判断给默认值的话，会很麻烦！
    // 我们通过解构的方式赋予默认值，见 printShape1()
}
function printShape1({ shape, xPos = 0, yPos = 0 }: PaintOpti) {
    // 如果在解构里这么写：{ shape: Shape, xPos: number = 0, yPos = 0 } Shape 和 number 并不是类型，而是别名（ ES6 语法）
}
ct shape: Shape = {}
printShape({ shape })
printShape({ shape, xPos: 100 })
printShape({ shape, yPos: 100 })
printShape({ shape, xPos: 100, yPos:100 })

三、只读属性

1、概述

它不会在运行的时候改变任何行为

但是在类型检查期间

一个标记为只读的属性

是不能够被写入其他值的

2、代码演示

不同层次的只读属性

代码语言：javascript代码运行次数：0运行复制

// 不同层次的只读属性
interface SomeType {
    // 只读属性
    readonly prop: string
}
function doSth(obj: SomeType) {
    cole.log(obj.prop)
    // obj.prop = "hello" // 报错：无法分配到 "prop" ，因为它是只读属性。
}
interface Home {
    readonly resident: {
        // 如果在 name 和 age 前面也加上 readonly 那么对其修改也会报错
        name: string,
        age: number
    }
}
function visitForBirthday(home: Home) {
    cole.log(home.)
    cole.log(home.resident.age)
    home. = "hello" // 正常，不报错
    home.resident.age ++ // 正常，不报错
}
function evict(home: Home) {
    home.resident = { // 报错：无法分配到 "resident" ，因为它是只读属性。
        name: "Hello",
        age: 22
    }
}

另外一种情况

代码语言：javascript代码运行次数：0运行复制

// 另一种情况
interface Person {
    name: string,
    age: number
}
interface ReadonlyPerson {
    readonly name: string,
    readonly age: number
}
let writablePerson: Person = {
    name: "訾博",
    age: 25
}
let readonlyPerosn: ReadonlyPerson = writablePerson // 这里不报错
cole.log() // 正常，不报错
cole.log(readonlyPerosn.age) // 正常，不报错，结果为 25
writablePerson.age ++
cole.log(readonlyPerosn.age) // 结果为 26

四、索引签名

1、概述

有时候我们不能提前知道一个类型的所有属性的名称

但是我们知道这个值的形状

这种情况，我们可以使用索引签名来描述可能的值的类型

所谓索引签名，就是知道属性值的类型，不知道属性名，定义一个类似 [props: string]: number 的东西，表示属性名是字符串，属性值是 number 类型！参考文章：

2、代码演示

课程只是冰山一角，TypeScript 还有星辰大海！

索引类型为 number

代码语言：javascript代码运行次数：0运行复制

// 索引类型为 number
interface StringArray {
    [index: number]: string
}
// 下面 myArr 与 myArr01 两种写法应该是等效的
ct myArr: StringArray = ['a', 'b', 'c']
cole.log(myArr[0]) // a
cole.log(myArr[1]) // b
cole.log(myArr[2]) // c
cole.log(myArr[]) // undefined
ct myArr01: StringArray = {
    0: 'a',
    1: 'b',
    2: 'c'
}
cole.log(myArr01[0]) // a
cole.log(myArr01[1]) // b
cole.log(myArr01[2]) // c
cole.log(myArr01[]) // undefined
// 下面这种写法得出：前面的 1 2  不会影响实际索引！
ct myArr02: StringArray = {
    1: 'a',
    2: 'b',
    : 'c'
}
cole.log(myArr01[0]) // a
cole.log(myArr01[1]) // b
cole.log(myArr01[2]) // c
cole.log(myArr01[]) // undefined

索引类型为 string

代码语言：javascript代码运行次数：0运行复制

// 索引类型为 string
interface TestString {
    [props: string]: number
}
// 下面 testString 与 testString01 两种写法应该是等效的
let testStr: TestString = {
    x: 100,
    y: 200,
    z: 00
}
cole.log(testStr.x) // 100
cole.log(testStr.y) // 200
cole.log(testStr.z) // 00
cole.log(testStr.a) // undefined
let testStr01: TestString = {
    'x': 100,
    'y': 200,
    'z': 00
}
cole.log(testStr01.x) // 100
cole.log(testStr01.y) // 200
cole.log(testStr01.z) // 00
cole.log(testStr01.a) // undefined
cole.log(testStr01[0]) // undefined
cole.log(testStr01[1]) // undefined
cole.log(testStr01[2]) // undefined
cole.log(testStr01[]) // undefined
// 下面这种写法值得重视，跟想象中不一样！
let testStr02: TestString = {
    1: 100,
    2: 200,
    : 00
}
cole.log(testStr02[0]) // undefined
cole.log(testStr02[1]) // 100
cole.log(testStr02[2]) // 200
cole.log(testStr02[]) // 00
let testStr0: TestString = {
    0: 50,
    1: 100,
    2: 200
}
cole.log(testStr0[0]) // 50
cole.log(testStr0[1]) // 100
cole.log(testStr0[2]) // 200
cole.log(testStr0[]) // undefined
// 这么写报错：不能将类型“number[]”分配给类型“TestString”。
// 类型“number[]”中缺少类型“string”的索引签名。
// let testStr04: TestString = [100, 200, 00]

索引类型为 boolean （报错）

代码语言：javascript代码运行次数：0运行复制

// 索引类型为 boolean
interface TestBoolean {
    [props: boolean]: number // 报错：索引签名参数类型必须是 “string”、“number”、“symbol”或模板文本类型。
}
// 也就说明属性名的取值范围是：“string”、“number”、“symbol”或模板文本类型。

关于其他键值对

其他键值对都要满足索引签名！

代码语言：javascript代码运行次数：0运行复制

interface TestOther {
    [index: string]: number,
    // 接口中的其他键值对都要满足索引签名
    length: number,
    name: string // 报错：类型“string”的属性“name”不能赋给“string”索引类型“number”。
}
interface TestOther01 {
    [index: string]: number | string,
    // 接口中的其他键值对都要满足索引签名
    length: number,
    name: string // 正常
}

只读索引签名

代码语言：javascript代码运行次数：0运行复制

// 只读索引签名
interface TestReadonly {
    readonly [index: number]: string
}
let testReadonly: TestReadonly = ["a", "b", "c"]
testReadonly[0] = "hello" // 报错：类型“TestReadonly”中的索引签名仅允许读取。
interface TestReadonly01 {
    readonly [props: string]: string
}
let testReadonly01: TestReadonly01 = {
    name: "訾博",
    gender: "男"
}
 = "刘备" // 报错：类型“TestReadonly01”中的索引签名仅允许读取。

索引签名和数组区别

没有数组的方法或属性

代码语言：javascript代码运行次数：0运行复制

interface StringArray {
    [index: number]: string
}
ct myArr: StringArray = ['a', 'b', 'c']
// myArr.push("hello") // 报错：类型“StringArray”上不存在属性“push”。
// 使用数组的方法或属性
// 方式一：类型断言
ct myArr01: StringArray = ['a', 'b', 'c']
ct strs: string[] = myArr01 as string[]
strs.push("hello")
cole.log(myArr01) // [ 'a', 'b', 'c', 'hello' ]
// 方式二：在定义索取签名时添加需要的属性或方法
// 暂不演示方法***
interface StringArray01 {
    [index: number]: number,
    length: number // 返回的直接是属性的数量（除了 length 之外的）
}
ct myArr02: StringArray01 = [10, 20, 0, 40, 50]
cole.log(myArr02)
cole.log("myArr02.length ", myArr02.length)

五、扩展类型

1、概述

说明

有一些类型可能是其他类型更具体的版本

代码示例

看到 extends 就懂了！

代码语言：javascript代码运行次数：0运行复制

interface BasicAddress {
    // ...
}
interface AddressWithUnit extends BasicAddress {
    unit: string
}

2、代码演示

继承和扩展是一个意思！

单继承

代码语言：javascript代码运行次数：0运行复制

interface BasicAddress {
    name?: string,
    street: string,
    city: string,
    country: string,
    postalCode: string
}
interface AddressWithUnit extends BasicAddress {
    unit: string
}
let zibo: AddressWithUnit = {
    name: "訾博",
    street: "街道",
    city: "城市",
    country: "国家",
    postalCode: "000000",
    unit: "单元"
}
cole.log() // 訾博

多继承

代码语言：javascript代码运行次数：0运行复制

interface Father {
    tall: number
}
interface Monther {
    face: string
}
interface Son extends Father, Monther {
    knowledge: string
}
let son: Son = {
    tall: 188,
    face: "beautiful",
    knowledge: "abundant"
}

六、交叉类型

1、概述

说明

就是多个对象类型的并集！

接口允许我们通过扩展其他类型建立起新类型

TypeScript 还提供另外一种其他结构

称为交叉类型

主要用于组合现有的对象类型

代码示例

代码语言：javascript代码运行次数：0运行复制

type ColorfulCircle = Colorful & Circle

2、代码演示

代码语言：javascript代码运行次数：0运行复制

interface Father {
    tall: number
}
interface Monther {
    face: string
}
type Son = Father & Monther

let son: Son = {
    tall: 188,
    face: 'beautiful'
}
function getInfo(son: Father & Monther) {
    cole.log() // 188
    cole.log(son.face) // beautiful
}
// 可以这么使用
getInfo(son)
// 试试能否多个对象类型进行交叉
interface Grandpa {
    habit: string
}
interface Grandma {
    hobby: string
}
type ewSon = Father & Monther & Grandpa & Grandma
let newSon: ewSon = {
    tall: 188,
    face: "beautiful",
    habit: "sport",
    hobby: "study"
}
cole.log(newSon.face) // beautiful

七、接口与交叉类型

1、概述

说明

接口可以使用 extends 来扩展其他类型

交叉类型，我们可以通过 type 类型别名定义

把两个类型之间用 & 符号交叉联合起来

二者主要区别

在于如何处理冲突？

2、代码演示

同名接口

同名接口的属性会合并

代码语言：javascript代码运行次数：0运行复制

interface Student {
    name: string
}
interface Student {
    age: number
}
// 结论：同名接口的属性会合并（但同名接口有同名属性的话会报错，除非一摸一样的属性）
let stu: Student = {
    name: 'zibo',
    age: 25
}
cole.log() // zibo
cole.log(stu.age) // 25

同名类型别名

无法定义同名类型别名。

八、泛型对象类型

1、概述

说明

之前我们定义对象类型

可以定义任意的属性以及属性的类型

这些类型都是一些具体的类型

我们能否泛化这些类型呢？

代码示例

使用 any 带来了编写程序的遍历，但失去了使用类型的意义！

代码语言：javascript代码运行次数：0运行复制

interface Box {
    contents: any
}

unknown 要求非常严苛，不能随意给其赋值！

代码语言：javascript代码运行次数：0运行复制

interface Box {
    contents: unknown
}

泛型大法好！

代码语言：javascript代码运行次数：0运行复制

interface Box<T> {
    contents: T
}
let box: Box<string> = {
    contents: "大家好！"
}

2、代码演示

代码语言：javascript代码运行次数：0运行复制

interface Box<T> {
    contents: T
}
let box: Box<string> = {
    contents: "大家好！"
}
// 使用类型别名定义
type ewBox<T> = {
    contents: T
}
// 扩展演示（套娃）
type Orull<T> = T | null
type OneOrMany<T> = T | T[]
type OneOrManyOrull<T> = Orull<OneOrMany<T>>
type OneOrManyOrullString = OneOrManyOrull<string>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除cole对象接口索引typescript

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1199228.html

本站网友 psd是什么	7分钟前发表
匿名方式 function greet(person
本站网友准生证办理需要什么材料	30分钟前发表
'a'
本站网友福州华美整形	3分钟前发表
age
本站网友 linux就该这么学	29分钟前发表
street
本站网友 jinrong	14分钟前发表
number
本站网友土豆的功效与作用	0秒前发表
age
本站网友七宝租房	26分钟前发表
string
本站网友梦到死去的同学	27分钟前发表
扩展类型1
本站网友天师	16分钟前发表
20
本站网友北京独栋别墅	27分钟前发表
number } // 结论：同名接口的属性会合并（但同名接口有同名属性的话会报错
本站网友口周皮炎	16分钟前发表
number]
本站网友视野咨询	17分钟前发表
因为它是只读属性
本站网友婴儿枕	17分钟前发表
"訾博"
本站网友用药常识	28分钟前发表
TestString = [100
本站网友提亮肤色	30分钟前发表
TestString = { 'x'
本站网友佛山不孕不育	5分钟前发表
代码演示课程只是冰山一角
本站网友秋季喝什么汤	29分钟前发表
概述它不会在运行的时候改变任何行为但是在类型检查期间一个标记为只读的属性是不能够被写入其他值的2

【TypeScript 4.5】006