本文深入讲解了TypeScript的基础概念、主要特性以及在面向对象编程中的应用，同时提供了常见的TS面试题解析和实战演练。文章还详细介绍了TS面试中可能遇到的问题类型及相应的解决技巧，并附有ts大厂面试真题的示例代码与练习题。
TS基础概念梳理 TypeScript简介TypeScript是由微软开发的一种开源编程语言，它是JavaScript的超集，增加了静态类型检查和面向对象编程的特性。TypeScript的设计目的是为了提供更好的开发体验，包括编译时的类型检查和更好的工具支持。TypeScript被广泛应用于大型项目和团队协作中，因为它可以帮助开发者避免许多常见的错误和提高代码的可维护性。
TypeScript的语法和JavaScript非常相似，但增加了类型注解，可以为变量、函数参数、返回值等添加类型信息。TypeScript代码最终会被编译成纯JavaScript，可以在任何支持JavaScript的环境中运行。
TS与JavaScript的主要区别TypeScript和JavaScript的主要区别在于类型系统和面向对象编程的支持：
-
静态类型检查：TypeScript引入了静态类型系统，允许开发者为变量和函数添加类型注解。这有助于在编译时发现类型错误，从而减少运行时的错误。例如，你可以指定一个变量必须是特定的类型，或者一个函数应该接受什么类型的参数并返回什么类型的值。
-
面向对象编程：TypeScript支持类、接口、继承等面向对象编程（OOP）特性，这使得编写结构化、模块化的代码变得更加容易。JavaScript本身也支持面向对象编程，但TypeScript提供了更好的工具支持和更严格的语法定义。
-
模板字符串：虽然JavaScript也有类似的字符串模板功能，TypeScript的模板字符串使用模板字面量，语法更简洁，可读性更好，同时有助于类型推断。
-
模块化：TypeScript支持ES6模块系统，使得代码组织更加清晰，便于维护。
- 编译与运行时：TypeScript代码需要通过编译器转换成JavaScript后才能在浏览器或其他环境中运行。而JavaScript代码可以直接在浏览器或其他环境中运行。
示例代码
// TypeScript示例代码
let myNumber: number = 42;
myNumber = 100; // 正确
myNumber = 'Hello'; // 编译时错误
// JavaScript等价代码
let myNumber = 42;
myNumber = 100; // 正确
myNumber = 'Hello'; // 运行时错误
// TypeScript类示例
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
console.log(greeter.greet()); // 输出 "Hello, world"
// JavaScript等价代码
function Greeter(message) {
this.greeting = message;
this.greet = function() {
return "Hello, " + this.greeting;
};
}
let greeter = new Greeter("world");
console.log(greeter.greet()); // 输出 "Hello, world"TypeScript中的类和接口是面向对象编程的基础。类用于定义对象的结构和行为，而接口则用于定义对象的结构和行为的契约。
类
类是面向对象编程的核心概念，它定义了一组相关的属性和方法。类可以通过继承扩展其他类，也支持构造函数、属性、方法、静态成员等。
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
console.log(greeter.greet()); // 输出 "Hello, world"接口
接口可以看作是一组契约，定义了一个对象的结构。接口可以用于描述对象的属性、方法等。接口也可以用于类型注解，保证代码的类型安全。
interface Person {
firstName: string;
lastName: string;
fullName(): string;
}
let person: Person = {
firstName: "Tom",
lastName: "Jerry",
fullName() {
return this.firstName + " " + this.lastName;
}
}
console.log(person.fullName()); // 输出 "Tom Jerry"继承
继承是面向对象编程中的一个重要概念，它允许一个类继承另一个类的属性和方法。子类可以扩展父类的功能，也可以覆盖父类的方法。
class Animal {
constructor(public name: string) {}
sayHello() {
console.log("Hello, I'm " + this.name);
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
bark() {
console.log("Woof!");
}
}
let dog = new Dog("Rex");
dog.sayHello(); // 输出 "Hello, I'm Rex"
dog.bark(); // 输出 "Woof!"泛型
泛型是TypeScript的一个强大特性，它允许编写可以应用于多种类型的数据和操作的函数或类。泛型函数和类可以使用类型参数，从而避免重复代码。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");
console.log(output); // 输出 "myString"
interface Lengthwise {
length: number;
}
function identity2<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // 对于泛型参数可以使用成员 length
return arg;
}
let output2 = identity2({length: 10, value: "myString"});
console.log(output2); // 输出 {length: 10, value: "myString"}TypeScript的类型推断功能允许编译器根据初始值自动推断变量的类型。这使得代码更加简洁、易读，减少了显式声明类型的需要。
let number = 42;
let boolean = true;
let string = "Hello, world";
console.log(number, boolean, string); // 输出 42 true Hello, world示例代码
let inferredNumber = 42;
let inferredBoolean = true;
let inferredString = "Hello, world";
console.log(inferredNumber, inferredBoolean, inferredString); // 输出 42 true Hello, world类型断言允许开发者将一个类型转换为另一个类型，这在编译时不会改变实际的数据类型，只是告诉编译器以特定的方式处理。类型断言有两种形式：窄化断言（将一个类型断言为更具体的类型）和宽化断言（将一个类型断言为更宽泛的类型）。
let anyVar: any = 42;
let asNumber: number = <number>anyVar; // 窄化断言
let asString: string = String(<any>anyVar); // 宽化断言let anyVar: any = 42;
let asNumber: number = anyVar; // 直接赋值，不需要类型断言
let asString: string = String(anyVar); // 使用String()进行类型转换
console.log(asNumber, asString); // 输出 42 "42"装饰器
装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用 @expression 的形式，其中 expression 必须是一个函数，返回装饰器工厂，该工厂接收三个参数：目标、参数和类属性。
function readonly(target: any, name: string) {
let value = target[name];
let getter = function() {
return value;
};
let setter = function(val) {
throw new Error("Can't set readonly value");
};
Object.defineProperty(target, name, {
get: getter,
set: setter
});
}
class MyClass {
@readonly
readonly value: number = 42;
}
let myInstance = new MyClass();
console.log(myInstance.value); // 输出 42
myInstance.value = 100; // 抛出错误，不能修改readonly属性示例代码
function logged(target: any, name: string) {
let originalMethod = target[name];
let newMethod = function(...args) {
console.log("Calling method: " + name);
return originalMethod.apply(this, args);
};
return newMethod;
}
class MyClass {
@logged
myMethod(arg: string) {
console.log("Argument: " + arg);
}
}
let myInstance = new MyClass();
myInstance.myMethod("Hello"); // 输出 "Calling method: myMethod" 和 "Argument: Hello"配置文件
TypeScript项目通常使用 tsconfig.json 文件来配置编译器选项。tsconfig.json 文件可以包含诸如编译目标、模块解析、编译器选项等配置。
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}环境搭建
搭建TypeScript开发环境包括安装Node.js、npm、TypeScript，配置tsconfig.json文件，并安装必要的包。
npm install -g typescript
npm install --save-dev @types/node
npm install --save-dev ts-node类型问题
在项目中，常见的类型问题包括类型推断错误、类型兼容性问题、泛型使用错误等。解决这些问题的方法包括：
- 使用严格的类型检查选项（如
strict），确保编译器进行更严格的类型检查。 - 使用类型断言来明确指定类型。
- 合理使用泛型，以便编写更通用的函数或类。
- 使用接口定义契约，确保对象的结构和行为符合预期。
interface Person {
name: string;
age: number;
}
let person: Person = {
name: "Alice",
age: 30
};
console.log(person.name, person.age); // 输出 Alice 30示例代码
interface Rectangle {
width: number;
height: number;
}
function getArea(rectangle: Rectangle) {
return rectangle.width * rectangle.height;
}
let rectangle: Rectangle = {
width: 10,
height: 5
};
console.log(getArea(rectangle)); // 输出 50面试中常见的TypeScript问题通常包括：
- 类型推断与类型断言
- 面向对象编程（类、接口、继承、泛型）
- 装饰器与元编程
- TS配置与环境搭建
- 项目中的类型问题解决
- 代码优化与重构
面试技巧
- 熟悉基础知识：确保你对TypeScript的基础概念有深入的理解，包括类型系统、面向对象编程、装饰器等。
- 练习编写代码：通过编写实际的TypeScript代码来加深对语言特性的理解，特别是在类型推断和类型断言方面。
- 阅读文档与代码：阅读TypeScript官方文档和高质量的开源项目代码，可以帮助你了解最佳实践和高级用法。
- 准备案例：准备一些常见的面试问题的解决方案，比如类型推断、装饰器的使用等，并能够清晰地解释你的代码逻辑。
- 准备常见配置：熟悉
tsconfig.json的配置选项，以及如何在项目中使用这些配置。
注意事项
- 注意语法细节：TypeScript语法比JavaScript更为严格，一些细微的语法差异可能会导致编译错误。
- 理解类型系统：TypeScript的类型系统是面试中的重点，确保你能够正确地使用类型注解、理解类型推断和类型断言。
- 避免过度复杂化：有时候面试官可能会故意提出一些复杂的问题，确保你的解决方案既简单又有效。
- 保持沟通：在面试中保持清晰、直接的沟通，解释你的思考过程和解决方案。
选择题
-
TypeScript的编译结果最终是什么？
- A. HTML
- B. JavaScript
- C. JSON
- D. CSS
- 答案：B. JavaScript
- TypeScript支持哪些JavaScript特性？
- A. 类、接口、装饰器
- B. 模板字符串
- C. 模块化
- D. 以上都是
- 答案：D. 以上都是
简答题
- 什么是类型推断？请给出一个例子。
答案：类型推断允许编译器根据初始值自动推断变量的类型。例如：
let number = 42; // 编译器推断类型为 number
let boolean = true; // 编译器推断类型为 boolean
let string = "Hello, world"; // 编译器推断类型为 string- 什么是装饰器？请描述一个装饰器的具体实现。
答案：装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用 @expression 的形式，其中 expression 必须是一个函数，返回装饰器工厂，该工厂接收三个参数：目标、参数和类属性。
function readonly(target: any, name: string) {
let value = target[name];
let getter = function() {
return value;
};
let setter = function(val) {
throw new Error("Can't set readonly value");
};
Object.defineProperty(target, name, {
get: getter,
set: setter
});
}
class MyClass {
@readonly
readonly value: number = 42;
}
let myInstance = new MyClass();
console.log(myInstance.value); // 输出 42
myInstance.value = 100; // 抛出错误，不能修改readonly属性示例代码
// 类型推断示例
let inferredNumber = 42;
let inferredBoolean = true;
let inferredString = "Hello, world";
console.log(inferredNumber, inferredBoolean, inferredString); // 输出 42 true Hello, world
// 装饰器示例
function readonly(target: any, name: string) {
let value = target[name];
let getter = function() {
return value;
};
let setter = function(val) {
throw new Error("Can't set readonly value");
};
Object.defineProperty(target, name, {
get: getter,
set: setter
});
}
class MyClass {
@readonly
readonly value: number = 42;
}
let myInstance = new MyClass();
console.log(myInstance.value); // 输出 42
myInstance.value = 100; // 抛出错误，不能修改readonly属性编程题
- 编写一个类
Rectangle，该类有两个属性width和height，并且有一个方法area返回矩形的面积。
class Rectangle {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
area(): number {
return this.width * this.height;
}
}
let rectangle = new Rectangle(10, 5);
console.log(rectangle.area()); // 输出 50- 编写一个装饰器
Logged，使得被装饰的方法在调用时打印出函数名和参数。
function logged(target: any, name: string) {
let originalMethod = target[name];
let newMethod = function(...args) {
console.log("Calling method: " + name);
return originalMethod.apply(this, args);
};
return newMethod;
}
class MyClass {
@logged
myMethod(arg: string) {
console.log("Argument: " + arg);
}
}
let myInstance = new MyClass();
myInstance.myMethod("Hello"); // 输出 "Calling method: myMethod" 和 "Argument: Hello"代码优化
- 优化以下代码，使其更简洁且具有更好的类型安全。
let anyVar: any = 42;
let asNumber: number = <number>anyVar; // 不需要类型断言
let asString: string = String(<any>anyVar); // 使用String()进行类型转换
console.log(asNumber, asString); // 输出 42 "42"优化后的代码：
let anyVar: any = 42;
let asNumber: number = anyVar; // 直接赋值，不需要类型断言
let asString: string = String(anyVar); // 使用String()进行类型转换
console.log(asNumber, asString); // 输出 42 "42"通过以上内容的学习与练习，你应该能够更好地理解和掌握TypeScript的基础知识和面试技巧。TypeScript提供了一套强大的工具来帮助开发者编写高质量的代码，同时也能更好地应对面试中的各种问题。希望这篇文章对你有所帮助，祝你面试成功！
随时随地看视频
