⚡ JavaScript - TYPESCRIPT

What are the differences between TypeScript and JavaScript?

• 考察点：对 TypeScript 基本概念和语言特性的理解。

答案：

TypeScript 是 JavaScript 的超集，在 JavaScript 基础上增加了静态类型检查系统。主要区别体现在类型系统、编译时检查、开发体验和代码质量保证等方面。

主要区别：

1. 类型系统：

   // JavaScript - 动态类型，运行时确定
   let name = "张三";
   name = 123; // 运行时才发现问题
   
   // TypeScript - 静态类型，编译时检查
   let name: string = "张三";
   name = 123; // 编译时就会报错
   

2. 编译过程：

   • JavaScript：直接由浏览器或 Node.js 解释执行
   • TypeScript：需要先编译成 JavaScript 再执行

3. 错误检测：

   // TypeScript 能在编译时发现错误
   function greet(person: { name: string, age: number }) {
     return `Hello ${person.name}`;
   }
   
   greet({ name: "李四" }); // Error: Property 'age' is missing
   

开发优势：

• 更好的 IDE 支持（智能提示、重构、导航）
• 编译时错误检测，减少运行时错误
• 更好的代码可维护性和可读性
• 支持最新的 JavaScript 特性
• 渐进式采用，可与现有 JavaScript 代码混用

What are the basic data types in TypeScript?

• 考察点：对 TypeScript 类型系统基础的掌握程度。

答案：

TypeScript 的基本数据类型包括 JavaScript 原有类型和 TypeScript 特有类型，提供了完整的类型约束能力。

基本类型：

1. 原始类型：

   // 数字类型
   let age: number = 25;
   let price: number = 99.99;
   
   // 字符串类型
   let name: string = "张三";
   let template: string = `Hello, ${name}`;
   
   // 布尔类型
   let isActive: boolean = true;
   let isCompleted: boolean = false;
   

2. 空值类型：

   // undefined 和 null
   let u: undefined = undefined;
   let n: null = null;
   
   // void - 通常用于函数无返回值
   function logMessage(): void {
     console.log("Hello");
   }
   

3. TypeScript 特有类型：

   // any - 任意类型，失去类型检查
   let anything: any = 42;
   anything = "hello";
   anything = true;
   
   // unknown - 安全的 any
   let userInput: unknown;
   if (typeof userInput === "string") {
     console.log(userInput.toUpperCase()); // 需要类型检查
   }
   
   // never - 永不存在的值的类型
   function error(): never {
     throw new Error("Something went wrong");
   }
   

4. 复合类型：

   // 数组
   let numbers: number[] = [1, 2, 3];
   let strings: Array<string> = ["a", "b", "c"];
   
   // 元组
   let tuple: [string, number] = ["hello", 42];
   
   // 对象
   let user: { name: string; age: number } = {
     name: "李四",
     age: 30
   };
   

What are type annotations? How to use them?

• 考察点：类型声明语法与实际应用。

答案：

类型注解是 TypeScript 中显式指定变量、函数参数、返回值等的类型的语法。通过在变量名后使用冒号 : 加类型名的方式来声明类型。

基本语法：

1. 变量类型注解：

   // 基本变量类型注解
   let userName: string = "张三";
   let userAge: number = 25;
   let isActive: boolean = true;
   
   // 可以省略初始值
   let email: string;
   email = "[email protected]";
   

2. 函数类型注解：

   // 参数和返回值类型注解
   function add(a: number, b: number): number {
     return a + b;
   }
   
   // 箭头函数类型注解
   const multiply = (x: number, y: number): number => x * y;
   
   // 可选参数
   function greet(name: string, title?: string): string {
     return title ? `Hello, ${title} ${name}` : `Hello, ${name}`;
   }
   

3. 对象类型注解：

   // 对象类型注解
   let user: {
     id: number;
     name: string;
     email?: string;  // 可选属性
   } = {
     id: 1,
     name: "李四"
   };
   
   // 函数作为对象属性
   let calculator: {
     add: (a: number, b: number) => number;
     subtract: (a: number, b: number) => number;
   } = {
     add: (a, b) => a + b,
     subtract: (a, b) => a - b
   };
   

使用场景：

• 提高代码可读性和维护性
• 在编译时捕获类型错误
• 提供更好的 IDE 智能提示
• 约束函数参数和返回值类型
• 确保对象属性的类型安全

What is type inference?

• 考察点：类型推断机制理解。

答案：

类型推断是 TypeScript 编译器根据代码上下文自动推断变量类型的能力，无需显式类型注解就能确定类型。这让代码更简洁的同时保持类型安全。

推断规则：

1. 初始化推断：

   // TypeScript 自动推断类型
   let name = "张三";        // 推断为 string
   let age = 25;            // 推断为 number
   let isActive = true;     // 推断为 boolean
   
   // 等价于显式注解
   let name: string = "张三";
   let age: number = 25;
   let isActive: boolean = true;
   

2. 函数返回值推断：

   // 返回值类型自动推断
   function add(a: number, b: number) {
     return a + b;  // 推断返回值为 number
   }
   
   function getUser() {
     return {
       id: 1,
       name: "李四",
       age: 30
     };  // 推断返回值为 { id: number; name: string; age: number }
   }
   

3. 数组类型推断：

   // 数组元素类型推断
   let numbers = [1, 2, 3];           // 推断为 number[]
   let mixed = [1, "hello", true];    // 推断为 (string | number | boolean)[]
   let users = [
     { name: "张三", age: 25 },
     { name: "李四", age: 30 }
   ];  // 推断为 { name: string; age: number }[]
   

4. 上下文推断：

   // 基于上下文推断参数类型
   const numbers = [1, 2, 3];
   numbers.map(num => num.toString()); // num 推断为 number
   
   // 事件处理中的推断
   button.addEventListener('click', (event) => {
     // event 推断为 MouseEvent
     console.log(event.clientX);
   });
   

推断优势：

• 减少冗余的类型注解
• 保持代码简洁性
• 自动适应类型变化
• 提供类型安全保证
• 在复杂场景下仍能准确推断

What is an interface? How to define and use it?

• 考察点：接口概念与面向对象抽象能力。

答案：

接口（interface）是 TypeScript 中定义对象结构的方式，用于约束对象的形状。它只描述类型结构，不包含实现，是实现类型契约和代码规范的重要工具。

基本定义与使用：

1. 基础接口：

   // 定义用户接口
   interface User {
     id: number;
     name: string;
     email: string;
   }
   
   // 使用接口约束对象
   const user: User = {
     id: 1,
     name: "张三",
     email: "[email protected]"
   };
   

2. 可选属性和只读属性：

   interface Product {
     readonly id: number;     // 只读属性
     name: string;
     price: number;
     description?: string;    // 可选属性
   }
   
   const product: Product = {
     id: 1,
     name: "笔记本电脑",
     price: 5999
     // description 可选，可以不提供
   };
   
   // product.id = 2;  // 错误：无法修改只读属性
   

3. 函数接口：

   // 定义函数类型接口
   interface Calculator {
     (a: number, b: number): number;
   }
   
   const add: Calculator = (x, y) => x + y;
   const multiply: Calculator = (x, y) => x * y;
   
   // 包含方法的接口
   interface MathOperations {
     add(a: number, b: number): number;
     subtract(a: number, b: number): number;
   }
   

4. 接口继承：

   interface Animal {
     name: string;
     age: number;
   }
   
   interface Dog extends Animal {
     breed: string;
     bark(): void;
   }
   
   const myDog: Dog = {
     name: "旺财",
     age: 3,
     breed: "金毛",
     bark() {
       console.log("汪汪汪！");
     }
   };
   

应用场景：

• 约束对象结构和API响应格式
• 定义组件props类型
• 设计函数参数接口
• 实现代码规范和类型安全
• 支持接口继承和组合

How to use optional chaining operator (?.) and nullish coalescing operator (??) in TypeScript?

• 考察点：安全访问语法与实际应用。

答案：

可选链操作符（?.）和空值合并操作符（??）是 TypeScript 提供的安全访问语法，用于处理可能为 null 或 undefined 的值，避免运行时错误。

可选链操作符（?.）：

1. 对象属性访问：

   interface User {
     name: string;
     profile?: {
       avatar?: string;
       address?: {
         city: string;
         street?: string;
       };
     };
   }
   
   const user: User = { name: "张三" };
   
   // 传统方式 - 容易出错
   // const avatar = user.profile.avatar; // 运行时错误
   
   // 使用可选链 - 安全访问
   const avatar = user.profile?.avatar;           // undefined
   const city = user.profile?.address?.city;     // undefined
   const street = user.profile?.address?.street; // undefined
   

2. 方法调用：

   interface Api {
     getData?: () => Promise<any>;
     utils?: {
       format?: (data: any) => string;
     };
   }
   
   const api: Api = {};
   
   // 安全的方法调用
   const data = await api.getData?.();              // undefined
   const formatted = api.utils?.format?.(data);    // undefined
   

3. 数组访问：

   const users: User[] | undefined = getUsers();
   
   // 安全的数组访问
   const firstUser = users?.[0];
   const firstName = users?.[0]?.name;
   

空值合并操作符（??）：

1. 基本用法：

   // 只有当左侧为 null 或 undefined 时才使用右侧值
   const username = user.name ?? "匿名用户";
   const port = process.env.PORT ?? 3000;
   const config = savedConfig ?? defaultConfig;
   
   // 与 || 的区别
   const count1 = 0 || 10;    // 10 (0 被认为是假值)
   const count2 = 0 ?? 10;    // 0  (0 不是 null/undefined)
   

2. 结合使用：

   // 可选链 + 空值合并的组合
   const userCity = user.profile?.address?.city ?? "未知城市";
   const avatar = user.profile?.avatar ?? "/default-avatar.png";
   
   // 复杂对象的安全访问和默认值
   const theme = config?.ui?.theme ?? "light";
   const apiUrl = settings?.api?.baseUrl ?? "https://api.example.com";
   

实际应用场景：

• API 响应数据的安全访问
• 配置对象的属性读取
• 组件 props 的默认值处理
• 深层嵌套对象的安全操作
• 避免"Cannot read property of undefined"错误

What is enum in TypeScript?

• 考察点：枚举类型理解与使用场景。

答案：

枚举（enum）是 TypeScript 提供的一种数据类型，用于定义一组命名的常量。它让代码更具可读性和维护性，常用于表示状态、类型、配置等固定的值集合。

枚举类型：

1. 数字枚举：

   // 默认从 0 开始递增
   enum Direction {
     Up,     // 0
     Down,   // 1
     Left,   // 2
     Right   // 3
   }
   
   // 自定义起始值
   enum Status {
     Pending = 1,    // 1
     Processing,     // 2
     Completed,      // 3
     Failed         // 4
   }
   
   // 使用枚举
   const currentDirection = Direction.Up;
   const orderStatus = Status.Processing;
   
   console.log(currentDirection); // 0
   console.log(Status.Completed); // 3
   

2. 字符串枚举：

   enum Color {
     Red = "red",
     Green = "green",
     Blue = "blue"
   }
   
   enum ApiEndpoint {
     Users = "/api/users",
     Products = "/api/products",
     Orders = "/api/orders"
   }
   
   // 使用字符串枚举
   const userColor = Color.Red;        // "red"
   const endpoint = ApiEndpoint.Users; // "/api/users"
   

3. 异构枚举（混合类型）：

   enum Mixed {
     No = 0,
     Yes = "YES"
   }
   
   // 不推荐使用，容易混淆
   

4. 常量枚举（const enum）：

   const enum Theme {
     Light = "light",
     Dark = "dark"
   }
   
   // 编译时会被内联，不会生成额外代码
   const currentTheme = Theme.Dark; // 编译后直接是 "dark"
   

实际应用：

// HTTP 状态码
enum HttpStatus {
  OK = 200,
  NotFound = 404,
  InternalServerError = 500
}

// 用户角色
enum UserRole {
  Admin = "admin",
  User = "user",
  Guest = "guest"
}

