第二章 TypeScript 基础类型

目录一、类型注解二、原始类型三、数组类型四、类型别名type五、函数类型1. 参数与返回值类型2. 函数表达式类型3. void 和 never六、对象类型1. 对象类型注解2. 可选属性七、接口interface八、接口继承九、元组Tuple十、类型推论十一、类型断言十二、字面量类型与联合类型十三、枚举enum十四、any 类型十五、typeof 操作符类型查询本文介绍了TypeScript的核心类型系统包括1. 基础类型注解和原始类型(number/string/boolean等)2. 数组和元组的定义方式3. 类型别名(type)与接口(interface)的区别4. 函数参数类型、返回值类型和特殊类型(void/never)5. 对象类型和可选属性6. 类型推论与类型断言7. 字面量类型、联合类型和枚举8. any与unknown类型的区别9. typeof类型查询。文章通过代码示例详细说明了各种类型的使用场景和最佳实践帮助开发者掌握TypeScript的类型系统。一、类型注解类型注解是冒号:后面跟类型用于约束变量、参数、返回值。let age: number 18; let name: string Alice; let isLoading: boolean false;二、原始类型TypeScript 支持以下原始类型number整数、浮点数、NaN、Infinitystring文本booleantrue/falsenull和undefined它们本身也是类型symbol唯一值bigint大整数ES2020let a: null null; let b: undefined undefined; let c: symbol Symbol(id); let d: bigint 100n;三、数组类型// 推荐写法 let numbers: number[] [1, 2, 3]; // 泛型写法 let strings: Arraystring [a, b]; // 只读数组 let readonly: readonly number[] [1, 2, 3]; // readonly[0] 10; // ❌ 错误 // 联合类型数组 let arr: (number | string)[] [1, a, 2];四、类型别名type类型别名可以为任意类型起个新名字便于复用。type ID number | string; type User { name: string; age: number }; let userId: ID 123; let user: User { name: 张三, age: 18 };五、函数类型1. 参数与返回值类型function add(a: number, b: number): number { return a b; } // 可选参数 function greet(name: string, age?: number): string { return Hello ${name}; } // 默认参数 function greet(name: string, age: number 18): string { return Hello ${name}, you are ${age}; } // 剩余参数 function sum(...nums: number[]): number { return nums.reduce((a, b) a b, 0); }2. 函数表达式类型const add: (a: number, b: number) number (a, b) a b;3. void 和 nevervoid函数没有返回值可以返回 undefinednever函数永远不会返回抛出异常或无限循环function log(message: string): void { console.log(message); } function throwError(msg: string): never { throw new Error(msg); }六、对象类型1. 对象类型注解let person: { name: string; age: number; sayHi(): void; } { name: 张三, age: 18, sayHi() { console.log(hi); }, };2. 可选属性function request(config: { url: string; method?: string }) {}七、接口interface接口主要用于定义对象的结构可以被继承和实现。interface Person { name: string; age: number; } let p: Person { name: 张三, age: 18 };接口 vs 类型别名特性interfacetype描述对象✅✅描述原始类型❌✅描述联合类型❌✅继承extends 交叉同名合并✅❌八、接口继承interface Point2D { x: number; y: number; } interface Point3D extends Point2D { z: number; }九、元组Tuple元组是固定长度、每个位置类型固定的数组。let position: [number, number] [39.9042, 116.4074]; let user: [string, number] [张三, 18];元组的可选元素和剩余元素type OptionalTuple [string, number?]; let a: OptionalTuple [a]; // ✅ let b: OptionalTuple [a, 1]; // ✅ type RestTuple [string, ...number[]]; let c: RestTuple [a, 1, 2, 3]; // ✅十、类型推论TypeScript 能根据上下文自动推断类型不需要显式标注。let age 18; // 类型为 number const name Tom; // 类型为 Tom字面量类型 function add(a: number, b: number) { return a b; // 返回类型推断为 number }十一、类型断言当你比 TS 更了解某个值的类型时可以使用类型断言“告诉”编译器。const link document.getElementById(link) as HTMLAnchorElement; link.href https://example.com; // 另一种写法不推荐容易与 JSX 冲突 const link HTMLAnchorElementdocument.getElementById(link);十二、字面量类型与联合类型字面量类型是指具体的值字符串、数字、布尔作为类型。let direction: up | down | left | right; direction up; // ✅ direction north; // ❌字面量类型通常与联合类型配合实现类似枚举的效果且更轻量。十三、枚举enum枚举是一组命名常量默认从 0 开始自增。enum Direction { Up 1, Down, Left, Right, } function move(dir: Direction) {} move(Direction.Up);注意枚举在编译后会生成对象会带来额外的代码因此推荐使用字面量联合类型代替。type Direction up | down | left | right;十四、any 类型any会关闭类型检查应尽量避免。let value: any 10; value string; value.toUpperCase(); // 不会报错但可能运行时出错替代方案unknown类型更安全使用前需要进行类型收窄。let value: unknown hello; if (typeof value string) { console.log(value.toUpperCase()); }十五、typeof 操作符类型查询在类型上下文中typeof可以获取变量或属性的类型。let p { x: 1, y: 2 }; type Point typeof p; // { x: number; y: number }