前端面试题:TypeScript核心概念
TypeScript作为JavaScript的超集,在前端开发中越来越重要。掌握其核心概念不仅能提升代码质量,也是面试中的加分项。
类型系统基础
类型注解与类型推断:TypeScript通过类型注解显式声明变量类型,如let name: string = 'hello'。同时支持类型推断,根据赋值自动推断类型,减少冗余代码。let age = 25会被推断为number类型。
基础类型:包括number、string、boolean、array、tuple、enum、any、void、null、undefined、never等。any表示任意类型,unknown表示未知类型但更安全,never表示永不存在的值类型。
接口与类型别名
接口(Interface) :用于定义对象结构,支持扩展和实现。接口可以声明属性、方法、索引签名等,支持可选属性和只读属性。interface User { name: string; age?: number; readonly id: number; }。
类型别名(Type Alias) :使用type关键字定义类型别名,可以表示基本类型、联合类型、元组等。与接口的主要区别是接口可以扩展,而类型别名不能扩展。
泛型编程
泛型(Generics) :提高代码复用性和类型安全性。通过类型参数化,创建可重用的组件。例如function identity<T>(arg: T): T { return arg; },T是类型参数,调用时传入具体类型。
泛型约束:使用extends关键字约束类型参数的范围,如function getProperty<T, K extends keyof T>(obj: T, key: K) { return obj[key]; },确保key是obj的属性名。
高级类型
联合类型与交叉类型:联合类型|表示可以是多个类型之一,如string | number。交叉类型&表示同时满足多个类型,如Person & Serializable。
类型守卫与类型断言:类型守卫通过typeof、instanceof、in等缩小类型范围。类型断言使用as或<>语法,告诉编译器更具体的类型,如(someValue as string).length。
模块系统
模块导入导出:使用export导出模块,import导入模块。export default用于默认导出,一个模块只能有一个默认导出。export { name }用于命名导出,可以导出多个。
命名空间:使用namespace关键字组织代码,避免全局命名冲突。命名空间可以嵌套,通过export暴露内部成员,使用/// <reference path="..." />引用其他命名空间。
装饰器
装饰器语法:使用@expression语法,可以装饰类、方法、属性、参数等。装饰器是一个函数,在运行时被调用,接收被装饰的目标信息作为参数。
常用装饰器:@Component用于声明组件,@Input用于输入属性,@Output用于输出事件,@Injectable用于服务注入等。装饰器可以组合使用,执行顺序从下到上。
编译配置
tsconfig.json:TypeScript项目的配置文件,控制编译选项。重要配置包括:target指定编译目标,module指定模块系统,strict启用严格模式,outDir指定输出目录等。
严格模式:启用strict选项会开启所有严格类型检查,包括noImplicitAny(禁止隐式any)、strictNullChecks(严格空值检查)、strictFunctionTypes(严格函数类型)等,提高代码质量。
工程化实践
与构建工具集成:Webpack通过ts-loader处理TypeScript文件,Vite原生支持TypeScript。Babel也可以编译TypeScript,但会丢失类型检查,建议使用tsc进行类型检查。
类型声明文件:.d.ts文件用于描述JavaScript库的类型信息,可以通过@types/包安装第三方库的类型声明,如npm install @types/react。
掌握TypeScript的核心概念,能够编写更健壮、可维护的前端代码,在团队协作和大型项目中尤为重要。