// 在函数中使用
function handleResponse(status: HttpStatus) {
  switch (status) {
    case HttpStatus.OK:
      return "请求成功";
    case HttpStatus.NotFound:
      return "资源未找到";
    default:
      return "未知错误";
  }
}

// 检查用户权限
function checkPermission(role: UserRole): boolean {
  return role === UserRole.Admin;
}

使用场景：

• 定义状态码和错误码
• 表示用户角色和权限
• 配置选项和设置
• API 接口的固定参数
• 替代魔法数字和字符串

How does TypeScript define arrays and tuples?

• 考察点：数组与元组类型区别和应用。

答案：

TypeScript 提供了数组（Array）和元组（Tuple）两种集合类型。数组是相同类型元素的集合，元组是固定长度和类型的有序列表。

数组定义：

1. 基础数组类型：

   // 两种声明方式
   let numbers1: number[] = [1, 2, 3, 4, 5];
   let numbers2: Array<number> = [1, 2, 3, 4, 5];
   
   let names: string[] = ["张三", "李四", "王五"];
   let flags: boolean[] = [true, false, true];
   
   // 混合类型数组（联合类型）
   let mixed: (string | number)[] = [1, "hello", 2, "world"];
   

2. 对象数组：

   interface User {
     id: number;
     name: string;
   }
   
   let users: User[] = [
     { id: 1, name: "张三" },
     { id: 2, name: "李四" }
   ];
   
   // 或使用 Array<T> 语法
   let products: Array<{ name: string; price: number }> = [
     { name: "笔记本", price: 5999 },
     { name: "手机", price: 3999 }
   ];
   

元组定义：

1. 基础元组：

   // 固定长度和类型的数组
   let point: [number, number] = [10, 20];
   let user: [string, number, boolean] = ["张三", 25, true];
   
   // 访问元组元素
   console.log(point[0]); // 10 (number)
   console.log(user[1]);  // 25 (number)
   
   // 解构赋值
   const [x, y] = point;
   const [name, age, isActive] = user;
   

2. 可选元素和剩余元素：

   // 可选元素
   let optional: [string, number?] = ["hello"];        // 第二个元素可选
   let optional2: [string, number?] = ["hello", 42];
   
   // 剩余元素
   let rest: [string, ...number[]] = ["prefix", 1, 2, 3, 4];
   
   // 命名元组（TypeScript 4.0+）
   type Point3D = [x: number, y: number, z: number];
   let position: Point3D = [10, 20, 30];
   

3. 只读元组：

   // 只读元组
   let readonlyTuple: readonly [number, string] = [1, "hello"];
   // readonlyTuple[0] = 2; // 错误：无法修改只读元组
   
   // 只读数组
   let readonlyArray: readonly number[] = [1, 2, 3];
   // readonlyArray.push(4); // 错误：只读数组不能修改
   

实际应用场景：

// 坐标点
type Coordinate = [number, number];
const origin: Coordinate = [0, 0];

// 函数返回多个值
function getNameAndAge(): [string, number] {
  return ["张三", 25];
}

const [userName, userAge] = getNameAndAge();

// 状态管理（类似 React useState）
type State<T> = [T, (value: T) => void];

function useState<T>(initial: T): State<T> {
  let state = initial;
  const setState = (value: T) => { state = value; };
  return [state, setState];
}

// 键值对
type KeyValue = [string, any];
const config: KeyValue[] = [
  ["theme", "dark"],
  ["language", "zh-CN"],
  ["debug", true]
];

数组 vs 元组的区别：

• 数组：长度可变，元素类型统一
• 元组：长度固定，每个位置类型可以不同
• 数组：适合存储同类型的集合数据
• 元组：适合存储结构化的异构数据

What are Union Types and Intersection Types?

• 考察点：复合类型理解与实际应用。

答案：

联合类型和交叉类型是 TypeScript 中组合多个类型的方式。联合类型表示"或"的关系（A 或 B），交叉类型表示"和"的关系（A 和 B）。

联合类型（Union Types）：

1. 基础联合类型：

   // 使用 | 操作符定义联合类型
   let value: string | number;
   value = "hello";    // 有效
   value = 42;         // 有效
   // value = true;    // 错误：boolean 不在联合类型中
   
   // 函数参数的联合类型
   function formatValue(input: string | number): string {
     if (typeof input === "string") {
       return input.toUpperCase();
     }
     return input.toString();
   }
   
   console.log(formatValue("hello")); // "HELLO"
   console.log(formatValue(123));     // "123"
   

2. 对象联合类型：

   interface Cat {
     type: "cat";
     meow(): void;
   }
   
   interface Dog {
     type: "dog";
     bark(): void;
   }
   
   type Pet = Cat | Dog;
   
   function handlePet(pet: Pet) {
     // 使用判别联合类型
     switch (pet.type) {
       case "cat":
         pet.meow(); // TypeScript 知道这是 Cat
         break;
       case "dog":
         pet.bark(); // TypeScript 知道这是 Dog
         break;
     }
   }
   

3. 字面量联合类型：

   // 字符串字面量联合
   type Theme = "light" | "dark" | "auto";
   type Size = "small" | "medium" | "large";
   
   let currentTheme: Theme = "dark";        // 有效
   // let invalidTheme: Theme = "blue";     // 错误
   
   // 数字字面量联合
   type HttpStatus = 200 | 404 | 500;
   
   function handleStatus(status: HttpStatus) {
     switch (status) {
       case 200:
         return "成功";
       case 404:
         return "未找到";
       case 500:
         return "服务器错误";
     }
   }
   

交叉类型（Intersection Types）：

1. 基础交叉类型：

   // 使用 & 操作符定义交叉类型
   interface Person {
     name: string;
     age: number;
   }
   
   interface Employee {
     employeeId: string;
     department: string;
   }
   
   // 交叉类型包含两个接口的所有属性
   type PersonEmployee = Person & Employee;
   
   const worker: PersonEmployee = {
     name: "张三",
     age: 30,
     employeeId: "EMP001",
     department: "开发部"
   };
   

2. Mixin 模式：

   interface Timestamped {
     timestamp: Date;
   }
   
   interface Tagged {
     tags: string[];
   }
   
   // 组合多个能力
   type BlogPost = {
     title: string;
     content: string;
   } & Timestamped & Tagged;
   
   const post: BlogPost = {
     title: "TypeScript 学习",
     content: "今天学习了联合类型和交叉类型",
     timestamp: new Date(),
     tags: ["TypeScript", "编程"]
   };
   

3. 函数类型交叉：

   type Logger = {
     log: (message: string) => void;
   };
   
   type Formatter = {
     format: (data: any) => string;
   };
   
   type LoggerFormatter = Logger & Formatter;
   
   const utility: LoggerFormatter = {
     log: (message: string) => console.log(message),
     format: (data: any) => JSON.stringify(data)
   };
   

实际应用场景：

// API 响应类型
type ApiResponse<T> = 
  | { success: true; data: T }
  | { success: false; error: string };

// 事件类型
type MouseEvent = {
  type: "click" | "hover";
  target: Element;
} & ({ type: "click"; button: number } | { type: "hover" });

// 配置对象
type Config = BaseConfig & (DevConfig | ProdConfig);

interface BaseConfig {
  appName: string;
  version: string;
}

interface DevConfig {
  env: "development";
  debug: true;
}

interface ProdConfig {
  env: "production";
  debug: false;
  apiUrl: string;
}

使用区别：

• 联合类型：值可以是几种类型中的任意一种
• 交叉类型：值必须同时满足所有类型的约束
• 联合类型：常用于函数参数、状态值
• 交叉类型：常用于对象组合、Mixin 模式

What is type alias in TypeScript?
- 考察点：类型别名概念与应用场景。

答案：

类型别名（type alias）是使用 type 关键字为现有类型创建新名称的方式。它不创建新类型，而是为类型提供一个更具描述性或更简洁的名称。

基本语法：

1. 基础类型别名：

   // 为基本类型创建别名
   type ID = string | number;
   type Name = string;
   type Age = number;
   
   // 使用类型别名
   let userId: ID = "user_123";
   let userName: Name = "张三";
   let userAge: Age = 25;
   
   // 函数参数使用别名
   function getUser(id: ID): { name: Name; age: Age } {
     return { name: "张三", age: 25 };
   }
   

2. 对象类型别名：

   // 复杂对象类型别名
   type User = {
     id: number;
     name: string;
     email: string;
     profile?: {
       avatar: string;
       bio: string;
     };
   };
   
   type Product = {
     id: number;
     name: string;
     price: number;
     category: string;
   };
   
   // 使用类型别名
   const user: User = {
     id: 1,
     name: "李四",
     email: "[email protected]"
   };
   

3. 函数类型别名：

   // 函数类型别名
   type EventHandler = (event: Event) => void;
   type Validator<T> = (value: T) => boolean;
   type Mapper<T, R> = (input: T) => R;
   
   // 使用函数类型别名
   const clickHandler: EventHandler = (e) => console.log("clicked");
   const isValidEmail: Validator<string> = (email) => email.includes("@");
   const toString: Mapper<number, string> = (num) => num.toString();
   

4. 泛型类型别名：

   // 泛型类型别名
   type ApiResponse<T> = {
     success: boolean;
     data: T;
     message?: string;
   };
   
   type Optional<T> = T | undefined;
   type Nullable<T> = T | null;
   
   // 使用泛型别名
   type UserResponse = ApiResponse<User>;
   type OptionalString = Optional<string>;
   
   const response: UserResponse = {
     success: true,
     data: { id: 1, name: "王五", email: "[email protected]" }
   };
   

type vs interface 的区别：

1. 语法差异：

   // type - 使用 = 赋值
   type Point = {
     x: number;
     y: number;
   };
   
   // interface - 直接定义
   interface Point2 {
     x: number;
     y: number;
   }
   

2. 扩展方式：

   // type 使用交叉类型扩展
   type Animal = {
     name: string;
   };
   
   type Dog = Animal & {
     breed: string;
   };
   
   // interface 使用 extends 扩展
   interface Animal2 {
     name: string;
   }
   
   interface Dog2 extends Animal2 {
     breed: string;
   }
   

3. 能力差异：

   // type 可以表示联合类型、基本类型等
   type Status = "loading" | "success" | "error";
   type StringOrNumber = string | number;
   
   // interface 不能表示联合类型或基本类型
   // interface Status = "loading" | "success" | "error"; // 错误
   

实际应用场景：

// 状态管理
type AppState = {
  user: User | null;
  theme: "light" | "dark";
  loading: boolean;
};

// 事件系统
type EventType = "click" | "scroll" | "resize";
type EventListener<T = any> = (data: T) => void;

// API 类型定义
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type RequestConfig = {
  method: HttpMethod;
  url: string;
  headers?: Record<string, string>;
  body?: any;
};

// 工具类型组合
type PartialUser = Partial<User>;  // 所有属性可选
type RequiredUser = Required<User>; // 所有属性必需
type UserKeys = keyof User;         // 获取所有属性名

使用建议：

• 优先使用 interface 定义对象结构
• 使用 type 定义联合类型、基本类型别名
• 使用 type 进行复杂类型组合
• 保持团队内的一致性约定

How to define function types in TypeScript?
- 考察点：函数类型声明方式与应用。

答案：

TypeScript 提供了多种方式来定义函数类型，包括函数声明、函数表达式、箭头函数和函数类型别名等，可以精确控制参数类型和返回值类型。

函数类型定义方式：

1. 函数声明：

   // 基础函数声明
   function add(a: number, b: number): number {
     return a + b;
   }
   
   // 可选参数
   function greet(name: string, title?: string): string {
     return title ? `Hello, ${title} ${name}` : `Hello, ${name}`;
   }
   
   // 默认参数
   function createUser(name: string, age: number = 18): User {
     return { id: Date.now(), name, age };
   }
   
   // 剩余参数
   function sum(...numbers: number[]): number {
     return numbers.reduce((total, num) => total + num, 0);
   }
   

2. 函数表达式：

   // 完整的函数类型注解
   const multiply: (a: number, b: number) => number = function(a, b) {
     return a * b;
   };
   
   // 箭头函数
   const divide: (a: number, b: number) => number = (a, b) => {
     if (b === 0) throw new Error("Division by zero");
     return a / b;
   };
   
   // 简化写法（类型推断）
   const subtract = (a: number, b: number): number => a - b;
   

