如何准备和解答typescript面试题
本文详细探讨了TypeScript中的基础类型和变量、函数与接口、类与继承、泛型与类型保护以及装饰器与模块化。此外，文章还提供了多个示例代码帮助理解这些概念，并涵盖了TypeScript面试题的常见问题和解题步骤，帮助读者准备面试。通过这些内容，读者可以更好地理解和应用TypeScript面试题。
基础类型和变量
在TypeScript中，基本数据类型是构建程序的基础。了解这些类型对于编写类型安全的代码至关重要。在这一部分中，我们将详细探讨TypeScript中的基本数据类型，变量声明与类型推断，以及严格模式。
TypeScript中的基本数据类型
TypeScript 支持多种基本数据类型，每种类型都有其独特的用途和特性。以下是TypeScript中的基本数据类型：
number: 用于表示数值，可以是整数或浮点数。string: 用于表示文本，可以包含字母、数字、符号等。boolean: 用于表示逻辑值，只有两个可能的值：true或false。undefined: 表示未初始化的变量或参数的默认值。null: 表示空值或无值。void: 用于表示函数没有返回值或返回undefined。symbol: 唯一的、不可变的标识符，常用于对象的属性名。never: 用于表示永远不会返回的函数或无法到达的代码路径。object: 任何非原始类型的数据，例如数组、对象、函数等。
下面是一些示例代码，展示了如何声明和使用这些基本数据类型：
let num: number = 42;
let text: string = "Hello, TypeScript!";
let isActive: boolean = true;
let unInit: undefined = undefined; // 注意此时的类型推断为 `undefined`
let empty: null = null;
let func: void = undefined; // void 类型通常用于函数
let unique: symbol = Symbol('unique');
let neverType: never = (() => { throw new Error("This will never happen"); })();
let obj: object = { name: "TypeScript" };
console.log(num, text, isActive, unInit, empty, func, unique, neverType, obj);变量声明和类型推断
在TypeScript中，你可以通过两种方式声明变量：使用 let 或 const 关键字，或者通过类型注解。类型推断可以简化代码，减少显式声明类型的需要。
let num = 42; // 类型推断为 number
const PI = 3.14; // 类型推断为 number
// 显式类型声明
let num2: number = 42;
const PI2: number = 3.14;
console.log(num, PI, num2, PI2);类型推断的工作方式是基于初始值的类型。例如，如果变量值是一个字符串，那么变量的类型将被推断为 string。
let greet = "Hello!";
console.log(greet); // 输出 "Hello!"严格模式
TypeScript 提供了严格的类型检查，可以帮助你编写更安全、更可靠的代码。启用严格模式后，编译器会进行更严格的类型检查，以防止常见的错误。
// tsconfig.json 中设置 "strict": true
{
"compilerOptions": {
"strict": true
}
}在严格模式下，以下行为将被启用：
- 所有的变量必须显式声明类型或使用
let或const关键字进行声明。 - 所有的函数必须返回类型，除非它们被声明为
void。 - 所有的参数必须有类型。
函数与接口
在编程中，函数是完成特定任务的基本构建块。在TypeScript中，函数不仅可以执行操作，还可以定义类型，提供参数和返回值的详细信息。此外，接口可以用来定义一组相关的属性和方法，这有助于提高代码的可读性和可维护性。
函数定义和类型注解
函数是代码中执行特定任务的基本单元。在TypeScript中，函数定义时可以指定参数类型和返回类型，这有助于确保类型安全。
function add(a: number, b: number): number {
return a + b;
}
console.log(add(1, 2)); // 输出 3
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet("TypeScript")); // 输出 "Hello, TypeScript!"可选参数与默认参数
在某些情况下，函数可能需要接受可选或默认值的参数。TypeScript支持可选参数和默认参数，这使得函数更灵活。
可选参数
可选参数允许函数在调用时省略参数。可选参数必须放在参数列表的最后。
function logMessage(message: string, level?: string) {
console.log(`${level ? `[${level}] ` : ""}${message}`);
}
logMessage("Hello!"); // 输出 "Hello!"
logMessage("Hello!", "INFO"); // 输出 "[INFO] Hello!"默认参数
默认参数可以在函数定义时提供默认值，以便在未提供参数时使用。
function createMessage(message: string, level: string = "INFO") {
console.log(`${level} - ${message}`);
}
createMessage("Hello!"); // 输出 "INFO - Hello!"
createMessage("Hello!", "ERROR"); // 输出 "ERROR - Hello!"接口定义和使用
接口在TypeScript中用于定义对象的结构。接口可以定义对象的属性、方法、索引签名等。
interface Person {
firstName: string;
lastName: string;
greet(): string;
}
function printPerson(person: Person) {
console.log(`${person.firstName} ${person.lastName} says: ${person.greet()}`);
}
const person = {
firstName: "Alice",
lastName: "Smith",
greet() {
return `Hello, my name is ${this.firstName} ${this.lastName}`;
}
};
printPerson(person); // 输出 "Alice Smith says: Hello, my name is Alice Smith"类与继承
在面向对象编程中，类是构建复杂应用程序的基础。类可以包含属性和方法，并且可以继承其他类以实现代码重用。在TypeScript中，类提供了强大的面向对象编程功能。
类的定义与基本属性方法
定义一个类时，可以指定类的属性和方法。类的实例可以通过构造函数创建。
class Rectangle {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
area(): number {
return this.width * this.height;
}
}
const rect = new Rectangle(4, 5);
console.log(rect.area()); // 输出 20继承机制与类型兼容性
通过继承，一个类可以继承另一个类的属性和方法。子类可以扩展或覆盖父类的方法。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
speak() {
return `${this.name} makes a noise`;
}
}
class Dog extends Animal {
bark() {
return `${this.name} barks`;
}
}
const dog = new Dog("Rex");
console.log(dog.speak()); // 输出 "Rex makes a noise"
console.log(dog.bark()); // 输出 "Rex barks"泛型与类型保护
泛型是一种强大的机制，用于编写可重用的函数和类，这些函数和类可以处理多种类型的数据。类型保护是确保运行时类型安全的另一种方式。
泛型的定义与使用
泛型可以通过在类型中使用类型参数来定义。这使得函数和类可以处理多种类型的数据，而无需编写重复代码。
function identity<T>(arg: T): T {
return arg;
}
console.log(identity<string>("Hello, TypeScript!")); // 输出 "Hello, TypeScript!"
console.log(identity<number>(123)); // 输出 123类型保护的基本概念和应用实例
类型保护是一种确保运行时类型安全的方法，它允许在运行时检查变量的类型。类型保护通常通过自定义类型谓词来实现。
function isString(val: any): val is string {
return typeof val === "string";
}
function printLength(val: any) {
if (isString(val)) {
console.log(`Length: ${val.length}`);
} else {
console.log("Not a string");
}
}
printLength("Hello"); // 输出 "Length: 5"
printLength(123); // 输出 "Not a string"装饰器与模块化
装饰器是一种在运行时修改类和属性的强大机制。模块化编程允许将代码组织成独立的模块，这有助于代码的组织和重用。
装饰器的定义及使用场景
装饰器是函数，它们可以在运行时修改类的行为。最常用的装饰器有 @Component、@Injectable、@NgModule 等。
function logClass(target: Function) {
console.log(`Class ${target.name} is being created.`);
}
@logClass
class MyComponent {
constructor() {
console.log(`MyComponent instance is being created.`);
}
}
const instance = new MyComponent();
// 输出 "Class MyComponent is being created."
// 输出 "MyComponent instance is being created."模块化编程基础
模块化编程将代码组织成独立的模块，模块之间通过导出和导入来共享和使用。
// myModule.ts
export function myFunction() {
console.log("This is my function.");
}
export class MyClass {
message: string;
constructor(message: string) {
this.message = message;
}
show() {
console.log(this.message);
}
}
// main.ts
import { myFunction, MyClass } from "./myModule";
myFunction(); // 输出 "This is my function."
const instance = new MyClass("Hello, world!");
instance.show(); // 输出 "Hello, world!"常见面试题目解析
在面试时，掌握一些常见问题的解法是提高面试通过率的关键。这些题目通常涉及到基本概念、函数、类、泛型等。我们将通过具体的面试题目及其解题步骤来帮助你准备面试。
常见面试题型
- 定义并使用泛型函数
- 实现类继承
- 使用装饰器
- 创建并使用接口
- 使用严格模式编写代码
解题步骤与技巧分析
题目1：定义并使用泛型函数
问题描述：定义一个泛型函数 identity，该函数接受一个参数并返回相同的值。
解题步骤：
- 定义函数：使用
function关键字定义函数，并在参数类型后面添加<T>。 - 参数类型注解：使用
<T>标记泛型参数。 - 返回值类型注解：指定返回值类型为
T。 - 实现函数逻辑：返回输入参数的值。
示例代码：
function identity<T>(arg: T): T {
return arg;
}
console.log(identity<string>("Hello, TypeScript!")); // 输出 "Hello, TypeScript!"
console.log(identity<number>(123)); // 输出 123题目2：实现类继承
问题描述：定义一个父类 Animal 和一个子类 Dog，子类继承父类并实现额外的方法。
解题步骤：
- 定义父类：使用
class关键字定义类，并指定构造函数。 - 定义子类：使用
class关键字定义子类，并使用extends关键字继承父类。 - 实现子类方法：在子类中实现额外的方法。
示例代码：
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
speak() {
return `${this.name} makes a noise`;
}
}
class Dog extends Animal {
bark() {
return `${this.name} barks`;
}
}
const dog = new Dog("Rex");
console.log(dog.speak()); // 输出 "Rex makes a noise"
console.log(dog.bark()); // 输出 "Rex barks"题目3：使用装饰器
问题描述：定义一个装饰器 logClass，在创建类时记录日志。
解题步骤：
- 定义装饰器：使用
function关键字定义装饰器函数。 - 装饰器逻辑：在装饰器函数中添加记录日志的代码。
- 应用装饰器：使用
@符号将装饰器应用到类的定义上。
示例代码：
function logClass(target: Function) {
console.log(`Class ${target.name} is being created.`);
}
@logClass
class MyComponent {
constructor() {
console.log(`MyComponent instance is being created.`);
}
}
const instance = new MyComponent();
// 输出 "Class MyComponent is being created."
// 输出 "MyComponent instance is being created."题目4：创建并使用接口
问题描述：定义一个接口 Person，该接口包含一个方法 greet，然后实现该接口。
解题步骤：
- 定义接口：使用
interface关键字定义接口，并指定方法签名。 - 实现接口：创建一个类并实现接口中的方法。
- 使用接口：通过接口类型将对象传递给函数。
示例代码：
interface Person {
firstName: string;
lastName: string;
greet(): string;
}
function printPerson(person: Person) {
console.log(`${person.firstName} ${person.lastName} says: ${person.greet()}`);
}
const person = {
firstName: "Alice",
lastName: "Smith",
greet() {
return `Hello, my name is ${this.firstName} ${this.lastName}`;
}
};
printPerson(person); // 输出 "Alice Smith says: Hello, my name is Alice Smith"题目5：使用严格模式编写代码
问题描述：启用严格模式，并编写一个函数，确保函数具有返回类型。
解题步骤：
- 启用严格模式：在
tsconfig.json文件中设置"strict": true。 - 定义函数：确保函数明确返回类型。
- 编写函数逻辑：返回适当的值。
示例代码：
{
"compilerOptions": {
"strict": true
}
}
function add(a: number, b: number): number {
return a + b;
}
console.log(add(1, 2)); // 输出 3通过上述示例和步骤，你可以更好地理解和解决面试中的常见问题。这些示例代码可以帮助你巩固所学的知识，并在实际面试中表现得更出色。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
