跳到主要内容

TypeScript 基本类型

TypeScript 是 JavaScript 的超集,它通过添加静态类型系统来增强 JavaScript 的功能。TypeScript 的基本类型是构建复杂类型系统的基础。本文将详细介绍 TypeScript 中的基本类型,并通过代码示例和实际案例帮助你理解它们的用法。

什么是基本类型?

在 TypeScript 中,基本类型是指那些可以直接使用的简单数据类型。这些类型包括数字、字符串、布尔值、数组、元组、枚举、任意类型、空值、未定义、空对象、以及 never 类型。这些类型可以帮助你在编写代码时更好地定义变量的数据类型,从而提高代码的可读性和可维护性。

TypeScript 中的基本类型

1. 数字(Number)

TypeScript 中的数字类型与 JavaScript 中的数字类型相同,可以表示整数和浮点数。

typescript
let age: number = 25;
let price: number = 19.99;

2. 字符串(String)

字符串类型用于表示文本数据。你可以使用单引号、双引号或反引号来定义字符串。

typescript
let name: string = "Alice";
let message: string = `Hello, ${name}!`;

3. 布尔值(Boolean)

布尔类型只有两个值:truefalse

typescript
let isActive: boolean = true;
let isCompleted: boolean = false;

4. 数组(Array)

数组类型用于表示一组相同类型的元素。你可以使用两种方式定义数组:

typescript
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];

5. 元组(Tuple)

元组类型允许你表示一个已知元素数量和类型的数组,各元素的类型不必相同。

typescript
let user: [string, number] = ["Alice", 25];

6. 枚举(Enum)

枚举类型用于定义一组命名的常量。

typescript
enum Color {
Red,
Green,
Blue,
}

let color: Color = Color.Green;

7. 任意类型(Any)

任意类型允许你为变量指定任何类型的值。这在你不确定变量类型时非常有用。

typescript
let data: any = "This could be anything";
data = 42;
data = true;

8. 空值(Void)

void 类型表示没有任何类型。通常用于函数没有返回值的情况。

typescript
function logMessage(message: string): void {
console.log(message);
}

9. 未定义(Undefined)和空值(Null)

undefinednull 类型分别表示未定义和空值。

typescript
let u: undefined = undefined;
let n: null = null;

10. 空对象(Object)

object 类型表示非原始类型的值,即不是 numberstringbooleansymbolnullundefined 的值。

typescript
let user: object = { name: "Alice", age: 25 };

11. Never 类型

never 类型表示那些永远不会发生的值的类型。通常用于抛出异常或无限循环的函数。

typescript
function throwError(message: string): never {
throw new Error(message);
}

实际应用场景

场景 1:表单验证

在表单验证中,你可以使用 TypeScript 的基本类型来确保输入的数据类型正确。

typescript
function validateForm(name: string, age: number, isActive: boolean): boolean {
if (name.length > 0 && age > 0 && isActive) {
return true;
}
return false;
}

场景 2:配置对象

在处理配置对象时,你可以使用 object 类型来确保传递的对象符合预期的结构。

typescript
interface Config {
apiUrl: string;
timeout: number;
}

function initializeApp(config: Config): void {
console.log(`Initializing app with API URL: ${config.apiUrl}`);
}

总结

TypeScript 的基本类型是构建复杂类型系统的基础。通过掌握这些基本类型,你可以更好地定义变量的数据类型,从而提高代码的可读性和可维护性。本文介绍了 TypeScript 中的基本类型,并通过代码示例和实际案例帮助你理解它们的用法。

附加资源

练习

  1. 定义一个函数 calculateArea,接受两个参数 widthheight,返回它们的乘积。确保参数和返回值都是 number 类型。
  2. 创建一个枚举 DaysOfWeek,包含一周的七天。然后定义一个变量 today,并将其赋值为 DaysOfWeek.Monday
  3. 编写一个函数 logUserInfo,接受一个对象参数,该对象包含 name(字符串)和 age(数字)属性。函数应打印出用户的信息。

通过完成这些练习,你将更好地掌握 TypeScript 的基本类型。