3. 函数类型别名：

   // 定义函数类型别名
   type Calculator = (a: number, b: number) => number;
   type Predicate<T> = (item: T) => boolean;
   type EventHandler = (event: Event) => void;
   
   // 使用类型别名
   const add: Calculator = (a, b) => a + b;
   const isEven: Predicate<number> = (num) => num % 2 === 0;
   const handleClick: EventHandler = (e) => console.log("clicked");
   

4. 接口定义函数类型：

   // 使用接口定义函数类型
   interface SearchFunction {
     (source: string, subString: string): boolean;
   }
   
   interface MathOperations {
     add: (a: number, b: number) => number;
     subtract: (a: number, b: number) => number;
     multiply?: (a: number, b: number) => number; // 可选方法
   }
   
   // 实现接口
   const search: SearchFunction = (src, sub) => src.indexOf(sub) > -1;
   
   const math: MathOperations = {
     add: (a, b) => a + b,
     subtract: (a, b) => a - b
   };
   

高级函数类型：

1. 泛型函数：

   // 泛型函数定义
   function identity<T>(arg: T): T {
     return arg;
   }
   
   // 泛型函数类型别名
   type GenericFunction<T, R> = (arg: T) => R;
   type ArrayMapper<T, R> = (arr: T[]) => R[];
   
   // 使用泛型函数
   const stringIdentity = identity<string>("hello");
   const numberIdentity = identity<number>(42);
   
   // 类型推断
   const autoIdentity = identity("world"); // 推断为 string
   

2. 函数重载：

   // 函数重载签名
   function format(value: string): string;
   function format(value: number): string;
   function format(value: boolean): string;
   
   // 实现签名
   function format(value: string | number | boolean): string {
     return String(value);
   }
   
   // 使用时有准确的类型检查
   const str1 = format("hello");   // string
   const str2 = format(42);        // string
   const str3 = format(true);      // string
   

3. 高阶函数：

   // 接受函数作为参数
   function withLogging<T extends (...args: any[]) => any>(
     fn: T
   ): (...args: Parameters<T>) => ReturnType<T> {
     return (...args) => {
       console.log("Function called with:", args);
       const result = fn(...args);
       console.log("Function returned:", result);
       return result;
     };
   }
   
   // 返回函数的函数
   function createValidator<T>(
     validate: (value: T) => boolean
   ): (value: T) => { isValid: boolean; value: T } {
     return (value: T) => ({
       isValid: validate(value),
       value
     });
   }
   
   // 使用高阶函数
   const loggedAdd = withLogging(add);
   const emailValidator = createValidator<string>(email => email.includes("@"));
   

实际应用场景：

// 异步函数
async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// 事件处理器
type ButtonClickHandler = (event: MouseEvent) => void;

// 中间件模式
type Middleware<T> = (
  data: T,
  next: (data: T) => void
) => void;

// 回调函数
function processData<T, R>(
  data: T[],
  processor: (item: T) => R,
  onComplete: (results: R[]) => void
): void {
  const results = data.map(processor);
  onComplete(results);
}

最佳实践：

• 明确指定参数和返回值类型
• 使用类型别名提高可读性
• 合理使用可选参数和默认参数
• 利用泛型提高函数复用性
• 避免使用 any 类型

How does TypeScript handle JavaScript files? What is the role of allowJs configuration?
- 考察点：TS 与 JS 混合开发理解。

答案：

TypeScript 可以与现有的 JavaScript 代码无缝集成，allowJs 配置选项控制是否允许在 TypeScript 项目中包含和编译 JavaScript 文件，支持渐进式迁移。

allowJs 配置详解：

1. 基本配置：

   // tsconfig.json
   {
     "compilerOptions": {
       "allowJs": true,           // 允许编译 JavaScript 文件
       "checkJs": false,          // 是否检查 JavaScript 文件中的错误
       "outDir": "./dist",        // 输出目录
       "rootDir": "./src"         // 源代码目录
     },
     "include": [
       "src/**/*.ts",
       "src/**/*.js"              // 包含 JavaScript 文件
     ]
   }
   

2. JavaScript 类型检查：

   // 启用 JavaScript 类型检查
   {
     "compilerOptions": {
       "allowJs": true,
       "checkJs": true,           // 对 JS 文件进行类型检查
       "noImplicitAny": false,    // JS 文件中允许隐式 any
       "strict": false            // 对 JS 文件不启用严格模式
     }
   }
   

JavaScript 文件处理方式：

1. JSDoc 类型注解：

   // user.js - 使用 JSDoc 提供类型信息
   /**
    * @typedef {Object} User
    * @property {number} id - 用户ID
    * @property {string} name - 用户名
    * @property {string} email - 邮箱
    */
   
   /**
    * 获取用户信息
    * @param {number} id - 用户ID
    * @returns {Promise<User>} 用户信息
    */
   async function getUser(id) {
     const response = await fetch(`/api/users/${id}`);
     return response.json();
   }
   
   /**
    * @param {User} user - 用户对象
    * @param {string} [title] - 可选标题
    * @returns {string}
    */
   function formatUser(user, title) {
     return title ? `${title}: ${user.name}` : user.name;
   }
   
   module.exports = { getUser, formatUser };
   

2. TypeScript 中导入 JavaScript：

   // types.ts - 定义类型
   export interface User {
     id: number;
     name: string;
     email: string;
   }
   
   // main.ts - 导入 JavaScript 模块
   import { getUser, formatUser } from './user.js';
   import type { User } from './types';
   
   async function main() {
     const user: User = await getUser(1);
     const formatted: string = formatUser(user, "管理员");
     console.log(formatted);
   }
   

3. 声明文件支持：

   // user.d.ts - 为 JavaScript 文件提供类型声明
   export interface User {
     id: number;
     name: string;
     email: string;
   }
   
   export function getUser(id: number): Promise<User>;
   export function formatUser(user: User, title?: string): string;
   

渐进式迁移策略：

1. 项目结构：

   src/
   ├── legacy/           # 现有 JavaScript 代码
   │   ├── utils.js
   │   ├── api.js
   │   └── components/
   ├── new/              # 新的 TypeScript 代码
   │   ├── services.ts
   │   ├── types.ts
   │   └── components/
   └── types/            # 类型声明文件
       ├── legacy.d.ts
       └── global.d.ts
   

2. 迁移配置：

   // tsconfig.json - 渐进式迁移配置
   {
     "compilerOptions": {
       "allowJs": true,
       "checkJs": true,
       "strict": false,           // 对 JS 文件宽松检查
       "noImplicitReturns": false,
       "noImplicitAny": false
     },
     "include": ["src/**/*"],
     "exclude": [
       "src/legacy/old-components/**/*.js"  // 暂时排除难以迁移的文件
     ]
   }
   

3. 文件级别控制：

   // legacy-module.js
   // @ts-check          // 启用类型检查
   // @ts-nocheck        // 跳过类型检查
   // @ts-ignore         // 忽略下一行错误
   
   /**
    * @param {string} message
    */
   function log(message) {
     // @ts-ignore - 故意使用错误的类型用于演示
     console.log(message.toUpperCase());
   }
   

实际应用场景：

1. 现有项目迁移：

   // 步骤1：启用 allowJs
   // 步骤2：逐个文件重命名 .js -> .ts
   // 步骤3：添加类型注解
   // 步骤4：解决类型错误
   
   // 原 JavaScript 文件
   // utils.js -> utils.ts
   export function debounce(func, delay) {
     let timeoutId;
     return function(...args) {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => func.apply(this, args), delay);
     };
   }
   
   // TypeScript 版本
   export function debounce<T extends (...args: any[]) => any>(
     func: T,
     delay: number
   ): (...args: Parameters<T>) => void {
     let timeoutId: NodeJS.Timeout;
     return function(...args: Parameters<T>) {
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => func.apply(this, args), delay);
     };
   }
   

2. 第三方库集成：

   // 对于没有类型定义的 JavaScript 库
   declare module 'legacy-library' {
     export function doSomething(param: string): number;
     export const config: {
       version: string;
       debug: boolean;
     };
   }
   
   // 使用
   import { doSomething, config } from 'legacy-library';
   
   const result: number = doSomething("test");
   console.log(config.version);
   

配置建议：

• 新项目直接使用 TypeScript，设置 allowJs: false
• 迁移项目启用 allowJs: true，配合 checkJs 逐步检查
• 使用 JSDoc 为 JavaScript 文件提供类型信息
• 创建 .d.ts 声明文件描述 JavaScript 模块
• 利用文件级指令控制检查行为

What is Type Assertion? What’s the difference from type conversion?

• 考察点：类型断言概念与区别。

答案：

类型断言是 TypeScript 提供的一种告诉编译器"相信我，我知道这是什么类型"的语法。它只在编译时起作用，不进行实际的类型转换或运行时检查。

类型断言语法：

1. 两种语法形式：

   // 尖括号语法（在 JSX 中不推荐）
   let someValue: unknown = "hello world";
   let strLength1: number = (<string>someValue).length;
   
   // as 语法（推荐）
   let strLength2: number = (someValue as string).length;
   
   // DOM 元素断言
   const inputElement = document.getElementById("username") as HTMLInputElement;
   inputElement.value = "张三";  // 现在可以安全访问 value 属性
   

2. 常见使用场景：

   // API 响应处理
   interface User {
     id: number;
     name: string;
     email: string;
   }
   
   async function fetchUser(): Promise<User> {
     const response = await fetch("/api/user");
     const data = await response.json();
     
     // 类型断言 - 假设 API 返回正确格式
     return data as User;
   }
   
   // 联合类型缩窄
   function processInput(input: string | number) {
     if (typeof input === "string") {
       // 这里不需要断言，TypeScript 已经知道是 string
       return input.toUpperCase();
     }
     
     // 明确断言为 number（实际上这里也不需要）
     return (input as number) * 2;
   }
   

3. 双重断言：

   // 有时需要先断言为 unknown 再断言为目标类型
   const input = "123";
   
   // 直接断言可能报错
   // const num = input as number; // Error: 不能直接从 string 断言为 number
   
   // 双重断言（不推荐，但有时必要）
   const num = (input as unknown) as number;
   
   // 更好的方式是实际转换
   const actualNum = parseInt(input, 10);
   

类型断言 vs 类型转换：

1. 类型断言（编译时）：

   // 类型断言 - 仅告诉 TypeScript 编译器类型
   let value: unknown = "42";
   let num1 = value as number;
   console.log(typeof num1);      // "string" - 运行时仍是字符串
   console.log(num1.toFixed(2));  // 运行时错误！
   
   // 类型断言不会改变运行时的值
   interface Cat {
     meow(): void;
   }
   
   let pet: any = { bark: () => console.log("woof") };
   let cat = pet as Cat;
   // cat.meow(); // 运行时错误 - 对象实际上没有 meow 方法
   

2. 类型转换（运行时）：

   // 实际的类型转换 - 改变运行时的值
   let str = "42";
   let num2 = Number(str);        // 实际转换
   let num3 = parseInt(str, 10);  // 实际转换
   let num4 = +str;               // 实际转换
   
   console.log(typeof num2);      // "number" - 运行时确实是数字
   console.log(num2.toFixed(2));  // "42.00" - 正常工作
   
   // 对象转换
   class Animal {
     constructor(public name: string) {}
   }
   
   class Dog extends Animal {
     bark() { console.log("woof"); }
   }
   
   let animal: Animal = new Dog("旺财");
   
   // 实际检查类型后转换
   if (animal instanceof Dog) {
     animal.bark(); // 安全，因为进行了运行时检查
   }
   

安全的类型断言实践：

1. 类型守卫结合断言：

   // 自定义类型守卫
   function isUser(obj: any): obj is User {
     return obj && 
            typeof obj.id === 'number' &&
            typeof obj.name === 'string' &&
            typeof obj.email === 'string';
   }
   
   // 安全使用
   async function safeGetUser(): Promise<User | null> {
     const response = await fetch("/api/user");
     const data = await response.json();
     
     if (isUser(data)) {
       return data; // TypeScript 知道这是 User 类型
     }
     
     return null; // 数据格式不正确
   }
   

