TypeScript 常见面试障碍

TypeScript 常见面试问题

1 基础概念问题

Q1: TypeScript和JavaScript的主要区别是什么？

• TypeScript是JavaScript的超集，添加了静态类型系统
• TypeScript需要编译，JavaScript可以直接运行
• TypeScript支持接口、泛型、装饰器等高级特性
• TypeScript提供了更好的IDE支持和开发体验

Q2: interface和type有什么区别？

• interface主要用于定义对象形状，支持声明合并
• type可以定义任何类型，包括联合类型、交叉类型、原始类型等
• interface可以使用extends继承，type可以使用&实现类似效果
• 类可以实现(implements)接口，但不能实现类型别名
• 类型别名不能参与声明合并

Q3: 什么是泛型？为什么需要泛型？
泛型允许创建可重用的组件，这些组件可以处理多种类型而不是单一类型。

// 没有泛型的问题：失去类型信息或需要重复代码
function identity(arg: any): any { return arg; }
// 使用泛型：保持类型信息
function identity<T>(arg: T): T { return arg; }

2 类型系统问题

Q4: any、unknown和never类型有什么区别？

• any: 绕过类型检查，完全失去类型安全
• unknown: 类型安全的any，使用前必须进行类型检查或断言
• never: 表示永远不会出现的值，常用于抛出异常或无限循环

Q5: 什么是类型守卫？有哪些类型守卫方式？
类型守卫是运行时检查，用于缩小类型范围。

1. typeof守卫：typeof x === "string"
2. instanceof守卫：obj instanceof Array
3. 自定义类型谓词：function isFish(pet: Fish | Bird): pet is Fish
4. in操作符："swim" in pet
5. 字面量类型守卫：x.type === "success"

Q6: 什么是条件类型？举例说明
条件类型根据条件选择类型：

type IsString<T> = T extends string ? true : false;type T1 = IsString<string>; // truetype T2 = IsString<number>; // false// 分布式条件类型type ToArray<T> = T extends any ? T[] : never;type StrOrNumArray = ToArray<string | number>; // string[] | number[]

3 高级特性问题

Q7: 什么是映射类型？内置的映射类型有哪些？
映射类型基于旧类型创建新类型：

// 内置映射类型
type Partial<T> = { [P in keyof T]?: T[P] };type Required<T> = { [P in keyof T]-?: T[P] };type Readonly<T> = { readonly [P in keyof T]: T[P] };type Pick<T, K extends keyof T> = { [P in K]: T[P] };type Record<K extends keyof any, T> = { [P in K]: T };

Q8: 在Vue 3中如何最佳实践地使用TypeScript？

1. 使用defineComponent包装组件以获得正确的类型推断
2. 使用PropType为props提供精确的类型
3. 使用Composition API，它比Options API有更好的类型支持
4. 为reactive和ref提供泛型类型参数
5. 使用TypeScript的模块扩充为Vue全局属性添加类型

// Vue 3 + TypeScript最佳实践示例
import { defineComponent, PropType } from 'vue'
interface User {
id: number
name: string
}
export default defineComponent({
props: {
// 使用PropType进行精确类型定义
user: {
type: Object as PropType<User>,required: true},// 数组类型的propsitems: {type: Array as PropType<User[]>,default: () => []}},setup(props) {// ref和reactive的类型推断const count = ref<number>(0)const state = reactive({loading: false,data: null as User[] | null})return { count, state }}})

Q9: 如何理解TypeScript中的协变和逆变？

• 协变：子类型可以赋值给父类型（数组、函数返回值）
• 逆变：父类型可以赋值给子类型（函数参数）
• 双变：两者都可以（TypeScript 2.6前函数的默认行为）
• 不变：必须完全匹配

4 工程实践问题

Q10: 如何在现有Vue项目中引入TypeScript？

1. 安装必要的依赖：

npm install typescript @vue/tsconfig @types/node --save-dev
npm install vue-tsc --save-dev

2. 创建tsconfig.json：

{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"compilerOptions": {
"outDir": "./dist",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}

3. 将.js文件重命名为.ts/.vue，逐步修复类型错误
4. 为Vue SFC添加<script lang="ts">
5. 使用Volar扩展替代Vetur以获得更好的TypeScript支持

Q11: 如何处理没有类型定义的第三方库？

1. 创建声明文件（.d.ts）：

// src/types/untyped-module.d.ts
declare module "untyped-vue-component" {
import { Component } from 'vue'
const component: Component
export default component
}

2. 使用shims-vue.d.ts处理Vue文件：

declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>export default component}

3. 使用@ts-ignore注释临时跳过特定行
4. 提交PR给DefinitelyTyped项目

Q12: TypeScript在Vue项目中有哪些性能优化建议？

1. 使用vue-tsc进行类型检查而不是全量tsc
2. 在开发时关闭严格模式的部分规则，生产构建时开启
3. 使用Vite而不是Webpack，Vite对TypeScript有更好的支持
4. 避免在模板中使用复杂的类型断言
5. 使用import type进行类型导入，避免将类型包含在最终包中

5 AI时代下的TypeScript应用

Q13: TypeScript如何提升AI编程助手的效率？

1. 类型作为上下文：明确的类型定义让AI能更准确理解代码意图
2. 智能补全增强：AI能基于类型系统提供更精准的代码建议
3. 错误预防：AI生成的代码在TypeScript编译阶段即可发现潜在问题
4. 代码理解辅助：类型注解帮助AI理解复杂业务逻辑
5. 重构安全性：AI辅助的重构在类型检查下更安全

Q14: 在AI编程时代，如何设计对AI友好的TypeScript代码？

1. 使用明确的接口和类型别名，避免复杂的嵌套类型
2. 为函数和方法添加完整的JSDoc注释
3. 使用有意义的变量名和函数名
4. 保持函数的单一职责，每个函数只做一件事
5. 使用枚举和字面量类型代替魔术字符串

// AI友好的代码示例
/**
* 用户注册函数
* @param userData 用户注册数据
* @returns 注册成功的用户信息
*/
async function registerUser(
userData: UserRegistrationData
): Promise<RegistrationResult> {// 明确的业务逻辑if (!isValidEmail(userData.email)) {throw new ValidationError('Invalid email format')}// 清晰的错误处理try {const result = await api.post('/register', userData)return result.data} catch (error) {if (error instanceof NetworkError) {throw new RegistrationError('Network issue, please try again')}throw error}}

Q15: TypeScript与AI编码结合的未来趋势是什么？

1. AI驱动的类型推断：AI自动为JavaScript代码添加类型注解
2. 智能重构建议：AI基于类型系统提供安全的代码重构方案
3. 代码生成优化：AI生成符合项目类型约定的代码
4. 测试用例生成：基于类型信息自动生成测试用例
5. 文档自动生成：从类型定义自动生成API文档