TypeScript(三)对象类型

简介: TypeScript(三)对象类型


前言

本文收录于TypeScript知识总结系列文章,欢迎指正!

在TS中除了之前的基本类型外,还包含Array(数组),Function(函数),Tuple(元组),Object(对象)等非原始值,他们统称为object类型(对象类型)

这些类型也是TS强类型检查的基础

对象类型

在此之前我们需要了解下面这个概念

Object与object有什么区别?

object是TypeScript中的类型(在JS中不存在),它是非基本数据类型的统称,包括普通对象、数组、函数等等

而Object可以看成是JavaScript中的全局Object对象,它包括所有JavaScript内置的对象类型,我们常说的万物皆对象说的就是Object

一句话总结:Object 包含了所有JavaScript内置对象类型,而object包含了所有非原始类型的值

以下代码可以用上述概念解释

const obj: Object = 1 // 正常运行
const obj1: object = 1 // error 不能将类型“number”分配给类型“object”

言归正传,如果一个变量的类型是object,那么它可以存储任何引用类型的值。示例代码如下:

const obj: object = {} // 对象
const arr: object = [1, 2, 3] // 数组
const fn: object = function () { // 函数
    console.log(obj);
}
const tuple: object = ['count', 10] // 元组
const map: object = new Map() // 键值对集合
const set: object = new Set() // 无序集合

上述代码写法不会报错,但是无法使用特有的属性或函数,如执行fn(),会提示无法执行,使用map.set会找不到该函数

解决方法是使用更具象的类型来表示变量,如:

const obj: Object = {}
const arr: number[] = [1, 2, 3]
const fn: Function = function () {
    console.log(obj);
}
const tuple: [string, number] = ['count', 10]
const map: Map<number, string> = new Map()
const set: Set<string> = new Set()
obj.valueOf()
arr.push(4)
fn()
tuple.push(1)
map.set(0, "0")
set.add('hello')

这也正是接下来我们需要了解的

Array(数组)

数组是编程中经常用到的一种数据结构,它可以存储一组有序的数据,每个元素可以是任意类型

在TypeScript中,数组类型通常使用 类型+[ ] 来表示,如

const arr: string[] = ['a', 'b']
const arr3: string[][] = [['a'], ['b']] // 二维数组

除此之外可以使用Array泛型(泛型在后续文章会说到)表示:Array<类型>,如

const arr1: Array<number> = [1, 2]
const arr2: Array<Array<number>> = [[1, 3], [1, 5]] // 二维数据

另外,数组可以使用接口(接口是一种表示对象的自定义高级类型,后续文章会讲到)的方式定义,如下,下面的方式二与方式一的效果是一样的

const arr: string[] = ['a', 'b'] // 方式一
interface IArray {
    [i: number]: string
}
const arr2: IArray = arr// 方式二

Function(函数)

在TS中函数也是一种数据类型,可以使用Function来表示一个泛用的函数。

const fn: Function = function (a: number, b: number) {
    return a + b
}

我们可以在函数括号后面增加返回值类型

const fn: Function = function (a: number, b: number): number {
    return a + b
}

箭头函数的写法

const fn: Function = (a: number, b: number): number => {
    return a + b
}

此外,使用另一种函数定义写法可以具象表示函数的参数以及返回值

let fn: (a: number, b: number) => number = null
fn = (a, b) => {
    return a + b
}

参数与返回为空值的写法

let fn: () => void = null
fn = () => { }

Tuple(元组)

元组是一种特殊的数组类型,它允许我们指定数组中每个元素的类型,而且元素的数量是固定的。

元组的定义是使用方括号 [ ] 来定义一个类似数组的数据结构,在括号中使用逗号隔开多个数据类型,比如我现在定义一个数字和字符类型的元组:

const tuple: [number, string] = [0, "张三"]
tuple[0] = 1
tuple[1] = "李四"

注意,元组是特殊的数组,使用push方法给元组添加元素时,会将元组修改为普通数组,即上述代码中tuple变成了Array<string | number>( | 符号表示联合类型,后面文章会讲述,意思是string或number),此时添加的子项只能是字符串或者数字类型,比如