2. 非空断言（!）：

   // 非空断言操作符
   function processElement(id: string) {
     // 明确知道元素存在时使用
     const element = document.getElementById(id)!; // 断言不为 null
     element.style.display = "none";
   }
   
   // 可选链更安全
   function safeProcessElement(id: string) {
     const element = document.getElementById(id);
     if (element) {
       element.style.display = "none";
     }
   }
   

使用建议：

• 尽量避免使用类型断言，优先使用类型守卫
• 必须使用断言时，确保了解运行时的实际类型
• 使用 as 语法而不是尖括号语法
• 考虑运行时验证来保证类型安全
• 非空断言（!）要谨慎使用，确保值不为 null/undefined

How to use optional properties and readonly properties in TypeScript?

• 考察点：对象属性修饰符理解与应用。

答案：

可选属性（Optional Properties）和只读属性（Readonly Properties）是 TypeScript 中控制对象属性访问和修改的重要特性，提供了更精确的类型约束和数据保护。

可选属性（?）：

1. 基础语法：

   interface User {
     id: number;           // 必需属性
     name: string;         // 必需属性
     email?: string;       // 可选属性
     phone?: string;       // 可选属性
     profile?: {           // 嵌套可选属性
       avatar?: string;
       bio?: string;
     };
   }
   
   // 有效的对象创建
   const user1: User = {
     id: 1,
     name: "张三"
     // email 和 phone 可以省略
   };
   
   const user2: User = {
     id: 2,
     name: "李四",
     email: "[email protected]",
     profile: {
       avatar: "/avatar.jpg"
       // bio 可以省略
     }
   };
   

2. 函数参数中的可选属性：

   // 配置对象模式
   interface ApiConfig {
     baseUrl: string;
     timeout?: number;
     retries?: number;
     headers?: Record<string, string>;
   }
   
   function createApiClient(config: ApiConfig) {
     const {
       baseUrl,
       timeout = 5000,        // 默认值
       retries = 3,           // 默认值
       headers = {}           // 默认值
     } = config;
     
     return {
       baseUrl,
       timeout,
       retries,
       headers
     };
   }
   
   // 使用时只需提供必要属性
   const api = createApiClient({
     baseUrl: "https://api.example.com"
   });
   

只读属性（readonly）：

1. 接口中的只读属性：

   interface Point {
     readonly x: number;
     readonly y: number;
   }
   
   interface Config {
     readonly apiKey: string;
     readonly debug: boolean;
     features?: readonly string[];  // 只读数组
   }
   
   const point: Point = { x: 10, y: 20 };
   // point.x = 30; // 错误：无法修改只读属性
   
   const config: Config = {
     apiKey: "secret-key",
     debug: true,
     features: ["auth", "cache"]
   };
   // config.apiKey = "new-key"; // 错误：无法修改只读属性
   

2. 类中的只读属性：

   class Circle {
     readonly pi: number = 3.14159;
     readonly radius: number;
     
     constructor(radius: number) {
       this.radius = radius;  // 构造函数中可以赋值
     }
     
     get area(): number {
       return this.pi * this.radius ** 2;
     }
     
     // setRadius(newRadius: number) {
     //   this.radius = newRadius; // 错误：无法修改只读属性
     // }
   }
   
   const circle = new Circle(5);
   console.log(circle.area);
   // circle.pi = 3.14; // 错误：无法修改只读属性
   

组合使用：

1. 可选且只读的属性：

   interface UserPreferences {
     readonly id: number;
     readonly userId: number;
     theme?: readonly ("light" | "dark");
     readonly createdAt?: Date;  // 可选的只读属性
     settings?: {
       readonly notifications: boolean;
       language?: string;
     };
   }
   
   const preferences: UserPreferences = {
     id: 1,
     userId: 123,
     theme: "dark",
     settings: {
       notifications: true,
       language: "zh-CN"
     }
   };
   
   // preferences.id = 2;                    // 错误：只读
   // preferences.theme = "light";           // 错误：只读
   // preferences.settings.notifications = false; // 错误：只读
   preferences.settings.language = "en";      // 正确：language 不是只读
   

2. 工具类型的应用：

   // 使用内置工具类型
   interface Product {
     id: number;
     name: string;
     price: number;
     description: string;
   }
   
   // 全部属性可选
   type PartialProduct = Partial<Product>;
   /*
   {
     id?: number;
     name?: string;
     price?: number;
     description?: string;
   }
   */
   
   // 全部属性只读
   type ReadonlyProduct = Readonly<Product>;
   /*
   {
     readonly id: number;
     readonly name: string;
     readonly price: number;
     readonly description: string;
   }
   */
   
   // 选择特定属性为可选
   type ProductUpdate = Partial<Pick<Product, 'name' | 'price' | 'description'>> & 
     Pick<Product, 'id'>;
   /*
   {
     id: number;
     name?: string;
     price?: number;
     description?: string;
   }
   */
   

实际应用场景：

1. 状态管理：

   interface AppState {
     readonly user: User | null;
     readonly isLoading: boolean;
     readonly error?: string;
     preferences?: UserPreferences;
   }
   
   // 状态更新函数
   function updateState(
     currentState: AppState, 
     updates: Partial<AppState>
   ): AppState {
     return {
       ...currentState,
       ...updates
     };
   }
   

2. API 响应类型：

   interface ApiResponse<T> {
     readonly success: boolean;
     readonly data?: T;
     readonly error?: {
       readonly code: string;
       readonly message: string;
     };
     readonly timestamp: Date;
   }
   
   interface CreateUserRequest {
     name: string;
     email: string;
     phone?: string;        // 可选字段
   }
   
   interface UserResponse {
     readonly id: number;   // 服务器生成，只读
     readonly name: string;
     readonly email: string;
     readonly phone?: string;
     readonly createdAt: Date;  // 服务器时间戳，只读
   }
   

3. 配置对象：

   interface DatabaseConfig {
     readonly host: string;
     readonly port: number;
     readonly database: string;
     readonly ssl?: boolean;
     readonly timeout?: number;
     readonly pool?: {
       readonly min: number;
       readonly max: number;
       readonly idleTimeout?: number;
     };
   }
   
   // 运行时不可修改的配置
   const dbConfig: DatabaseConfig = {
     host: "localhost",
     port: 5432,
     database: "myapp",
     ssl: true,
     pool: {
       min: 2,
       max: 10
     }
   };
   

最佳实践：

• 对于不应该被修改的属性使用 readonly
• 对于非必需的属性使用 ? 可选标记
• 在 API 接口中合理使用只读属性保护数据
• 结合工具类型灵活控制属性访问权限
• 在状态管理中使用只读属性确保不可变性

What are Generics? How to use generic functions and generic interfaces?

• 考察点：泛型编程思想与实际应用。

答案：

泛型（Generics）是 TypeScript 中实现代码重用和类型安全的重要特性，允许在定义函数、接口或类时使用类型参数，在使用时再指定具体类型。

泛型基础概念：

1. 泛型函数：

   // 基础泛型函数
   function identity<T>(arg: T): T {
     return arg;
   }
   
   // 使用时指定类型
   const numberResult = identity<number>(42);        // T = number
   const stringResult = identity<string>("hello");   // T = string
   
   // 类型推断
   const autoResult = identity("world");             // 自动推断 T = string
   
   // 多个类型参数
   function pair<T, U>(first: T, second: U): [T, U] {
     return [first, second];
   }
   
   const coords = pair<number, number>(10, 20);      // [number, number]
   const userInfo = pair("张三", 25);                // [string, number] - 推断
   

2. 泛型接口：

   // 基础泛型接口
   interface Container<T> {
     value: T;
     getValue(): T;
     setValue(value: T): void;
   }
   
   // 实现泛型接口
   class NumberContainer implements Container<number> {
     constructor(public value: number) {}
     
     getValue(): number {
       return this.value;
     }
     
     setValue(value: number): void {
       this.value = value;
     }
   }
   
   class StringContainer implements Container<string> {
     constructor(public value: string) {}
     
     getValue(): string {
       return this.value;
     }
     
     setValue(value: string): void {
       this.value = value;
     }
   }
   

复杂泛型应用：

1. API 响应泛型：

   // 通用 API 响应接口
   interface ApiResponse<T> {
     success: boolean;
     data: T;
     message?: string;
     errors?: string[];
   }
   
   interface User {
     id: number;
     name: string;
     email: string;
   }
   
   interface Product {
     id: number;
     name: string;
     price: number;
   }
   
   // 使用泛型接口
   type UserResponse = ApiResponse<User>;
   type ProductListResponse = ApiResponse<Product[]>;
   type LoginResponse = ApiResponse<{ token: string; user: User }>;
   
   // 泛型 API 函数
   async function apiCall<T>(url: string): Promise<ApiResponse<T>> {
     const response = await fetch(url);
     return response.json() as ApiResponse<T>;
   }
   
   // 使用
   const userResponse = await apiCall<User>("/api/users/1");
   const products = await apiCall<Product[]>("/api/products");
   

2. 数据操作泛型：

   // 泛型数组操作
   interface Repository<T> {
     items: T[];
     add(item: T): void;
     remove(id: string | number): boolean;
     find(predicate: (item: T) => boolean): T | undefined;
     filter(predicate: (item: T) => boolean): T[];
     map<R>(mapper: (item: T) => R): R[];
   }
   
   class InMemoryRepository<T extends { id: string | number }> implements Repository<T> {
     public items: T[] = [];
     
     add(item: T): void {
       this.items.push(item);
     }
     
     remove(id: string | number): boolean {
       const index = this.items.findIndex(item => item.id === id);
       if (index > -1) {
         this.items.splice(index, 1);
         return true;
       }
       return false;
     }
     
     find(predicate: (item: T) => boolean): T | undefined {
       return this.items.find(predicate);
     }
     
     filter(predicate: (item: T) => boolean): T[] {
       return this.items.filter(predicate);
     }
     
     map<R>(mapper: (item: T) => R): R[] {
       return this.items.map(mapper);
     }
   }
   
   // 使用
   const userRepository = new InMemoryRepository<User>();
   userRepository.add({ id: 1, name: "张三", email: "[email protected]" });
   
   const productRepository = new InMemoryRepository<Product>();
   productRepository.add({ id: 1, name: "笔记本", price: 5999 });
   

高级泛型特性：

1. 泛型约束：

   // 约束泛型必须有特定属性
   interface HasLength {
     length: number;
   }
   
   function logLength<T extends HasLength>(arg: T): T {
     console.log(`Length: ${arg.length}`);
     return arg;
   }
   
   logLength("hello");           // 正确：string 有 length
   logLength([1, 2, 3]);         // 正确：array 有 length
   // logLength(123);            // 错误：number 没有 length
   
   // 键约束
   function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
     return obj[key];
   }
   
   const user = { id: 1, name: "张三", age: 25 };
   const userName = getProperty(user, "name");    // string
   const userId = getProperty(user, "id");        // number
   // const invalid = getProperty(user, "salary"); // 错误：'salary' 不存在
   

2. 条件类型与泛型：

   // 条件类型
   type NonNull<T> = T extends null | undefined ? never : T;
   type ArrayElement<T> = T extends (infer U)[] ? U : never;
   
   // 实用工具类型
   type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
   type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
   
   // 使用示例
   interface CreateUserRequest {
     name: string;
     email: string;
     age?: number;
     phone?: string;
   }
   
   // 使age字段必需，其他保持原样
   type CreateUserWithAge = RequiredFields<CreateUserRequest, 'age'>;
   

实际项目应用：

