每天一个前端小知识 Day 4 - TypeScript 核心类型系统与实践
TypeScript 核心类型系统与实践
1. 为什么前端面试中越来越重视 TypeScript？
- 复杂业务场景需要强类型保障稳定性；
- 更好的 IDE 支持和智能提示；
- 降低线上 bug 概率；
- 成熟的工程团队都在使用；
- 对于 React/Vue 项目维护可读性更强。
2. TypeScript 的核心类型
✅ 原始类型
let str: string = 'hello';
let num: number = 123;
let flag: boolean = true;
let u: undefined = undefined;
let n: null = null;
✅ 数组与元组
let arr: number[] = [1, 2, 3];
let tuple: [string, number] = ['Tom', 25];
✅ 枚举（enum）
enum Direction {
Up,
Down,
Left,
Right,
}
✅ any 与 unknown
let a: any = 123; // 可绕过检查（不推荐）
let b: unknown = 'xxx'; // 必须类型断言后使用（推荐）
✅ void 与 never
function log(): void {
console.log('ok');
}
function error(): never {
throw new Error('err');
}
3. 接口（interface）和类型别名（type）
✅ interface
interface Person {
name: string;
age?: number; // 可选属性
}
✅ type
type Point = {
x: number;
y: number;
};
面试常考区别：
interface可被扩展（继承、合并），type更灵活（联合、交叉）- 推荐优先使用
interface定义对象结构
4. 类型推断与类型保护
✅ 类型推断
let name = 'Tom'; // 推断为 string
✅ 类型保护（Type Guards）
function isString(val: unknown): val is string {
return typeof val === 'string';
}
5. 联合类型与交叉类型
✅ 联合类型
let value: string | number;
✅ 交叉类型
type Admin = { role: string };
type User = { name: string };
type AdminUser = Admin & User;
6. 泛型（Generics） 面试高频考点
✅ 定义泛型函数
function identity<T>(arg: T): T {
return arg;
}
✅ 泛型接口/类型
interface Box<T> {
value: T;
}
✅ 约束泛型
function getLength<T extends { length: number }>(val: T) {
return val.length;
}
7. 条件类型（高级类型技巧）
type IsString<T> = T extends string ? true : false;
常见内置工具类型：
| 工具类型 | 作用 |
|---|---|
Partial |
将 T 的所有属性变为可选 |
Readonly |
所有属性只读 |
Pick |
选择部分属性 |
Omit |
排除部分属性 |
Record |
构造键值对类型 |
ReturnType |
提取函数返回类型 |
8. 实战面试题精讲
Q1：type 和 interface 有什么区别？你如何选择？
答：
type更灵活，可表达联合类型、元组、映射类型；interface更适合对象类型定义，支持声明合并；- 实际项目推荐对象结构用
interface，其他用type。
Q2：如何定义一个支持任意键值的接口？
interface AnyObject {
[key: string]: any;
}
Q3：你是否用过泛型？举个例子？
function map<T, U>(arr: T[], fn: (item: T) => U): U[] {
return arr.map(fn);
}
Q4：如何约束泛型必须是数组？
function firstElement<T extends any[]>(arr: T): T[0] {
return arr[0];
}
9. 常见误区 ⚠️
| 误区 | 正确做法 |
|---|---|
认为 any 就是万能解决方案 |
尽量避免 any，推荐使用 unknown 或具体类型 |
用 type 重复定义对象类型 |
使用 interface 更适合扩展性和结构清晰 |
忽略了默认 strict 模式的重要性 |
开启 strict 模式保障类型安全 |
不理解 never 类型的实际意义 |
never 表示永远不会有返回（抛错/死循环） |
✅ 总结
TypeScript 类型系统是前端工程化的根基，尤其在大型项目中提供了强大的类型约束和智能提示。掌握类型定义、泛型、工具类型等核心概念，不仅能写出更稳定的代码，也是中高级前端面试的必答项。