TypeScript 基本类型详解:Boolean、Number、String、Array、Enum、Any 与 Void

作者:木棉时间:2026-10-29 11:31:50浏览:625

本文系统介绍 TypeScript 中的 7 种基本类型。涵盖布尔值、数字、字符串的基础声明,数组的两种定义方式,枚举类型的值映射与反向查找特性,any 类型的动态赋值及其对类型检查的影响,以及 void 类型在函数返回值中的应用。通过具体代码示例,帮助开发者快速掌握 TypeScript 类型系统的核心概念。

TypeScript 基本类型概览

TypeScript 提供了 7 种基础数据类型,掌握它们是编写类型安全代码的前提。

布尔值(boolean)

1、boolean(布尔值)

示例代码如下:

var isDone: boolean = false;

数字(number)

2、number(数字)

该类型对应 JavaScript 中的数值概念。在 JavaScript 底层实现中,无论是整数还是浮点数,均统一以双精度浮点格式存储。

示例代码如下:

var height: number = 6;

字符串(string)

3、string(字符串)

用于表示文本数据。与 JavaScript 语法一致,字符串可以使用双引号(")或单引号(')包裹定义。

示例代码如下:

var name: string = "bob";
name = 'smith';

数组(array)

4、array(数组)

TypeScript 支持两种声明数组类型的方式。

① 使用方括号后缀语法:

示例代码如下:

var list: number[] = [1, 2, 3];

② 使用泛型数组类型语法:

示例代码如下:

var list: Array<number> = [1, 2, 3];

这两种写法在功能上完全等价,但为了保持代码风格的一致性,建议在实际项目中统一采用其中一种方式。

枚举(enum)

5、enum(枚举)

枚举是 TypeScript 引入的新类型,JavaScript 原生并不支持此概念。

示例代码如下:

enum Color {
Red,
Green,
Blue
};
var c: Color = Color.Green;

与 C# 语言类似,若未显式指定首项的值,则默认从 0 开始递增。例如上例中 Red 为 0,Green 为 1,Blue 为 2。

示例代码如下:

enum Color {
Red = 1,
Green,
Blue
};
var c: Color = Color.Green;

此时 Red 的值为 1,后续项依次递增,即 Green 为 2,Blue 为 3。

当然,也可以为枚举中的每个成员单独指定具体的数值。

示例代码如下:

enum Color {
Red = 1,
Green = 2,
Blue = 4
};
var c: Color = Color.Green;

枚举类型还具备一个特殊功能:通过数值反向查找对应的枚举成员名称。即使该数值未在枚举定义中显式声明,也能通过索引获取。

示例代码如下:

enum Color {
Red = 1,
Green,
Blue
};
var colorName: string = Color[2];
alert(colorName);
colorName = Color[4];
alert(colorName);

执行上述代码将分别输出 "Green" 和 "undefined"。因为 Green 对应的值为 2,而数值 4 没有对应的枚举成员定义,因此返回 undefined。

任意类型(any)

6、any(任意类型)

该类型类似于 JavaScript 中变量的默认行为,允许赋值任意类型的值,具有动态性。例如:

示例代码如下:

var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

一旦将变量声明为 any 类型,将失去 TypeScript 的静态类型检查优势,其行为等同于编写普通 JavaScript 代码。

值得注意的是,any 类型可以与数组结合使用,创建包含多种类型元素的数组:

示例代码如下:

var list: any[] = [1, true, "free"];
list[1] = 100;

空值(void)

7、void(空值)

void 类型主要用于函数返回值声明,表示该函数不返回任何有效值。

示例代码如下:

function warnUser(): void {
alert("This is my warning message");
}

以上即为 TypeScript 基本类型的完整介绍,希望这些内容能帮助您更好地理解类型系统。

作者最新文章
相关文章
更多