1. 状态管理：

   // 泛型状态管理
   interface State<T> {
     data: T | null;
     loading: boolean;
     error: string | null;
   }
   
   interface Actions<T> {
     setLoading(): void;
     setData(data: T): void;
     setError(error: string): void;
     reset(): void;
   }
   
   function createStore<T>(): [State<T>, Actions<T>] {
     let state: State<T> = {
       data: null,
       loading: false,
       error: null
     };
   
     const actions: Actions<T> = {
       setLoading: () => { state.loading = true; },
       setData: (data: T) => { 
         state.data = data; 
         state.loading = false; 
         state.error = null; 
       },
       setError: (error: string) => { 
         state.error = error; 
         state.loading = false; 
       },
       reset: () => { 
         state = { data: null, loading: false, error: null }; 
       }
     };
   
     return [state, actions];
   }
   
   // 使用
   const [userState, userActions] = createStore<User>();
   const [productState, productActions] = createStore<Product[]>();
   

2. 表单处理：

   // 泛型表单处理
   interface FormField<T> {
     value: T;
     error?: string;
     touched: boolean;
     validate?: (value: T) => string | undefined;
   }
   
   type FormState<T> = {
     [K in keyof T]: FormField<T[K]>;
   };
   
   interface LoginForm {
     email: string;
     password: string;
   }
   
   const loginFormState: FormState<LoginForm> = {
     email: {
       value: "",
       touched: false,
       validate: (email) => email.includes("@") ? undefined : "Invalid email"
     },
     password: {
       value: "",
       touched: false,
       validate: (pwd) => pwd.length >= 6 ? undefined : "Password too short"
     }
   };
   

最佳实践：

• 使用有意义的泛型参数名（T、K、V等或更具描述性的名称）
• 适当使用泛型约束提供更好的类型安全
• 避免过度使用泛型，保持代码可读性
• 利用类型推断减少显式类型参数
• 在需要重用逻辑但类型不同时使用泛型

What are Generic Constraints? How to use the extends keyword?

• 考察点：泛型约束机制与复杂场景处理。

答案：

泛型约束（Generic Constraints）通过 extends 关键字限制泛型参数必须符合特定条件，提供了更精确的类型控制和更好的类型安全性。

基础泛型约束：

1. 接口约束：

   // 约束泛型必须具有特定属性
   interface HasLength {
     length: number;
   }
   
   function logWithLength<T extends HasLength>(arg: T): T {
     console.log(`Item length: ${arg.length}`);
     return arg;
   }
   
   // 有效调用
   logWithLength("hello");           // string 有 length 属性
   logWithLength([1, 2, 3]);         // array 有 length 属性
   logWithLength({ length: 5 });     // 对象有 length 属性
   
   // 无效调用
   // logWithLength(123);            // 错误：number 没有 length 属性
   // logWithLength({ name: "test" }); // 错误：对象没有 length 属性
   

2. keyof 约束：

   // 约束泛型 K 必须是 T 的属性键
   function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
     return obj[key];
   }
   
   const person = {
     id: 1,
     name: "张三",
     age: 25,
     email: "[email protected]"
   };
   
   // 类型安全的属性访问
   const name = getProperty(person, "name");        // string
   const age = getProperty(person, "age");          // number
   const id = getProperty(person, "id");            // number
   
   // 编译时错误防护
   // const invalid = getProperty(person, "salary"); // 错误：'salary' 不存在于类型中
   
   // 批量获取属性
   function pick<T, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
     const result = {} as Pick<T, K>;
     keys.forEach(key => {
       result[key] = obj[key];
     });
     return result;
   }
   
   const userInfo = pick(person, "name", "email");  // { name: string; email: string }
   

高级约束模式：

1. 条件约束：

   // 约束 T 必须是数组类型
   type ArrayElement<T extends readonly unknown[]> = T extends readonly (infer U)[] ? U : never;
   
   type StringArray = ArrayElement<string[]>;       // string
   type NumberArray = ArrayElement<number[]>;       // number
   // type Invalid = ArrayElement<string>;          // 错误：string 不是数组
   
   // 函数参数约束
   function processArray<T extends readonly unknown[]>(
     arr: T,
     processor: (item: ArrayElement<T>) => void
   ): void {
     arr.forEach(processor);
   }
   
   processArray([1, 2, 3], (num) => console.log(num * 2));        // num: number
   processArray(["a", "b"], (str) => console.log(str.toUpperCase())); // str: string
   

2. 多重约束：

   // 同时满足多个约束
   interface Serializable {
     serialize(): string;
   }
   
   interface Timestamped {
     timestamp: Date;
   }
   
   function processData<T extends Serializable & Timestamped>(data: T): string {
     const serialized = data.serialize();
     const time = data.timestamp.toISOString();
     return `${time}: ${serialized}`;
   }
   
   class LogEntry implements Serializable, Timestamped {
     constructor(
       public message: string,
       public timestamp: Date = new Date()
     ) {}
   
     serialize(): string {
       return JSON.stringify({
         message: this.message,
         timestamp: this.timestamp
       });
     }
   }
   
   const entry = new LogEntry("用户登录");
   const result = processData(entry); // 正确：LogEntry 满足所有约束
   

实际应用场景：

1. 数据库操作约束：

   // 约束实体必须有 id 属性
   interface Entity {
     id: string | number;
   }
   
   interface Repository<T extends Entity> {
     save(entity: T): Promise<T>;
     findById(id: T['id']): Promise<T | null>;
     delete(id: T['id']): Promise<boolean>;
     update(id: T['id'], updates: Partial<T>): Promise<T>;
   }
   
   interface User extends Entity {
     id: number;
     name: string;
     email: string;
   }
   
   interface Product extends Entity {
     id: string;
     name: string;
     price: number;
   }
   
   class DatabaseRepository<T extends Entity> implements Repository<T> {
     async save(entity: T): Promise<T> {
       // 数据库保存逻辑
       console.log(`Saving entity with id: ${entity.id}`);
       return entity;
     }
   
     async findById(id: T['id']): Promise<T | null> {
       // 数据库查询逻辑
       console.log(`Finding entity with id: ${id}`);
       return null;
     }
   
     async delete(id: T['id']): Promise<boolean> {
       console.log(`Deleting entity with id: ${id}`);
       return true;
     }
   
     async update(id: T['id'], updates: Partial<T>): Promise<T> {
       console.log(`Updating entity ${id} with:`, updates);
       return {} as T;
     }
   }
   
   const userRepo = new DatabaseRepository<User>();
   const productRepo = new DatabaseRepository<Product>();
   

2. 事件系统约束：

   // 约束事件类型
   interface BaseEvent {
     type: string;
     timestamp: Date;
   }
   
   interface UserEvent extends BaseEvent {
     userId: string;
   }
   
   interface SystemEvent extends BaseEvent {
     level: 'info' | 'warning' | 'error';
   }
   
   // 约束事件处理器
   type EventHandler<T extends BaseEvent> = (event: T) => void;
   
   class EventManager<T extends BaseEvent> {
     private handlers: Map<string, EventHandler<T>[]> = new Map();
   
     on(eventType: T['type'], handler: EventHandler<T>): void {
       if (!this.handlers.has(eventType)) {
         this.handlers.set(eventType, []);
       }
       this.handlers.get(eventType)!.push(handler);
     }
   
     emit(event: T): void {
       const handlers = this.handlers.get(event.type) || [];
       handlers.forEach(handler => handler(event));
     }
   }
   
   // 使用
   const userEventManager = new EventManager<UserEvent>();
   userEventManager.on('user.login', (event) => {
     console.log(`User ${event.userId} logged in at ${event.timestamp}`);
   });
   

3. API 客户端约束：

   // 约束 API 请求和响应类型
   interface ApiEndpoint {
     path: string;
     method: 'GET' | 'POST' | 'PUT' | 'DELETE';
   }
   
   interface GetEndpoint extends ApiEndpoint {
     method: 'GET';
   }
   
   interface PostEndpoint extends ApiEndpoint {
     method: 'POST';
   }
   
   // 根据请求方法约束参数
   type RequestConfig<T extends ApiEndpoint> = T extends GetEndpoint
     ? { params?: Record<string, any> }
     : T extends PostEndpoint
     ? { body: any; params?: Record<string, any> }
     : { params?: Record<string, any>; body?: any };
   
   async function apiRequest<
     TEndpoint extends ApiEndpoint,
     TResponse
   >(
     endpoint: TEndpoint,
     config: RequestConfig<TEndpoint>
   ): Promise<TResponse> {
     // API 请求逻辑
     console.log(`${endpoint.method} ${endpoint.path}`, config);
     return {} as TResponse;
   }
   
   // 类型安全的 API 调用
   const getUsers = await apiRequest<GetEndpoint, User[]>(
     { path: '/users', method: 'GET' },
     { params: { page: 1 } }  // 只能传 params
   );
   
   const createUser = await apiRequest<PostEndpoint, User>(
     { path: '/users', method: 'POST' },
     { body: { name: '张三', email: '[email protected]' } }  // 必须传 body
   );
   

约束的嵌套和组合：

// 复杂约束组合
interface Comparable<T> {
  compareTo(other: T): number;
}

interface Cloneable<T> {
  clone(): T;
}

// 多重约束
function sortAndClone<T extends Comparable<T> & Cloneable<T>>(
  items: T[]
): T[] {
  return items
    .map(item => item.clone())  // 必须实现 Cloneable
    .sort((a, b) => a.compareTo(b));  // 必须实现 Comparable
}

// 条件约束
type NonNullable<T> = T extends null | undefined ? never : T;
type RequiredKeys<T> = {
  [K in keyof T]-?: T[K] extends undefined ? never : K;
}[keyof T];

// 实用工具类型
type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

最佳实践：

• 使用约束提供更好的类型安全性和 IDE 支持
• 约束应该表达清晰的业务逻辑和类型关系
• 避免过度复杂的约束，保持代码可读性
• 结合条件类型和映射类型创建强大的工具类型
• 利用约束在编译时捕获更多潜在错误

How does TypeScript implement class inheritance and interface implementation?

• 考察点：面向对象继承与接口实现机制。

答案：

TypeScript 支持完整的面向对象编程，提供了类继承（extends）和接口实现（implements）机制，实现代码复用和类型约束。

类继承（extends）：

1. 基础继承：

   // 基础类
   class Animal {
     protected name: string;
     protected age: number;
   
     constructor(name: string, age: number) {
       this.name = name;
       this.age = age;
     }
   
     public speak(): void {
       console.log(`${this.name} makes a sound`);
     }
   
     protected getInfo(): string {
       return `${this.name} is ${this.age} years old`;
     }
   }
   
   // 继承类
   class Dog extends Animal {
     private breed: string;
   
     constructor(name: string, age: number, breed: string) {
       super(name, age);  // 调用父类构造函数
       this.breed = breed;
     }
   
     // 重写父类方法
     public speak(): void {
       console.log(`${this.name} barks loudly!`);
     }
   
     // 新增方法
     public wagTail(): void {
       console.log(`${this.name} wags tail happily`);
     }
   
     // 访问受保护的父类方法
     public showInfo(): void {
       console.log(this.getInfo() + `, breed: ${this.breed}`);
     }
   }
   
   const dog = new Dog("旺财", 3, "金毛");
   dog.speak();     // "旺财 barks loudly!"
   dog.wagTail();   // "旺财 wags tail happily"
   dog.showInfo();  // "旺财 is 3 years old, breed: 金毛"
   

接口实现（implements）：

1. 单接口实现：

   // 定义接口
   interface Flyable {
     fly(): void;
     altitude: number;
   }
   
   interface Swimmable {
     swim(): void;
     depth: number;
   }
   
   // 实现接口
   class Bird implements Flyable {
     altitude: number = 0;
   
     fly(): void {
       this.altitude = 100;
       console.log(`Flying at ${this.altitude} meters`);
     }
   }
   
   // 多接口实现
   class Duck extends Animal implements Flyable, Swimmable {
     altitude: number = 0;
     depth: number = 0;
   
     fly(): void {
       this.altitude = 50;
       console.log(`${this.name} flies at ${this.altitude}m`);
     }
   
     swim(): void {
       this.depth = 2;
       console.log(`${this.name} swims at ${this.depth}m depth`);
     }
   
     speak(): void {
       console.log(`${this.name} quacks`);
     }
   }
   
   const duck = new Duck("小黄", 2);
   duck.speak();  // "小黄 quacks"
   duck.fly();    // "小黄 flies at 50m"
   duck.swim();   // "小黄 swims at 2m depth"
   