const tuple: [number, string] = [0, "张三"]
tuple.push(1) // 不抛错
tuple.push(false) // 抛错,提示boolean类型不属于number和string

Enum(枚举)

为了定义常量,我们常常使用const关键字,在TS中,我们也能使用一种定义常量的数据类型:枚举,它通常使用一些有限的key值定义对应的value。下面是最简单的一种写法:

enum Color {
    red,
    blue,
    yellow
}
console.log(Color);// { '0': 'red', '1': 'blue', '2': 'yellow', red: 0, blue: 1, yellow: 2 }

我们可以看到上述代码中Color编译后变成了一个对象,key默认从0开始自增,key即是value,value也是key。如何做到这点?我们看以下代码

var Color;
(function (Color) {
    Color[Color["red"] = 0] = "red";
    Color[Color["blue"] = 1] = "blue";
    Color[Color["yellow"] = 2] = "yellow";
})(Color || (Color = {}));
console.log(Color); // { '0': 'red', '1': 'blue', '2': 'yellow', red: 0, blue: 1, yellow: 2 }

这段代码是TS编译后的JS源码,可以看到编译器使用了一种 Color[Color["red"] = 0] = "red" 的写法,将key和value二者互相赋值了

除了上面的基础写法外,枚举还可以手动赋予默认值

数字:

enum Color {
    red = 3,
    blue = 5,
    yellow = 7
}
console.log(Color);// { '3': 'red', '5': 'blue', '7': 'yellow', red: 3, blue: 5, yellow: 7 }

字符串:

enum Color {
    red = "1",
    blue = "2",
    yellow = "3"
}
console.log(Color);// { red: '1', blue: '2', yellow: '3' }

计算类型:

enum Color {
    red = 1,
    blue = red + 1,
    yellow = blue + 1
}
console.log(Color);// { '1': 'red', '2': 'blue', '3': 'yellow', red: 1, blue: 2, yellow: 3 }

二进制计算:

enum Direction {
    Up = 0b1000,
    Down = Up >>> 1,
    Left = Down >>> 1,
    Right = Left >>> 1,
}
console.log(Direction);
/*{
    '1': 'Right',
    '2': 'Left',
    '4': 'Down',
    '8': 'Up',
    Up: 8,
    Down: 4,
    Left: 2,
    Right: 1
}*/

或者

enum Direction {
    Up = 0b1000,
    Down = Up >>> 1,
    Left = Up >>> 2,
    Right = Up >>> 3,
}

异构枚举(不同类型的初始值):

enum Result {
    Fail = 0,
    Success = "success",
}

Object(对象)

此对象与前面提到的object不是一个对象,可以说object包含了Object。在JS中Object代表着所有对象的基类,而在TypeScript中,它可以用作类型注解,表示对象这种数据结构,如

const obj: Object = {
    name: "张三",
    age: 20
}
 
console.log(obj);// { name: '张三', age: 20 }

复杂对象表现方式通常需要使用interface和type来表示,我们放到下篇文章来说

总结

这篇文章讲述了TypeScript中对象类型数据的定义及基本用法,以及阐述了Object和object类型的区别,在使用中TS类型还是有很大的作用的。

感谢你的阅读,希望文章能对你有帮助,期待一起学习共同进步

相关文章
|
6月前
|
JavaScript 前端开发 编译器
TypeScript 中的基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型
TypeScript 中的基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型
74 1
|
2月前
|
JavaScript
typeScript进阶(9)_type类型别名
本文介绍了TypeScript中类型别名的概念和用法。类型别名使用`type`关键字定义,可以为现有类型起一个新的名字,使代码更加清晰易懂。文章通过具体示例展示了如何定义类型别名以及如何在函数中使用类型别名。
39 1
typeScript进阶(9)_type类型别名
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
45 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
44 0
|
2月前
|
JavaScript
typeScript进阶(10)_字符串字面量类型
本文介绍了TypeScript中的字符串字面量类型,这种类型用来限制变量只能是某些特定的字符串字面量。通过使用`type`关键字声明,可以确保变量的值限定在预定义的字符串字面量集合中。文章通过示例代码展示了如何声明和使用字符串字面量类型,并说明了它在函数默认参数中的应用。
36 0
|
2天前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
10 2
|
16天前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。