TypeScript基础类型完全指南(附示例代码)

类型总览

一、boolean类型

boolean类型表示逻辑值，只有两个可能的值：true 和 false。这是最基本的数据类型之一，常用于条件判断和逻辑运算。

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

// 类型推断
let hasPermission = true;  // 推断为boolean类型

// 布尔运算
let result: boolean = isDone && isActive;

扩展：TypeScript支持所有JavaScript的布尔运算符，如 &&、||、!，并且会进行严格的类型检查，确保操作数是布尔值。

二、number类型

number类型表示数值，包括整数和浮点数。TypeScript支持十进制、十六进制、二进制和八进制字面量。

let decimal: number = 42;
let hex: number = 0xFF;        // 十六进制
let binary: number = 0b1010;   // 二进制
let octal: number = 0o744;     // 八进制
let float: number = 3.14;

扩展：TypeScript遵循JavaScript的IEEE 754浮点数标准，所有数字都是浮点数。与JavaScript一样，TypeScript还支持 Number 对象和相关的数值方法，如 toFixed()、toExponential() 等。

三、string类型

string类型表示文本数据，可以使用单引号、双引号或反引号定义。字符串是JavaScript和TypeScript中表示文本的主要方式。

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

扩展 - 模板字符串：TypeScript支持ES6的模板字符串，可以嵌入表达式和多行文本。模板字符串使用反引号定义，通过 ${expression} 语法嵌入表达式。

let user = "Bob";
let score = 95;
let summary = `User: ${user}
Score: ${score}
Grade: ${score >= 90 ? 'A' : 'B'}`;

四、array类型

array类型表示相同类型元素的集合。TypeScript提供了两种定义数组类型的语法：元素类型后接 [] 或使用泛型数组类型。

let list1: number[] = [1, 2, 3];
let list2: Array<string> = ["a", "b", "c"];
let mixed: (string | number)[] = [1, "hello", 2];

扩展：数组在TypeScript中具有完整的类型支持，包括数组方法的类型检查。当尝试向数组中添加错误类型的元素时，TypeScript会在编译时报错。

五、tuple类型

tuple类型表示一个已知元素数量和类型的数组，各元素的类型不必相同。元组在表示固定结构的数据时非常有用。

let person: [string, number] = ["Alice", 25];
let point: [number, number, number] = [10, 20, 30];

扩展：元组在访问超出定义长度的元素时会使用联合类型。元组还支持可选元素和剩余元素，提供了更灵活的数据结构定义方式。

六、enum类型

enum类型是对JavaScript标准数据类型的一个补充，用于定义一组命名常量。枚举类型提供了一种给数值集合赋予友好名称的方式。

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

enum Direction { 
  Up = "UP", 
  Down = "DOWN" 
}

 扩展：枚举支持数字枚举和字符串枚举。数字枚举的值会自动递增，而字符串枚举需要为每个成员初始化。枚举在编译后会生成对应的JavaScript对象。

七、any类型

any类型是TypeScript的类型系统的逃生舱。使用any类型可以绕过类型检查，允许变量持有任意类型的值。

let uncertain: any = "hello";
uncertain = 42;
uncertain = true;
uncertain.nonExistentMethod(); // 编译时不会报错

注意事项：any类型会完全绕过TypeScript的类型检查，应该谨慎使用。过度使用any会失去TypeScript的类型安全优势。

any vs unknown区别：

• any：完全绕过类型检查，可以任意操作

• unknown：类型安全，需要类型检查后才能操作

let anyValue: any = "hello";
anyValue.toFixed(); // 编译通过，运行时可能出错

let unknownValue: unknown = "hello";
// unknownValue.toFixed(); // 编译错误：需要类型检查

八、unknown类型

unknown类型是TypeScript 3.0引入的类型安全的any替代品。它表示未知类型的值，在进行类型检查之前不能对其进行任何操作。

let value: unknown = "hello";

// 需要类型检查后才能使用
if (typeof value === "string") {
  console.log(value.toUpperCase());
}

扩展：unknown类型强制开发者进行显式的类型检查，这比any更安全。在处理来自外部源（如API响应）的数据时，unknown是更好的选择。

九、void类型

void类型表示没有任何类型，通常用于函数没有返回值的情况。声明为void类型的变量只能赋值为undefined或null。

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

let unusable: void = undefined;

void vs undefined：void表示没有类型，主要用于函数返回值；undefined是一个具体的类型，表示未定义的值。void类型的变量可以赋值为undefined，但undefined类型的变量不能赋值为void。

let u: undefined = undefined;
let v: void = undefined;
// v = u; // 错误：不能将undefined分配给void

扩展：默认情况下，null和undefined是所有其他类型的子类型，可以赋值给其他类型。但在开启 --strictNullChecks 标志后，null和undefined只能赋值给any和它们各自的类型。

十一、never类型

never类型表示那些永不存在的值的类型。例如，never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式的返回值类型。

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

function infiniteLoop(): never {
  while (true) {}
}

扩展：never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身）。在联合类型中，never类型会被自动移除。

十二、object类型

object类型表示非原始类型，即不是number、string、boolean、symbol、null或undefined的类型。它用于表示对象、数组、函数等。

let obj: object = { name: "Alice" };
let arr: object = [1, 2, 3];
let func: object = function() {};

扩展：使用object类型通常过于宽泛，更好的做法是使用接口或类型别名来定义具体的对象形状。object类型主要用于表示"非原始值"的通用概念。

十三、类型断言

类型断言类似于其他语言中的类型转换，但不进行特殊的数据检查或解构。它告诉TypeScript你比它更了解某个值的类型。

let someValue: any = "hello world";
let strLength1: number = (someValue as string).length;
let strLength2: number = (<string>someValue).length;

扩展：TypeScript支持两种形式的类型断言：尖括号语法和as语法。在JSX中只能使用as语法。类型断言不会影响运行时行为，只在编译阶段起作用。

类型系统特性总结

1. 类型推断

TypeScript能够根据上下文自动推断变量的类型：

let x = 3;                    // 推断为number
let y = "hello";              // 推断为string
let z = [1, 2, 3];            // 推断为number[]

2. 类型兼容性

TypeScript使用结构化类型系统，基于类型的形状进行检查：

interface Named {
  name: string;
}

let x: Named;
let y = { name: "Alice", age: 25 };
x = y; // 兼容，因为y具有name属性

3. 类型操作

TypeScript提供了丰富的类型操作符：

// 联合类型
let id: string | number;

// 交叉类型
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;

// 类型查询
let s = "hello";
let n: typeof s; // string类型

实践建议

1. 避免过度使用any：优先使用unknown或具体的类型

2. 利用类型推断：在明显的情况下让TypeScript推断类型

3. 使用严格的null检查：开启 --strictNullChecks 避免意外的null/undefined错误

4. 优先使用接口：对于对象形状，接口比类型别名更易扩展

5. 合理使用类型断言：只在确信类型正确时使用类型断言

掌握这些基础类型是使用TypeScript的关键第一步，它们构成了TypeScript强大类型系统的基础。

到此这篇关于TypeScript基础类型完全指南的文章就介绍到这了,更多相关TS基础类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！