复杂继承场景：

1. 抽象类：

   // 抽象基类
   abstract class Shape {
     protected x: number;
     protected y: number;
   
     constructor(x: number, y: number) {
       this.x = x;
       this.y = y;
     }
   
     // 抽象方法 - 子类必须实现
     abstract calculateArea(): number;
     abstract draw(): void;
   
     // 具体方法 - 子类可以使用
     public move(dx: number, dy: number): void {
       this.x += dx;
       this.y += dy;
       console.log(`Moved to (${this.x}, ${this.y})`);
     }
   
     public getPosition(): [number, number] {
       return [this.x, this.y];
     }
   }
   
   // 继承抽象类
   class Circle extends Shape {
     constructor(x: number, y: number, private radius: number) {
       super(x, y);
     }
   
     calculateArea(): number {
       return Math.PI * this.radius ** 2;
     }
   
     draw(): void {
       console.log(`Drawing circle at (${this.x}, ${this.y}) with radius ${this.radius}`);
     }
   }
   
   class Rectangle extends Shape {
     constructor(
       x: number, 
       y: number, 
       private width: number, 
       private height: number
     ) {
       super(x, y);
     }
   
     calculateArea(): number {
       return this.width * this.height;
     }
   
     draw(): void {
       console.log(`Drawing rectangle at (${this.x}, ${this.y}) ${this.width}x${this.height}`);
     }
   }
   

接口与类的组合应用：

1. Mixin 模式：

   // Mixin 接口
   interface Timestamped {
     timestamp: Date;
     updateTimestamp(): void;
   }
   
   interface Loggable {
     log(message: string): void;
   }
   
   // Mixin 实现函数
   function applyMixins(derivedCtor: any, baseCtors: any[]) {
     baseCtors.forEach(baseCtor => {
       Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
         if (name !== 'constructor') {
           Object.defineProperty(
             derivedCtor.prototype,
             name,
             Object.getOwnPropertyDescriptor(baseCtor.prototype, name) || Object.create(null)
           );
         }
       });
     });
   }
   
   // Mixin 类
   class TimestampedMixin implements Timestamped {
     timestamp: Date = new Date();
   
     updateTimestamp(): void {
       this.timestamp = new Date();
     }
   }
   
   class LoggableMixin implements Loggable {
     log(message: string): void {
       console.log(`[${new Date().toISOString()}] ${message}`);
     }
   }
   
   // 使用 Mixin 的类
   class User implements Timestamped, Loggable {
     constructor(public name: string, public email: string) {}
   
     // 这些方法会通过 applyMixins 自动添加
     timestamp!: Date;
     updateTimestamp!: () => void;
     log!: (message: string) => void;
   }
   
   // 应用 Mixins
   applyMixins(User, [TimestampedMixin, LoggableMixin]);
   

实际应用场景：

1. 组件系统：

   // 基础组件接口
   interface Component {
     render(): string;
     mount(element: HTMLElement): void;
     unmount(): void;
   }
   
   interface EventEmitter {
     on(event: string, callback: Function): void;
     emit(event: string, ...args: any[]): void;
   }
   
   // 基础组件类
   abstract class BaseComponent implements Component, EventEmitter {
     protected element?: HTMLElement;
     private events: Map<string, Function[]> = new Map();
   
     abstract render(): string;
   
     mount(element: HTMLElement): void {
       this.element = element;
       element.innerHTML = this.render();
       this.onMounted();
     }
   
     unmount(): void {
       if (this.element) {
         this.element.innerHTML = '';
         this.element = undefined;
       }
       this.onUnmounted();
     }
   
     on(event: string, callback: Function): void {
       if (!this.events.has(event)) {
         this.events.set(event, []);
       }
       this.events.get(event)!.push(callback);
     }
   
     emit(event: string, ...args: any[]): void {
       const callbacks = this.events.get(event) || [];
       callbacks.forEach(callback => callback(...args));
     }
   
     protected onMounted(): void {}
     protected onUnmounted(): void {}
   }
   
   // 具体组件
   class Button extends BaseComponent {
     constructor(private text: string, private onClick?: () => void) {
       super();
     }
   
     render(): string {
       return `<button id="btn">${this.text}</button>`;
     }
   
     protected onMounted(): void {
       const button = this.element?.querySelector('#btn');
       if (button && this.onClick) {
         button.addEventListener('click', this.onClick);
       }
     }
   }
   

最佳实践：

• 优先使用组合而不是继承
• 合理使用抽象类定义通用行为
• 接口用于定义契约，类用于实现
• 避免过深的继承层次
• 使用 Mixin 模式实现多重继承效果

What are namespaces and modules?

• 考察点：代码组织方式与最佳实践。

答案：

命名空间和模块是 TypeScript 中两种不同的代码组织方式。模块是现代 JavaScript 的标准，而命名空间是 TypeScript 早期的内部模块系统。

命名空间（namespace）：

1. 基础命名空间：

   // 命名空间定义
   namespace Geometry {
     export interface Point {
       x: number;
       y: number;
     }
     
     export class Circle {
       constructor(public center: Point, public radius: number) {}
       
       area(): number {
         return Math.PI * this.radius ** 2;
       }
     }
     
     export function distance(p1: Point, p2: Point): number {
       return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
     }
   }
   
   // 使用命名空间
   const point1: Geometry.Point = { x: 0, y: 0 };
   const circle = new Geometry.Circle(point1, 5);
   

2. 命名空间合并：

   // 跨文件命名空间合并
   namespace App {
     export interface User {
       id: number;
       name: string;
     }
   }
   
   namespace App {
     export class UserService {
       getUser(id: number): User {
         return { id, name: "用户" + id };
       }
     }
   }
   
   // 合并后可以一起使用
   const service = new App.UserService();
   const user: App.User = service.getUser(1);
   

模块（ES6 Modules）：

1. 模块导出：

   // geometry.ts
   export interface Point {
     x: number;
     y: number;
   }
   
   export class Circle {
     constructor(public center: Point, public radius: number) {}
     
     area(): number {
       return Math.PI * this.radius ** 2;
     }
   }
   
   export function distance(p1: Point, p2: Point): number {
     return Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
   }
   
   // 默认导出
   export default class Rectangle {
     constructor(public width: number, public height: number) {}
   }
   

2. 模块导入：

   // main.ts
   import Rectangle, { Point, Circle, distance } from './geometry';
   import * as Geo from './geometry'; // 命名空间导入
   
   const point1: Point = { x: 0, y: 0 };
   const circle = new Circle(point1, 5);
   const rect = new Rectangle(10, 20);
   

主要区别：

• 命名空间：全局作用域，运行时合并，主要用于声明文件
• 模块：文件级作用域，静态分析，现代 JavaScript 标准
• 树摇优化：模块支持，命名空间不支持
• 使用建议：现代项目优先使用模块，声明文件使用命名空间

What are decorators in TypeScript? What are the common types of decorators?

• 考察点：装饰器模式与元编程能力。

答案：

装饰器（Decorator）是 TypeScript 中用于修改类、方法、属性或参数行为的特殊声明，提供了声明式编程和元编程能力，需要在 tsconfig.json 中启用 experimentalDecorators。

装饰器配置：

// tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

装饰器类型：

1. 类装饰器（Class Decorator）：

   // 基础类装饰器
   function Sealed(constructor: Function) {
     Object.seal(constructor);
     Object.seal(constructor.prototype);
   }
   
   @Sealed
   class Greeter {
     greeting: string;
     constructor(message: string) {
       this.greeting = message;
     }
     greet() {
       return `Hello, ${this.greeting}`;
     }
   }
   
   // 带参数的类装饰器工厂
   function Entity(tableName: string) {
     return function<T extends { new(...args: any[]): {} }>(constructor: T) {
       return class extends constructor {
         tableName = tableName;
         save() {
           console.log(`Saving to ${tableName} table`);
         }
       };
     };
   }
   
   @Entity('users')
   class User {
     constructor(public name: string) {}
   }
   
   const user = new User("张三");
   (user as any).save(); // "Saving to users table"
   

2. 方法装饰器（Method Decorator）：

   // 方法装饰器
   function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
     const originalMethod = descriptor.value;
   
     descriptor.value = function(...args: any[]) {
       console.log(`Calling ${propertyKey} with arguments:`, args);
       const result = originalMethod.apply(this, args);
       console.log(`Method ${propertyKey} returned:`, result);
       return result;
     };
   }
   
   // 性能监控装饰器
   function Performance(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
     const originalMethod = descriptor.value;
   
     descriptor.value = function(...args: any[]) {
       const start = Date.now();
       const result = originalMethod.apply(this, args);
       const end = Date.now();
       console.log(`${propertyKey} executed in ${end - start}ms`);
       return result;
     };
   }
   
   class Calculator {
     @Log
     @Performance
     add(a: number, b: number): number {
       return a + b;
     }
   
     @Log
     multiply(a: number, b: number): number {
       return a * b;
     }
   }
   
   const calc = new Calculator();
   calc.add(5, 3); // 会输出日志和性能信息
   

3. 属性装饰器（Property Decorator）：

   // 属性验证装饰器
   function Required(target: any, propertyKey: string) {
     let value: any;
   
     const getter = () => value;
     const setter = (newVal: any) => {
       if (newVal === null || newVal === undefined || newVal === '') {
         throw new Error(`${propertyKey} is required`);
       }
       value = newVal;
     };
   
     Object.defineProperty(target, propertyKey, {
       get: getter,
       set: setter,
       enumerable: true,
       configurable: true
     });
   }
   
   // 格式化装饰器
   function Format(formatter: (value: any) => any) {
     return function(target: any, propertyKey: string) {
       let value: any;
   
       const getter = () => value;
       const setter = (newVal: any) => {
         value = formatter(newVal);
       };
   
       Object.defineProperty(target, propertyKey, {
         get: getter,
         set: setter,
         enumerable: true,
         configurable: true
       });
     };
   }
   
   class UserProfile {
     @Required
     public name: string = '';
   
     @Format(email => email.toLowerCase().trim())
     public email: string = '';
   
     constructor(name: string, email: string) {
       this.name = name;
       this.email = email;
     }
   }
   
   const profile = new UserProfile("张三", "  [email protected]  ");
   console.log(profile.email); // "[email protected]"
   

4. 参数装饰器（Parameter Decorator）：

   // 参数验证装饰器
   function Validate(target: any, methodName: string, parameterIndex: number) {
     const existingRequiredParameters: number[] = 
       Reflect.getOwnMetadata('required_parameters', target, methodName) || [];
     
     existingRequiredParameters.push(parameterIndex);
     
     Reflect.defineMetadata('required_parameters', existingRequiredParameters, target, methodName);
   }
   
   // 方法装饰器配合参数装饰器
   function ValidateMethod(target: any, methodName: string, descriptor: PropertyDescriptor) {
     const method = descriptor.value;
     
     descriptor.value = function(...args: any[]) {
       const requiredParameters: number[] = 
         Reflect.getOwnMetadata('required_parameters', target, methodName) || [];
       
       for (const parameterIndex of requiredParameters) {
         if (args[parameterIndex] === null || args[parameterIndex] === undefined) {
           throw new Error(`Parameter at index ${parameterIndex} is required`);
         }
       }
       
       return method.apply(this, args);
     };
   }
   
   class UserService {
     @ValidateMethod
     createUser(@Validate name: string, @Validate email: string, age?: number) {
       return { name, email, age };
     }
   }
   

实际应用场景：

1. API 路由装饰器：

   // HTTP 方法装饰器
   function Get(path: string) {
     return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
       Reflect.defineMetadata('http:method', 'GET', target, propertyKey);
       Reflect.defineMetadata('http:path', path, target, propertyKey);
     };
   }
   
   function Post(path: string) {
     return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
       Reflect.defineMetadata('http:method', 'POST', target, propertyKey);
       Reflect.defineMetadata('http:path', path, target, propertyKey);
     };
   }
   
   // 控制器装饰器
   function Controller(basePath: string) {
     return function<T extends { new(...args: any[]): {} }>(constructor: T) {
       Reflect.defineMetadata('controller:basePath', basePath, constructor);
       return constructor;
     };
   }
   
   @Controller('/api/users')
   class UserController {
     @Get('/')
     getAllUsers() {
       return { users: [] };
     }
   
     @Post('/')
     createUser() {
       return { message: 'User created' };
     }
   
     @Get('/:id')
     getUser() {
       return { user: {} };
     }
   }
   

