面试官 : “每日面试题速递 | 前端面试 ( TS特别篇 )”

65 阅读3分钟

前端面试题:TypeScript核心概念

TypeScript作为JavaScript的超集,在前端开发中越来越重要。掌握其核心概念不仅能提升代码质量,也是面试中的加分项。

类型系统基础

类型注解与类型推断:TypeScript通过类型注解显式声明变量类型,如let name: string = 'hello'。同时支持类型推断,根据赋值自动推断类型,减少冗余代码。let age = 25会被推断为number类型。

基础类型:包括numberstringbooleanarraytupleenumanyvoidnullundefinednever等。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]; },确保keyobj的属性名。

高级类型

联合类型与交叉类型:联合类型|表示可以是多个类型之一,如string | number。交叉类型&表示同时满足多个类型,如Person & Serializable

类型守卫与类型断言:类型守卫通过typeofinstanceofin等缩小类型范围。类型断言使用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的核心概念,能够编写更健壮、可维护的前端代码,在团队协作和大型项目中尤为重要。