本文详细介绍了TS高级知识，涵盖了联合类型与类型保护、映射类型与条件类型、泛型的深入理解以及类的高级特性等内容。此外，文章还讲解了TS在高阶函数应用、模块化编程、代码库管理和调试方面的高级技巧。通过这些内容，读者可以全面掌握并应用TS的高级特性，提升代码质量和开发效率。
TypeScript 高级知识入门教程 TypeScript 高级类型详解联合类型与类型保护
联合类型是指一个变量可以具有多种类型中的一种。使用关键字 | 来定义联合类型。例如：
let x: number | string;
x = 10; // 允许
x = "hello"; // 允许
x = true; // 错误，布尔值不是联合类型的一部分类型保护是一种确保当前类型是特定类型的方法。类型保护函数通常检查变量是否符合特定类型。例如：
function isString(value: any): value is string {
return typeof value === 'string';
}
function processValue(value: any) {
if (isString(value)) {
console.log(value.toUpperCase());
} else {
console.log(value + 1);
}
}
processValue("hello"); // 输出 "HELLO"
processValue(10); // 输出 11映射类型与条件类型
映射类型允许从现有的类型中衍生出新的类型。例如，给定一个对象类型，映射类型可以将对象的每一个属性类型都转换为另一种类型。以下是一个例子：
type Keys = keyof { a: number; b: string; }; // "a" | "b"
type ReverseMap<T> = { [P in keyof T]: T[P] }; // 创建一个映射类型，但保持原有的键值
type Original = { name: string; id: number };
type Reversed = ReverseMap<Original>; // { name: string; id: number }
let data: Reversed = { name: "Alice", id: 123 };
console.log(data); // { name: "Alice", id: 123 }条件类型允许在类型系统中使用条件逻辑。例如，我们可以使用条件类型来实现一个类型是否是数组的检查：
type IsArray<T> = T extends any[] ? true : false;
type ArrayCheck1 = IsArray<number[]>; // true
type ArrayCheck2 = IsArray<string>; // false泛型的深入理解
泛型允许我们写可重用的代码，而无需具体指定类型。例如：
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("hello"); // 类型推断为 string
console.log(output); // 输出 "hello"泛型可以在接口或类中定义：
interface GenericIdentityFn<T> {
(arg: T): T;
}
let myIdentity: GenericIdentityFn<number> = identity;
console.log(myIdentity(123)); // 输出 123函数作为参数和返回值
函数可以作为另一个函数的参数。例如：
function log<T>(value: T): T {
console.log(value);
return value;
}
let withNumber = log<number>(10);
console.log(withNumber); // 输出 10
let withString = log<string>("hello");
console.log(withString); // 输出 "hello"函数也可以作为返回值。例如，我们可以创建一个函数，该函数返回一个新的函数：
function createLogger(prefix: string) {
return function (message: string) {
console.log(prefix + ": " + message);
};
}
let logError = createLogger("ERROR");
logError("Something went wrong");
let logInfo = createLogger("INFO");
logInfo("Everything is fine");高阶函数的实际应用场景
高阶函数在许多应用场景中都非常有用，例如在异步编程中。例如，我们可以使用 Promise 来处理异步操作，并使用高阶函数来处理不同的结果：
function fetchData(url: string): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Data fetched successfully");
}, 1000);
});
}
function handleData(data: string) {
console.log("Data:", data);
}
fetchData("http://example.com")
.then(handleData); // 异步处理数据高阶函数也常用于函数式编程中，例如在数组操作中使用 map、filter 和 reduce：
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map((num) => num * num);
console.log(squares); // 输出 [1, 4, 9, 16, 25]
let evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // 输出 [2, 4]
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出 15类的继承与多态
类可以通过继承其他类来扩展其功能。例如：
class Animal {
constructor(public name: string) {}
makeSound(): void { }
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
makeSound(): void {
console.log("Woof!");
}
}
let myDog = new Dog("Rex");
myDog.makeSound(); // 输出 "Woof!"多态是指子类可以覆盖父类的方法来实现不同的行为：
class Bird extends Animal {
constructor(name: string) {
super(name);
}
makeSound(): void {
console.log("Tweet!");
}
}
let myBird = new Bird("Tweety");
myBird.makeSound(); // 输出 "Tweet!"接口与类型别名结合类的使用
接口可以定义类的结构。例如：
interface AnimalInterface {
name: string;
makeSound(): void;
}
class Cat implements AnimalInterface {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): void {
console.log("Meow!");
}
}
let myCat = new Cat("Whiskers");
myCat.makeSound(); // 输出 "Meow!"类型别名可以用来简化复杂的类型定义：
type AnimalType = {
name: string;
makeSound(): void;
};
class Fish implements AnimalType {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound(): void {
console.log("Blub!");
}
}
let myFish = new Fish("Nemo");
myFish.makeSound(); // 输出 "Blub!"ES6 模块与 TypeScript 模块化编程
TypeScript 支持 ES6 模块语法。模块化编程可以将代码组织成独立的模块，以提高代码的可维护性和可重用性。例如：
// module1.ts
export function sayHello(name: string): string {
return `Hello, ${name}`;
}
// module2.ts
import { sayHello } from "./module1";
console.log(sayHello("World")); // 输出 "Hello, World"模块的导入与导出
模块可以使用 export 关键字导出，使用 import 关键字导入：
// moduleA.ts
export function add(a: number, b: number): number {
return a + b;
}
// moduleB.ts
import { add } from "./moduleA";
console.log(add(1, 2)); // 输出 3TypeScript 还支持默认导出：
// moduleC.ts
export default function subtract(a: number, b: number): number {
return a - b;
}
// moduleD.ts
import subtract from "./moduleC";
console.log(subtract(5, 3)); // 输出 2使用 tsconfig.json 进行项目配置
tsconfig.json 文件用于配置 TypeScript 编译器的选项。例如：
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"outDir": "./dist",
"rootDir": "./src"
},
"include": [
"src/**/*"
]
}提升开发体验的常用工具介绍
常用的 TypeScript 开发工具包括：
- TypeScript 编译器：用于将 TypeScript 代码编译成 JavaScript。
- Visual Studio Code：集成 TypeScript 支持的代码编辑器。
- tslint：静态代码分析工具，用于检查代码是否符合编码规范。
- tsc-watch：用于监视文件更改并自动编译 TypeScript 文件。
- ts-node：允许直接运行 TypeScript 文件，无需编译。
例如，使用 tsc-watch 监视文件更改：
npm install -g tsc-watch
tsc-watch --onFirstError调试技巧与调试工具推荐
调试 TypeScript 代码时，可以使用以下工具：
- Visual Studio Code：内置 TypeScript 调试支持。
- Chrome DevTools：支持调试运行中的 Web 应用程序。
- Node.js Debugger：用于调试 Node.js 应用程序中的 TypeScript 代码。
例如，在 Visual Studio Code 中设置断点：
function add(a: number, b: number): number {
debugger; // 设置断点
return a + b;
}
add(1, 2);常见错误类型及解决方法
- 类型错误：确保变量和参数具有正确的类型。
let num: number = "123"; // 错误，字符串不能赋值给 number 类型- 编译错误：确保
tsconfig.json配置正确。
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true
}
}- 运行时错误：检查逻辑错误和未捕获的异常。
function divide(a: number, b: number): number {
if (b === 0) {
throw new Error("Cannot divide by zero");
}
return a / b;
}
try {
console.log(divide(10, 0)); // 抛出异常并被捕获
} catch (error) {
console.error(error.message); // 输出 "Cannot divide by zero"
}通过以上内容，我们可以深入了解 TypeScript 的高级特性和最佳实践，从而编写更高质量的代码。