2. 依赖注入装饰器：

   // 注入装饰器
   const INJECTION_TOKENS = new Map<string, any>();
   
   function Injectable<T extends { new(...args: any[]): {} }>(constructor: T) {
     INJECTION_TOKENS.set(constructor.name, constructor);
     return constructor;
   }
   
   function Inject(token: string) {
     return function(target: any, propertyKey: string | symbol | undefined, parameterIndex: number) {
       const existingTokens = Reflect.getOwnMetadata('inject:tokens', target) || [];
       existingTokens[parameterIndex] = token;
       Reflect.defineMetadata('inject:tokens', existingTokens, target);
     };
   }
   
   @Injectable
   class DatabaseService {
     connect() {
       console.log('Connected to database');
     }
   }
   
   @Injectable
   class LoggerService {
     log(message: string) {
       console.log(`[LOG] ${message}`);
     }
   }
   
   @Injectable
   class UserService {
     constructor(
       @Inject('DatabaseService') private db: DatabaseService,
       @Inject('LoggerService') private logger: LoggerService
     ) {}
   
     createUser(name: string) {
       this.logger.log(`Creating user: ${name}`);
       this.db.connect();
     }
   }
   

3. 缓存装饰器：

   // 缓存装饰器
   function Cache(expireTime: number = 60000) {
     const cache = new Map<string, { value: any; expiry: number }>();
   
     return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
       const originalMethod = descriptor.value;
   
       descriptor.value = function(...args: any[]) {
         const cacheKey = `${propertyKey}_${JSON.stringify(args)}`;
         const cached = cache.get(cacheKey);
   
         if (cached && Date.now() < cached.expiry) {
           console.log(`Cache hit for ${propertyKey}`);
           return cached.value;
         }
   
         const result = originalMethod.apply(this, args);
         cache.set(cacheKey, { 
           value: result, 
           expiry: Date.now() + expireTime 
         });
         
         console.log(`Cache miss for ${propertyKey}, result cached`);
         return result;
       };
     };
   }
   
   class ApiService {
     @Cache(30000) // 缓存30秒
     async fetchUserData(userId: number) {
       console.log(`Fetching data for user ${userId}`);
       // 模拟 API 调用
       return { id: userId, name: `User ${userId}` };
     }
   }
   

装饰器组合与执行顺序：

// 装饰器执行顺序示例
function First() {
  console.log("First(): factory evaluated");
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("First(): called");
  };
}

function Second() {
  console.log("Second(): factory evaluated");
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("Second(): called");
  };
}

class ExampleClass {
  @First()
  @Second()
  method() {}
}

// 输出顺序：
// First(): factory evaluated
// Second(): factory evaluated
// Second(): called
// First(): called

最佳实践：

• 启用 experimentalDecorators 和 emitDecoratorMetadata
• 装饰器应该是纯函数，避免副作用
• 合理使用装饰器组合，注意执行顺序
• 考虑使用 reflect-metadata 库处理元数据
• 在框架开发中充分利用装饰器的声明式特性

What are Type Guards? What are the implementation methods?

• 考察点：类型缩窄机制与运行时类型检查。

答案：

类型守卫（Type Guard）是 TypeScript 中在运行时检查类型并缩窄类型范围的机制，让编译器能够在特定代码块中推断出更精确的类型。

内置类型守卫：

1. typeof 类型守卫：

   function processValue(value: string | number) {
     if (typeof value === "string") {
       // 在这个块中，value 被缩窄为 string 类型
       return value.toUpperCase();
     }
     
     // 这里 value 自动被缩窄为 number 类型
     return value.toFixed(2);
   }
   
   // 多类型检查
   function formatValue(input: string | number | boolean) {
     if (typeof input === "string") {
       return `"${input}"`; // input: string
     } else if (typeof input === "number") {
       return input.toString(); // input: number
     } else {
       return input ? "true" : "false"; // input: boolean
     }
   }
   

2. instanceof 类型守卫：

   class Dog {
     bark() { console.log("Woof!"); }
   }
   
   class Cat {
     meow() { console.log("Meow!"); }
   }
   
   function handlePet(pet: Dog | Cat) {
     if (pet instanceof Dog) {
       pet.bark(); // pet: Dog
     } else {
       pet.meow(); // pet: Cat
     }
   }
   
   // 错误处理中的应用
   function handleError(error: unknown) {
     if (error instanceof Error) {
       console.log(error.message); // error: Error
     } else if (typeof error === "string") {
       console.log(error); // error: string
     } else {
       console.log("Unknown error occurred");
     }
   }
   

自定义类型守卫：

1. 用户定义的类型守卫函数：

   // 使用 is 关键字
   interface Fish {
     swim(): void;
   }
   
   interface Bird {
     fly(): void;
   }
   
   // 自定义类型守卫函数
   function isFish(pet: Fish | Bird): pet is Fish {
     return (pet as Fish).swim !== undefined;
   }
   
   function handleAnimal(animal: Fish | Bird) {
     if (isFish(animal)) {
       animal.swim(); // animal: Fish
     } else {
       animal.fly(); // animal: Bird
     }
   }
   
   // API 响应类型守卫
   interface User {
     id: number;
     name: string;
     email: string;
   }
   
   function isUser(obj: any): obj is User {
     return obj && 
            typeof obj.id === 'number' &&
            typeof obj.name === 'string' &&
            typeof obj.email === 'string';
   }
   
   async function fetchUser(): Promise<User | null> {
     const response = await fetch('/api/user');
     const data = await response.json();
     
     if (isUser(data)) {
       return data; // data: User
     }
     
     return null; // 数据格式不正确
   }
   

2. in 操作符类型守卫：

   interface Car {
     drive(): void;
     wheels: number;
   }
   
   interface Boat {
     sail(): void;
     hull: string;
   }
   
   function operateVehicle(vehicle: Car | Boat) {
     if ('drive' in vehicle) {
       vehicle.drive(); // vehicle: Car
       console.log(`Car has ${vehicle.wheels} wheels`);
     } else {
       vehicle.sail(); // vehicle: Boat
       console.log(`Boat has ${vehicle.hull} hull`);
     }
   }
   
   // 复杂对象检查
   interface ApiSuccess {
     success: true;
     data: any;
   }
   
   interface ApiError {
     success: false;
     error: string;
   }
   
   type ApiResponse = ApiSuccess | ApiError;
   
   function handleApiResponse(response: ApiResponse) {
     if ('data' in response) {
       // response: ApiSuccess
       console.log("Success:", response.data);
     } else {
       // response: ApiError
       console.log("Error:", response.error);
     }
   }
   

discriminated union 类型守卫：

// 判别联合类型
interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  size: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Square | Rectangle;

