TypeScript 面试题
数据类型
在 TypeScript 中分为基本类型和复杂类型；
基本类型包含 number、string、boolean、null、undefined、symbol、bigint；
复杂类型包含 object、array、function、class、interface、enum、tuple、any、void、never。
// 基本类型
let num: number = 1
let str: string = 'hello world'
let bool: boolean = true
let nul: null = null
let undef: undefined = undefined
let sym: symbol = Symbol()
let big: bigint = BigInt(1)
// 复杂类型
let obj: object = {}
let arr: number[] = [1, 2, 3]
let func: () => void = () => {}
class Person {}
interface IPerson {}
enum Color {
Red,
Green,
Blue,
}
let tuple: [number, string] = [1, '2']
let any: any = 1
let voidFunc: () => void = () => {}
let neverFunc: () => never = () => {
throw new Error()
}
Type 和 Interface 的区别
type 和 interface 都可以用来定义类型，但是他们有一些区别。
type 可以定义基本类型、联合类型、元祖类型、函数类型等，而 interface 只能定义对象类型。
// 定义基本类型
type Age = number
// 定义联合类型
type Status = 'success' | 'error'
// 定义元祖类型
type Point = [number, string]
// 定义函数类型
type func = (name: string) => number
// type 定义对象类型
type Person1 = {
name: string
age: number
}
// interface 定义对象类型
interface Person2 {
name: string
age: number
}
interface 可以被类、函数和对象实现，而 type 只能被对象实现。
interface User {
name: string
age: number
}
class Student implements User {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
}
interface 可以定义多个同名的属性，而 type 不可以。
interface User {
name: string
age: number
}
interface User {
run: () => void
}
class Student implements User {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
run() {
console.log('run')
}
}
interface 可以继承 interface 和 type。
// interface 继承 interface
interface Person1 {
name: string
}
interface Person extends Person1 {
age: number
}
// interface 继承 type
type Person1 = {
name: string
}
interface Person extends Person1 {
age: number
}
type 不可以继承，但我们可以使用 交叉类型 来实现继承。
type Person1 = {
name: string
}
interface Person2 = {
age: number
}
type Person = Person1 & Person2
请解释什么是类型推断？
typescript 可以自动推导变量的类型，而无需显式的指定类型；当你申明的变量没有指定类型时，typescript 会根据变量的初始值与上下文推导出变量的类型。
// 初始值类型推导 string
let message = 'Hello, world!'
// 函数返回值 number
function add(a: number, b: number) {
return a + b
}
请解释什么是类型拓宽？
类型拓宽是编译器在某些情况下自动将类型拓宽为更宽泛的类型。
const person = {
name: 'Jack',
age: 28,
}
// const person: { name: string age: number }
请解释什么是类型缩小？
类型缩小是通过条件判断来缩小变量的类型范围。
const printLength = (message: string | number) => {
if (typeof message === 'string') {
return message.length
}
// 类型缩小为 number
return message.toString().length
}
printLength('Hello, world!')
请解释什么是模块化？
模块化是将代码拆分为独立的块，各自封装，相互独立，同时自行决定引入执行哪些外部模块以及暴露自身模块。
在 typescript 中模块化的建立在 javascript 模块化的基础上的，支持主流的 ESM 和 CommonJs，同时也兼容其它模块化方案。
- ESM 模块化方案
/**
* a.ts
* export 导出
*/
export const a = 1
export default interface A {
name: string
age: number
}
export type Cat = {
name: string
age: number
}
export type Dog = {
name: string
age: number
color: string
}
/**
* b.ts
* import 导入
*/
import interfaceA from './a'
import { a } from './a'
import type { Cat, Dog } from './a'
- CommonJs 模块化方案
module.exports = {
a: 1,
b: 2,
}
const args = require('./utils/b')
const { a, b } = require('./utils/b')
请解释什么是装饰器？
装饰器是一种特殊类型的声明，他可以附加到类声明、方法、访问符、属性或者参数上。
常见的装饰器：类装饰器、属性装饰器、方法装饰器、参数装饰器。
装饰器分为普通装饰器和装饰器工厂，普通装饰器无法传参，装饰器工厂可以传参。
// 普通装饰器
function enhancer1(target: any) {
target.prototype.name = '张三'
target.prototype.age = '18'
}
@enhancer1
class Person1 {
constructor() {}
}
console.log(new Person1())
// 装饰器工厂
function enhancer2(name: string) {
return function (target: any) {
target.prototype.name = name
target.prototype.age = 18
}
}
@enhancer2('李四')
class Person2 {
constructor() {}
}
console.log(new Person2())
请解释什么是泛型？
泛型是在定义函数、接口或者类的时候，不预先指定具体的类型，而是在使用的时候在指定类型的一种特性。
function fun<T>(param: T): T {
return param
}
interface Animal<T> {
name: string
age: number
run: T
}
class Person<T> {
name: T
constructor(name: T) {
this.name = name
}
}
最后
感谢你的阅读~
如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！
如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！