2.2 TypeScript中的基本类型 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

2.2 TypeScript中的基本类型

在TypeScript的世界里，类型系统是其强大特性的核心之一，它不仅帮助开发者在编写代码时捕获潜在的错误，还提升了代码的可读性和可维护性。本章我们将深入探讨TypeScript中的基本类型，这些类型构成了TypeScript类型系统的基石。

2.2.1 布尔类型（Boolean）

布尔类型是TypeScript中最基础的数据类型之一，用于表示逻辑上的真（true）或假（false）。在TypeScript中声明布尔类型的变量非常直接：

let isDone: boolean = false;
let canProceed: boolean = true;

布尔类型在条件语句（如if-else、while循环等）中扮演着至关重要的角色，因为它们直接对应着逻辑上的真或假。

2.2.2 数字类型（Number）

数字类型在TypeScript中用于表示所有类型的数字，无论是整数还是浮点数。与JavaScript类似，TypeScript中的所有数字都是浮点数，即使它们看起来像是整数。

let age: number = 30;
let pi: number = 3.14;
let hex: number = 0xf00d; // 十六进制
let binary: number = 0b1010; // 二进制（ES6+特性，TypeScript支持）
let octal: number = 0o744; // 八进制（ES6+特性，TypeScript支持）

TypeScript还允许使用科学记数法来表示数字：

let bigNumber: number = 1.23e+34;
let smallNumber: number = 5.67e-32;

2.2.3 字符串类型（String）

字符串类型用于表示文本数据。在TypeScript中，你可以使用单引号（’）、双引号（”）或模板字符串（使用反引号`）来定义字符串。

let greeting: string = 'Hello, world!';
let name: string = "Alice";
let multiLineString: string = `This is a multi-line
string example.`;

模板字符串不仅可以跨越多行，还可以嵌入表达式，这些表达式会被计算结果并转换成字符串：

let name: string = 'TypeScript';
let message: string = `Hello, ${name}!`;
console.log(message); // 输出: Hello, TypeScript!

2.2.4 数组类型（Array）

数组类型用于表示一组有序的值。在TypeScript中，你可以通过两种方式来定义数组类型：使用数组泛型（推荐方式）或使用类型注解与索引签名。

使用数组泛型：

let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ['a', 'b', 'c'];

使用类型注解与索引签名（不常用，主要用于更复杂的数组类型定义）：

let list: Array<number> = [1, 2, 3];
// 或者
let list: { [index: number]: number } = [1, 2, 3]; // 这种方式更复杂，不常用

2.2.5 元组类型（Tuple）

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。元组类型常用于表示固定长度的数据结构，如坐标点、颜色值（RGBA）等。

let point: [number, number] = [10, 20];
console.log(point[0]); // 输出: 10
console.log(point[1]); // 输出: 20
// 访问越界的元素时，TypeScript会报错（如果开启了严格模式）
// console.log(point[2]); // TypeScript 错误：元组类型 '[number, number]' 中不存在索引 2 的元素。
// 元组也可以定义不同类型的元素
let color: [string, number, number, number] = ['red', 255, 0, 0];

2.2.6 枚举类型（Enum）

枚举类型是一种特殊的类，它允许开发者定义一组命名的常量。使用枚举可以让代码更加清晰易读，特别是当需要处理一组固定的常量值时。

enum Direction {
    Up,
    Down,
    Left,
    Right,
}
let direction: Direction = Direction.Up;
console.log(direction); // 输出数字 0，因为Up是第一个枚举成员
// 也可以手动指定枚举成员的数值
enum Color {
    Red = 1,
    Green,
    Blue = 3,
    // 注意：Green会被自动赋值为2
}
let myColor: Color = Color.Green;
console.log(myColor); // 输出 2

2.2.7 任意类型（Any）

任意类型（Any）用于表示可以是任何类型的值。当你不知道一个变量的具体类型，或者不想在编译时进行类型检查时，可以使用任意类型。但是，过度使用任意类型会失去TypeScript提供的大部分优势，因此建议谨慎使用。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 可以是任何类型
// 当你只知道部分类型信息时，可以使用联合类型或类型守卫等特性，而不是直接使用any

2.2.8 空值（Void）

在TypeScript中，void类型表示没有任何类型。它通常用于表示函数没有返回值。

function warnUser(): void {
    console.log('This is a warning');
}
// 返回值类型为void的函数不能返回除undefined或null之外的任何值
// 如果尝试返回其他值，TypeScript编译器会报错
// function warnUser(): void {
//     return true; // TypeScript 错误：不能将类型 'boolean' 分配给类型 'void'。
// }

2.2.9 Null 和 Undefined

在TypeScript中，null和undefined都有它们各自的类型，分别是null和undefined。默认情况下，TypeScript中的变量可以自动赋值为undefined（如果未初始化），但在严格模式下（--strictNullChecks），需要显式地处理null和undefined，以避免潜在的错误。

let u: undefined = undefined;
let n: null = null;
// 在严格模式下，必须显式处理null和undefined
// function processValue(value: number | undefined) {
//     console.log(value.toFixed()); // TypeScript 错误：'value' 可能是 'undefined'。
// }
// 需要进行类型检查或使用非空断言操作符
function processValue(value: number | undefined) {
    if (value !== undefined) {
        console.log(value.toFixed());
    }
    // 或者使用非空断言操作符（谨慎使用）
    // console.log(value!.toFixed()); // !操作符告诉TypeScript编译器，开发者确信value不是null或undefined
}

2.2.10 Never 类型

never类型是TypeScript中一种特殊的类型，表示那些永不存在的值的类型。它通常用于表示那些总是抛出异常或根本不会有返回值的函数。

// 抛出异常的函数
function error(message: string): never {
    throw new Error(message);
}
// 无限循环的函数
function infiniteLoop(): never {
    while (true) {
        // do nothing
    }
}
// 永不返回值的函数
function alwaysThrows(): never {
    return error("Something bad happened");
}

结语

通过本章的学习，我们深入了解了TypeScript中的基本类型，包括布尔类型、数字类型、字符串类型、数组类型、元组类型、枚举类型、任意类型、空值、null和undefined以及never类型。这些基本类型是构建更复杂TypeScript程序的基础，掌握它们对于深入理解TypeScript的类型系统至关重要。在接下来的章节中，我们将继续探索TypeScript的高级特性，如接口、类、泛型等，以进一步提升我们的TypeScript编程能力。