function calculateArea(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      // shape: Circle
      return Math.PI * shape.radius ** 2;
    case "square":
      // shape: Square
      return shape.size ** 2;
    case "rectangle":
      // shape: Rectangle
      return shape.width * shape.height;
    default:
      // 确保所有情况都被处理
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

// 事件系统应用
interface ClickEvent {
  type: "click";
  target: HTMLElement;
  clientX: number;
  clientY: number;
}

interface KeyboardEvent {
  type: "keydown" | "keyup";
  target: HTMLElement;
  key: string;
  ctrlKey: boolean;
}

type UIEvent = ClickEvent | KeyboardEvent;

function handleUIEvent(event: UIEvent) {
  switch (event.type) {
    case "click":
      // event: ClickEvent
      console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
      break;
    case "keydown":
    case "keyup":
      // event: KeyboardEvent
      console.log(`Key ${event.key} ${event.type}`);
      if (event.ctrlKey) {
        console.log("Ctrl modifier was pressed");
      }
      break;
  }
}

高级类型守卫应用：

// 泛型类型守卫
function isArrayOf<T>(
  arr: unknown,
  guard: (item: unknown) => item is T
): arr is T[] {
  return Array.isArray(arr) && arr.every(guard);
}

function isNumber(value: unknown): value is number {
  return typeof value === 'number';
}

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// 使用
const unknownData: unknown = [1, 2, 3, 4];

if (isArrayOf(unknownData, isNumber)) {
  // unknownData: number[]
  const sum = unknownData.reduce((a, b) => a + b, 0);
}

// 条件类型与类型守卫结合
type NonNullable<T> = T extends null | undefined ? never : T;

function isNotNull<T>(value: T): value is NonNullable<T> {
  return value !== null && value !== undefined;
}

// 使用示例
function processUsers(users: (User | null)[]) {
  const validUsers = users.filter(isNotNull); // validUsers: User[]
  
  validUsers.forEach(user => {
    console.log(user.name); // 安全访问，user 不可能是 null
  });
}

// 复杂类型检查
interface LoadingState {
  status: 'loading';
}

interface SuccessState {
  status: 'success';
  data: any;
}

interface ErrorState {
  status: 'error';
  error: string;
}

type AsyncState = LoadingState | SuccessState | ErrorState;

function isSuccessState(state: AsyncState): state is SuccessState {
  return state.status === 'success';
}

function isErrorState(state: AsyncState): state is ErrorState {
  return state.status === 'error';
}

function handleAsyncState(state: AsyncState) {
  if (isSuccessState(state)) {
    console.log("Data:", state.data); // state: SuccessState
  } else if (isErrorState(state)) {
    console.log("Error:", state.error); // state: ErrorState
  } else {
    console.log("Loading..."); // state: LoadingState
  }
}

最佳实践：

• 优先使用内置类型守卫（typeof、instanceof、in）
• 为复杂类型创建可重用的守卫函数
• 使用判别联合类型简化类型检查
• 结合断言函数进行运行时验证
• 在 API 边界使用类型守卫确保数据安全

How does TypeScript integrate with third-party JavaScript libraries?

• 考察点：类型声明文件与生态集成。

答案：

TypeScript 通过类型声明文件与第三方 JavaScript 库集成，提供类型安全和开发体验，有多种集成方式。

集成方式：

1. 使用 @types 包：

   # 安装 JavaScript 库和对应的类型定义
   npm install lodash
   npm install @types/lodash --save-dev
   
   npm install express
   npm install @types/express --save-dev
   

   // 使用有类型支持的第三方库
   import _ from 'lodash';
   import express from 'express';
   
   const numbers = [1, 2, 3, 4, 5];
   const doubled = _.map(numbers, n => n * 2); // 类型安全
   
   const app = express();
   app.get('/users', (req, res) => {
     // req 和 res 都有完整的类型信息
     res.json({ users: [] });
   });
   

2. 库自带类型定义：

   // 现代库通常自带 TypeScript 声明
   import axios from 'axios';  // axios 包含类型定义
   import React from 'react';  // React 包含类型定义
   
   interface User {
     id: number;
     name: string;
     email: string;
   }
   
   // 使用泛型获得类型安全的 API 调用
   const response = await axios.get<User[]>('/api/users');
   const users: User[] = response.data; // 类型安全
   
   // React 组件也有完整类型支持
   const UserComponent: React.FC<{ user: User }> = ({ user }) => (
     <div>{user.name}</div>
   );
   

3. 手动创建声明文件：

   // 为没有类型的库创建声明文件
   // types/legacy-library.d.ts
   declare module 'legacy-library' {
     export interface Config {
       apiUrl: string;
       debug: boolean;
     }
     
     export class ApiClient {
       constructor(config: Config);
       get<T>(path: string): Promise<T>;
       post<T>(path: string, data: any): Promise<T>;
     }
     
     export function initialize(config: Config): void;
     export const version: string;
   }
   
   // 使用自定义声明
   import { ApiClient, initialize } from 'legacy-library';
   
   initialize({ apiUrl: 'https://api.example.com', debug: true });
   const client = new ApiClient({ apiUrl: 'https://api.example.com', debug: false });
   const users = await client.get<User[]>('/users');
   

高级集成技巧：

1. 全局变量声明：

   // types/global.d.ts
   declare global {
     // jQuery 全局变量
     const $: {
       (selector: string): {
         addClass: (className: string) => void;
         removeClass: (className: string) => void;
         on: (event: string, handler: (e: Event) => void) => void;
       };
       ajax: (options: {
         url: string;
         method?: 'GET' | 'POST';
         data?: any;
         success?: (data: any) => void;
       }) => void;
     };
     
     // 环境变量
     namespace NodeJS {
       interface ProcessEnv {
         NODE_ENV: 'development' | 'production' | 'test';
         API_URL: string;
         SECRET_KEY: string;
       }
     }
     
     // Window 对象扩展
     interface Window {
       gtag: (command: string, ...args: any[]) => void;
       dataLayer: any[];
     }
   }
   
   // 使用全局声明
   $('.button').addClass('active');
   $.ajax({
     url: '/api/data',
     method: 'GET',
     success: (data) => console.log(data)
   });
   
   const apiUrl = process.env.API_URL; // 有类型提示
   window.gtag('event', 'click', { button: 'header' });
   

2. 模块增强（Module Augmentation）：

   // 扩展现有模块的类型
   import 'express';
   
   declare module 'express' {
     interface Request {
       user?: {
         id: number;
         name: string;
         role: 'admin' | 'user';
       };
     }
   }
   
   // 现在可以使用扩展的类型
   app.use((req, res, next) => {
     req.user = { id: 1, name: '张三', role: 'admin' }; // 类型安全
     next();
   });
   
   app.get('/profile', (req, res) => {
     if (req.user) {
       res.json({ name: req.user.name }); // 类型安全访问
     }
   });
   

3. 条件类型集成：

   // 为动态库创建类型适配器
   type LibraryMethod<T> = T extends 'get'
     ? <R>(path: string) => Promise<R>
     : T extends 'post'
     ? <R>(path: string, data: any) => Promise<R>
     : T extends 'delete'
     ? (path: string) => Promise<void>
     : never;
   
   interface DynamicApiClient {
     request<T extends 'get' | 'post' | 'delete'>(
       method: T,
       path: string,
       data?: any
     ): ReturnType<LibraryMethod<T>>;
   }
   
   declare const apiClient: DynamicApiClient;
   
   // 类型安全的动态调用
   const users = await apiClient.request('get', '/users'); // 返回 Promise<unknown>
   const newUser = await apiClient.request('post', '/users', userData); // 返回 Promise<unknown>
   await apiClient.request('delete', '/users/1'); // 返回 Promise<void>
   

实际项目集成示例：

1. React + UI 库集成：

   // 集成 Ant Design
   import { Button, Form, Input } from 'antd';
   import type { FormInstance } from 'antd/es/form';
   
   interface LoginFormData {
     username: string;
     password: string;
   }
   
   const LoginForm: React.FC = () => {
     const [form] = Form.useForm<LoginFormData>();
   
     const onFinish = (values: LoginFormData) => {
       console.log('登录数据:', values); // 完整类型支持
     };
   
     return (
       <Form form={form} onFinish={onFinish}>
         <Form.Item name="username" rules={[{ required: true }]}>
           <Input placeholder="用户名" />
         </Form.Item>
         <Form.Item name="password" rules={[{ required: true }]}>
           <Input.Password placeholder="密码" />
         </Form.Item>
         <Button type="primary" htmlType="submit">
           登录
         </Button>
       </Form>
     );
   };
   

2. 数据库 ORM 集成：

   // 集成 Prisma
   import { PrismaClient } from '@prisma/client';
   
   const prisma = new PrismaClient();
   
   // Prisma 自动生成类型
   async function getUserWithPosts(userId: number) {
     const user = await prisma.user.findUnique({
       where: { id: userId },
       include: { posts: true }  // 自动类型推断
     });
     
     return user; // 返回类型自动推断包含 posts 关联
   }
   
   // 使用生成的类型
   type UserWithPosts = Awaited<ReturnType<typeof getUserWithPosts>>;
   

最佳实践：

• 优先选择有官方类型支持的库
• 使用 @types 包提供类型定义
• 为常用库创建类型声明文件
• 利用模块增强扩展现有类型
• 保持类型声明的版本同步
• 在项目中统一管理第三方库的类型

What are declaration files (.d.ts)? How to write them?
- 考察点：类型声明文件理解与编写能力。

答案：

声明文件（.d.ts）是 TypeScript 中专门用于类型声明的文件，只包含类型信息而不包含具体实现，为 JavaScript 代码提供类型定义。

声明文件的作用：

1. 为 JavaScript 代码提供类型信息：

   // utils.js (JavaScript 文件)
   function formatDate(date) {
     return date.toISOString().split('T')[0];
   }
   
   function calculateAge(birthYear) {
     return new Date().getFullYear() - birthYear;
   }
   
   const API_BASE_URL = 'https://api.example.com';
   
   module.exports = {
     formatDate,
     calculateAge,
     API_BASE_URL
   };
   

   // utils.d.ts (对应的声明文件)
   declare function formatDate(date: Date): string;
   declare function calculateAge(birthYear: number): number;
   declare const API_BASE_URL: string;
   
   export { formatDate, calculateAge, API_BASE_URL };
   

2. 描述全局变量和环境：

   // global.d.ts
   declare global {
     // 全局变量
     const __VERSION__: string;
     const __DEV__: boolean;
     
     // 全局函数
     function gtag(command: string, targetId: string, config?: any): void;
     
     // 扩展 Window 对象
     interface Window {
       dataLayer: any[];
       customAnalytics: {
         track: (event: string, properties?: Record<string, any>) => void;
         identify: (userId: string, traits?: Record<string, any>) => void;
       };
     }
     
     // 扩展 NodeJS 环境
     namespace NodeJS {
       interface ProcessEnv {
         NODE_ENV: 'development' | 'production' | 'test';
         DATABASE_URL: string;
         JWT_SECRET: string;
         REDIS_URL?: string;
       }
     }
   }
   
   export {}; // 确保文件被当作模块处理
   

编写声明文件的方法：

1. 基本类型声明：

   // types.d.ts
   
   // 函数声明
   declare function debounce<T extends (...args: any[]) => any>(
     func: T,
     wait: number,
     immediate?: boolean
   ): T;
   
   // 变量声明
   declare const VERSION: string;
   declare let isProduction: boolean;
   
   // 类声明
   declare class EventEmitter {
     constructor();
     on(event: string, listener: (...args: any[]) => void): this;
     off(event: string, listener: (...args: any[]) => void): this;
     emit(event: string, ...args: any[]): boolean;
   }
   
   // 接口声明
   interface ApiResponse<T = any> {
     success: boolean;
     data: T;
     message?: string;
     timestamp: number;
   }
   
   // 类型别名声明
   type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
   type ApiEndpoint = `/api/${string}`;
   

2. 模块声明：

   // modules.d.ts
   
   // 为文件扩展名声明模块
   declare module '*.css' {
     const content: { [className: string]: string };
     export default content;
   }
   
   declare module '*.scss' {
     const content: { [className: string]: string };
     export default content;
   }
   
   declare module '*.png' {
     const src: string;
     export default src;
   }
   
   declare module '*.jpg' {
     const src: string;
     export default src;
   }
   
   declare module '*.svg' {
     import React from 'react';
     const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
     export { ReactComponent };
     const src: string;
     export default src;
   }
   
   // 为第三方模块声明类型
   declare module 'custom-library' {
     interface Config {
       apiUrl: string;
       timeout?: number;
       retries?: number;
     }
   
     interface User {
       id: string;
       name: string;
       email: string;
     }
   
     class ApiClient {
       constructor(config: Config);
       getUser(id: string): Promise<User>;
       updateUser(id: string, data: Partial<User>): Promise<User>;
     }
   
     export { Config, User, ApiClient };
     export default ApiClient;
   }
   

3. 命名空间声明：

   // vendor.d.ts
   
   // jQuery 声明
   declare namespace $ {
     interface JQueryStatic {
       (selector: string): JQuery;
       (element: Element): JQuery;
       (callback: () => void): void;
       
       ajax(settings: AjaxSettings): JQueryXHR;
       get(url: string, data?: any, success?: (data: any) => void): JQueryXHR;
       post(url: string, data?: any, success?: (data: any) => void): JQueryXHR;
       
       extend<T>(target: T, ...sources: any[]): T;
       each<T>(array: T[], callback: (index: number, value: T) => void): void;
     }
   
     interface JQuery {
       addClass(className: string): JQuery;
       removeClass(className: string): JQuery;
       toggleClass(className: string, state?: boolean): JQuery;
       
       on(events: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
       off(events?: string, handler?: (eventObject: JQueryEventObject) => any): JQuery;
       
       text(): string;
       text(text: string): JQuery;
       html(): string;
       html(htmlString: string): JQuery;
       
       find(selector: string): JQuery;
       parent(selector?: string): JQuery;
       children(selector?: string): JQuery;
       
       each(callback: (index: number, element: Element) => void): JQuery;
       map<T>(callback: (index: number, element: Element) => T): JQuery;
     }
   
     interface AjaxSettings {
       url: string;
       type?: string;
       method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
       data?: any;
       success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => void;
       error?: (jqXHR: JQueryXHR, textStatus: string, errorThrown: string) => void;
       contentType?: string;
       dataType?: 'json' | 'xml' | 'html' | 'text' | 'script';
       timeout?: number;
     }
   
     interface JQueryEventObject extends Event {
       data?: any;
       namespace?: string;
       result?: any;
       timeStamp: number;
       currentTarget: Element;
       delegateTarget: Element;
     }
   
     interface JQueryXHR {
       readyState: number;
       status: number;
       statusText: string;
       responseText: string;
       responseJSON?: any;
       done(callback: (data: any, textStatus: string, jqXHR: JQueryXHR) => void): JQueryXHR;
       fail(callback: (jqXHR: JQueryXHR, textStatus: string, errorThrown: string) => void): JQueryXHR;
       always(callback: (data?: any, textStatus?: string, jqXHR?: JQueryXHR) => void): JQueryXHR;
     }
   }
   
   declare const $: $.JQueryStatic;
   

4. 高级声明技巧：

   // advanced.d.ts
   
   // 条件类型声明
   type ApiResult<T extends 'success' | 'error'> = T extends 'success'
     ? { status: 'success'; data: any; timestamp: number }
     : { status: 'error'; message: string; code: number };
   
   // 泛型约束声明
   interface Repository<T extends { id: string | number }> {
     findById(id: T['id']): Promise<T | null>;
     create(data: Omit<T, 'id'>): Promise<T>;
     update(id: T['id'], data: Partial<Omit<T, 'id'>>): Promise<T>;
     delete(id: T['id']): Promise<void>;
     findAll(query?: QueryOptions<T>): Promise<T[]>;
   }
   
   interface QueryOptions<T> {
     where?: Partial<T>;
     orderBy?: keyof T;
     limit?: number;
     offset?: number;
   }
   
   // 映射类型声明
   type ValidationRules<T> = {
     [K in keyof T]?: {
       required?: boolean;
       minLength?: number;
       maxLength?: number;
       pattern?: RegExp;
       custom?: (value: T[K]) => boolean | string;
     };
   };
   
   // 函数重载声明
   declare function createElement(tag: 'div'): HTMLDivElement;
   declare function createElement(tag: 'span'): HTMLSpanElement;
   declare function createElement(tag: 'input'): HTMLInputElement;
   declare function createElement(tag: 'button'): HTMLButtonElement;
   declare function createElement(tag: string): HTMLElement;
   
   // 模板字面量类型声明
   type HttpStatusCode = `${2 | 3 | 4 | 5}${number}${number}`;
   type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
   type ApiEndpoint<T extends string> = `/api/${T}`;
   
   declare function fetchApi<T extends string>(
     method: HttpMethod,
     endpoint: ApiEndpoint<T>
   ): Promise<ApiResponse>;