TypeScript入门指南从基础语法到高级特性的完整学习路径

威震华夏关云长

1. TypeScript简介

1.1 什么是TypeScript

TypeScript是由微软开发的一种开源编程语言，它是JavaScript的超集，添加了静态类型系统。TypeScript在编译时会被转换为纯JavaScript代码，这意味着任何现有的JavaScript代码都可以在TypeScript中运行，同时TypeScript还提供了额外的功能，如类型检查、接口、枚举等。

1.2 TypeScript与JavaScript的关系

TypeScript是JavaScript的超集，这意味着所有有效的JavaScript代码都是有效的TypeScript代码。TypeScript扩展了JavaScript，添加了类型系统和其他功能，这些功能在编译时会被移除，最终生成标准的JavaScript代码。

1.3 TypeScript的优势

1. 静态类型检查：在编译时捕获错误，而不是在运行时
2. 更好的IDE支持：提供代码补全、导航和重构功能
3. 增强的可读性和可维护性：类型注解使代码更易于理解
4. 先进的JavaScript特性：支持最新的ECMAScript特性
5. 大型项目的理想选择：通过类型系统帮助管理复杂项目

1.4 开发环境搭建

要开始使用TypeScript，你需要安装Node.js和TypeScript编译器：

2. # 安装Node.js (如果尚未安装)
3. # 访问 https://nodejs.org/ 下载并安装
5. # 安装TypeScript编译器
6. npm install -g typescript
8. # 验证安装
9. tsc --version

复制代码

创建你的第一个TypeScript文件：

2. // hello.ts
3. function greet(name: string): string {
4.   return `Hello, ${name}!`;
5. }
7. const message = greet("TypeScript");
8. console.log(message);

复制代码

编译并运行：

2. tsc hello.ts
3. node hello.js

复制代码

2. TypeScript基础语法

2.1 基本类型

TypeScript提供了多种基本类型，用于定义变量的类型：

2. // 布尔类型
3. let isDone: boolean = false;
5. // 数字类型
6. let decimal: number = 6;
7. let hex: number = 0xf00d;
8. let binary: number = 0b1010;
9. let octal: number = 0o744;
11. // 字符串类型
12. let color: string = "blue";
13. color = 'red';
15. // 数组类型
16. let list: number[] = [1, 2, 3];
17. // 或者使用泛型
18. let list2: Array<number> = [1, 2, 3];
20. // 元组类型 - 允许表示一个已知元素数量和类型的数组
21. let x: [string, number];
22. x = ["hello", 10]; // 正确
23. // x = [10, "hello"]; // 错误
25. // 枚举类型
26. enum Color {Red, Green, Blue}
27. let c: Color = Color.Green;
29. // Any类型 - 不希望类型检查器对这些值进行检查
30. let notSure: any = 4;
31. notSure = "maybe a string";
32. notSure = false;
34. // Void类型 - 表示没有任何类型
35. function warnUser(): void {
36.   console.log("This is a warning message");
37. }
39. // Null 和 Undefined
40. let u: undefined = undefined;
41. let n: null = null;
43. // Never类型 - 表示永不存在的值的类型
44. function error(message: string): never {
45.   throw new Error(message);
46. }
48. // Object类型
49. let obj: object = {name: "TypeScript"};

复制代码

2.2 变量声明

TypeScript支持JavaScript的变量声明方式，并添加了类型注解：

2. // 使用var声明（不推荐，有作用域问题）
3. var myVar: string = "Hello";
5. // 使用let声明（推荐，块级作用域）
6. let myLet: string = "Hello";
8. // 使用const声明（推荐，常量）
9. const myConst: string = "Hello";
11. // 解构赋值
12. let input = [1, 2];
13. let [first, second] = input;
15. // 对象解构
16. let o = {
17.     a: "foo",
18.     b: 12,
19.     c: "bar"
20. };
21. let {a, b} = o;
23. // 类型断言
24. let someValue: any = "this is a string";
25. let strLength: number = (someValue as string).length;
26. // 或者使用尖括号语法
27. let strLength2: number = (<string>someValue).length;

复制代码

2.3 函数

TypeScript为函数添加了类型注解，使函数更加安全：

2. // 基本函数类型
3. function add(x: number, y: number): number {
4.     return x + y;
5. }
7. // 完整函数类型
8. let myAdd: (x: number, y: number) => number = function(x: number, y: number): number {
9.     return x + y;
10. };
12. // 可选参数
13. function buildName(firstName: string, lastName?: string): string {
14.     if (lastName) {
15.         return firstName + " " + lastName;
16.     } else {
17.         return firstName;
18.     }
19. }
21. // 默认参数
22. function buildName2(firstName: string, lastName: string = "Smith"): string {
23.     return firstName + " " + lastName;
24. }
26. // 剩余参数
27. function buildName3(firstName: string, ...restOfName: string[]): string {
28.     return firstName + " " + restOfName.join(" ");
29. }
31. // 函数重载
32. function pickCard(x: {suit: string; card: number;}[]): number;
33. function pickCard(x: number): {suit: string; card: number;};
34. function pickCard(x): any {
35.     if (typeof x == "object") {
36.         let pickedCard = Math.floor(Math.random() * x.length);
37.         return pickedCard;
38.     } else if (typeof x == "number") {
39.         let pickedSuit = Math.floor(x / 13);
40.         return { suit: suits[pickedSuit], card: x % 13 };
41.     }
42. }

复制代码

2.4 接口

接口是TypeScript的核心概念之一，用于定义对象的结构：

2. // 基本接口
3. interface Person {
4.     name: string;
5.     age: number;
6. }
8. function greet(person: Person): string {
9.     return "Hello, " + person.name;
10. }
12. // 可选属性
13. interface SquareConfig {
14.     color?: string;
15.     width?: number;
16. }
18. // 只读属性
19. interface Point {
20.     readonly x: number;
21.     readonly y: number;
22. }
24. // 函数类型
25. interface SearchFunc {
26.     (source: string, subString: string): boolean;
27. }
29. // 可索引类型
30. interface StringArray {
31.     [index: number]: string;
32. }
34. // 类类型
35. interface ClockInterface {
36.     currentTime: Date;
37.     setTime(d: Date): void;
38. }
40. class Clock implements ClockInterface {
41.     currentTime: Date = new Date();
42.     setTime(d: Date) {
43.         this.currentTime = d;
44.     }
45.     constructor(h: number, m: number) { }
46. }
48. // 扩展接口
49. interface Shape {
50.     color: string;
51. }
53. interface Square extends Shape {
54.     sideLength: number;
55. }

复制代码

2.5 类

TypeScript中的类是对ES6类的扩展，添加了类型和其他特性：

2. // 基本类
3. class Greeter {
4.     greeting: string;
5.     constructor(message: string) {
6.         this.greeting = message;
7.     }
8.     greet(): string {
9.         return "Hello, " + this.greeting;
10.     }
11. }
13. // 继承
14. class Animal {
15.     name: string;
16.     constructor(theName: string) { this.name = theName; }
17.     move(distanceInMeters: number = 0) {
18.         console.log(`${this.name} moved ${distanceInMeters}m.`);
19.     }
20. }
22. class Snake extends Animal {
23.     constructor(name: string) { super(name); }
24.     move(distanceInMeters = 5) {
25.         console.log("Slithering...");
26.         super.move(distanceInMeters);
27.     }
28. }
30. // 公共、私有与受保护的修饰符
31. class Animal2 {
32.     public name: string;
33.     private privateName: string;
34.     protected protectedName: string;
35.     constructor(theName: string) {
36.         this.name = theName;
37.         this.privateName = theName;
38.         this.protectedName = theName;
39.     }
40. }
42. // 只读属性
43. class Octopus {
44.     readonly name: string;
45.     readonly numberOfLegs: number = 8;
46.     constructor(theName: string) {
47.         this.name = theName;
48.     }
49. }
51. // 存取器
52. let passcode = "secret passcode";
53. class Employee {
54.     private _fullName: string;
56.     get fullName(): string {
57.         return this._fullName;
58.     }
60.     set fullName(newName: string) {
61.         if (passcode && passcode === "secret passcode") {
62.             this._fullName = newName;
63.         } else {
64.             console.log("Error: Unauthorized update of employee!");
65.         }
66.     }
67. }
69. // 静态属性
70. class Grid {
71.     static origin = {x: 0, y: 0};
72.     calculateDistanceFromOrigin(point: {x: number; y: number;}) {
73.         let xDist = (point.x - Grid.origin.x);
74.         let yDist = (point.y - Grid.origin.y);
75.         return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
76.     }
77.     constructor(public scale: number) { }
78. }
80. // 抽象类
81. abstract class Animal3 {
82.     abstract makeSound(): void;
83.     move(): void {
84.         console.log("roaming the earth...");
85.     }
86. }
88. class Dog extends Animal3 {
89.     makeSound(): void {
90.         console.log("Woof! Woof!");
91.     }
92. }

复制代码

2.6 泛型基础

泛型允许创建可重用的组件，一个组件可以支持多种类型的数据：

2. // 基本泛型
3. function identity<T>(arg: T): T {
4.     return arg;
5. }
7. // 使用泛型
8. let output = identity<string>("myString");
9. let output2 = identity("myString"); // 类型推断
11. // 泛型接口
12. interface GenericIdentityFn {
13.     <T>(arg: T): T;
14. }
16. // 泛型类
17. class GenericNumber<T> {
18.     zeroValue: T;
19.     add: (x: T, y: T) => T;
20. }
22. let myGenericNumber = new GenericNumber<number>();
23. myGenericNumber.zeroValue = 0;
24. myGenericNumber.add = function(x, y) { return x + y; };
26. // 泛型约束
27. interface Lengthwise {
28.     length: number;
29. }
31. function loggingIdentity<T extends Lengthwise>(arg: T): T {
32.     console.log(arg.length);  // 现在我们知道arg具有length属性
33.     return arg;
34. }

复制代码

3. 中级特性

3.1 高级类型

TypeScript提供了多种高级类型，使类型系统更加灵活和强大：

2. // 交叉类型
3. interface BusinessPartner {
4.     name: string;
5.     credit: number;
6. }
8. interface Identity {
9.     id: number;
10.     name: string;
11. }
13. type Employee = BusinessPartner & Identity;
15. // 联合类型
16. function padLeft(value: string, padding: string | number) {
17.     if (typeof padding === "number") {
18.         return Array(padding + 1).join(" ") + value;
19.     }
20.     if (typeof padding === "string") {
21.         return padding + value;
22.     }
23.     throw new Error(`Expected string or number, got '${padding}'.`);
24. }
26. // 类型别名
27. type Name = string;
28. type NameResolver = () => string;
29. type NameOrResolver = Name | NameResolver;
31. function getName(n: NameOrResolver): Name {
32.     if (typeof n === "string") {
33.         return n;
34.     } else {
35.         return n();
36.     }
37. }
39. // 字面量类型
40. type Easing = "ease-in" | "ease-out" | "ease-in-out";
42. // 可辨识联合
43. interface Square {
44.     kind: "square";
45.     size: number;
46. }
47. interface Rectangle {
48.     kind: "rectangle";
49.     width: number;
50.     height: number;
51. }
52. interface Circle {
53.     kind: "circle";
54.     radius: number;
55. }
57. type Shape = Square | Rectangle | Circle;
59. function area(s: Shape): number {
60.     switch (s.kind) {
61.         case "square": return s.size * s.size;
62.         case "rectangle": return s.width * s.height;
63.         case "circle": return Math.PI * s.radius ** 2;
64.     }
65. }
67. // 索引类型
68. function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
69.     return names.map(n => o[n]);
70. }
72. interface Person {
73.     name: string;
74.     age: number;
75. }
76. let person: Person = {
77.     name: 'Jarid',
78.     age: 35
79. };
80. let strings: string[] = pluck(person, ['name']); // ok, string[]

复制代码

3.2 类型守卫

类型守卫允许你在特定的代码块中缩小类型的范围：

2. // typeof 类型守卫
3. function padLeft(value: string, padding: string | number) {
4.     if (typeof padding === "number") {
5.         return Array(padding + 1).join(" ") + value;
6.     }
7.     if (typeof padding === "string") {
8.         return padding + value;
9.     }
10.     throw new Error(`Expected string or number, got '${padding}'.`);
11. }
13. // instanceof 类型守卫
14. class Bird {
15.     fly() {
16.         console.log("bird flies");
17.     }
18. }
20. class Fish {
21.     swim() {
22.         console.log("fish swims");
23.     }
24. }
26. function pet(pet: Bird | Fish) {
27.     if (pet instanceof Bird) {
28.         pet.fly();
29.     } else if (pet instanceof Fish) {
30.         pet.swim();
31.     }
32. }
34. // 自定义类型守卫
35. function isFish(pet: Fish | Bird): pet is Fish {
36.     return (<Fish>pet).swim !== undefined;
37. }
39. // 可null类型
40. function f(sn: string | null): string {
41.     if (sn === null) {
42.         return "default";
43.     } else {
44.         return sn;
45.     }
46. }

复制代码

3.3 装饰器

装饰器是一种特殊类型的声明，可以附加到类声明、方法、访问符、属性或参数上：

2. // 类装饰器
3. function sealed(constructor: Function) {
4.     Object.seal(constructor);
5.     Object.seal(constructor.prototype);
6. }
8. @sealed
9. class Greeter {
10.     greeting: string;
11.     constructor(message: string) {
12.         this.greeting = message;
13.     }
14.     greet() {
15.         return "Hello, " + this.greeting;
16.     }
17. }
19. // 方法装饰器
20. function enumerable(value: boolean) {
21.     return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
22.         descriptor.enumerable = value;
23.     };
24. }
26. class Greeter2 {
27.     greeting: string;
28.     constructor(message: string) {
29.         this.greeting = message;
30.     }
32.     @enumerable(false)
33.     greet() {
34.         return "Hello, " + this.greeting;
35.     }
36. }
38. // 访问器装饰器
39. class Point {
40.     private _x: number;
41.     private _y: number;
42.     constructor(x: number, y: number) {
43.         this._x = x;
44.         this._y = y;
45.     }
47.     @configurable(false)
48.     get x() { return this._x; }
50.     @configurable(false)
51.     get y() { return this._y; }
52. }
54. function configurable(value: boolean) {
55.     return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
56.         descriptor.configurable = value;
57.     };
58. }
60. // 属性装饰器
61. class Greeter3 {
62.     @format("Hello, %s")
63.     greeting: string;
65.     constructor(message: string) {
66.         this.greeting = message;
67.     }
68.     greet() {
69.         let greetingString = this.greeting;
70.         return greetingString;
71.     }
72. }
74. import "reflect-metadata";
76. function format(formatString: string) {
77.     return function (target: any, propertyKey: string): void {
78.         Reflect.defineMetadata("format", formatString, target, propertyKey);
79.     };
80. }
82. // 参数装饰器
83. class Greeter4 {
84.     greeting: string;
86.     constructor(message: string) {
87.         this.greeting = message;
88.     }
90.     @validate
91.     greet(@required name: string) {
92.         return "Hello " + name + ", " + this.greeting;
93.     }
94. }
96. import "reflect-metadata";
98. function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
99.     let requiredParams: number[] = Reflect.getOwnMetadata("required", target, propertyKey) || [];
100.     requiredParams.push(parameterIndex);
101.     Reflect.defineMetadata("required", requiredParams, target, propertyKey);
102. }
104. function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<Function>) {
105.     let method = descriptor.value;
106.    
107.     descriptor.value = function () {
108.         let requiredParams: number[] = Reflect.getOwnMetadata("required", target, propertyName);
109.         if (requiredParams) {
110.             for (let parameterIndex of requiredParams) {
111.                 if (parameterIndex >= arguments.length || arguments[parameterIndex] === undefined) {
112.                     throw new Error("Missing required argument.");
113.                 }
114.             }
115.         }
116.         
117.         return method.apply(this, arguments);
118.     }
119. }

复制代码

3.4 模块系统

TypeScript支持ES模块和CommonJS模块系统：

2. // 导出
3. // 导出声明
4. export interface StringValidator {
5.     isAcceptable(s: string): boolean;
6. }
8. // 导出语句
9. export class ZipCodeValidator implements StringValidator {
10.     isAcceptable(s: string) {
11.         return s.length === 5 && numberRegexp.test(s);
12.     }
13. }
15. // 导入
16. import { StringValidator } from "./StringValidator";
17. import { ZipCodeValidator } from "./ZipCodeValidator";
19. // 默认导出
20. export default class ZipCodeValidator {
21.     // ...
22. }
24. // 导入默认导出
25. import ZipCodeValidator from "./ZipCodeValidator";
27. // 导出所有
28. export * from "./StringValidator";
30. // 重新导出
31. export { ZipCodeValidator as RegExpBasedZipCodeValidator } from "./ZipCodeValidator";

复制代码

3.5 命名空间

命名空间是TypeScript中组织代码的一种方式，特别适用于避免全局命名冲突：

2. // 基本命名空间
3. namespace Validation {
4.     export interface StringValidator {
5.         isAcceptable(s: string): boolean;
6.     }
8.     const lettersRegexp = /^[A-Za-z]+$/;
9.     const numberRegexp = /^[0-9]+$/;
11.     export class LettersOnlyValidator implements StringValidator {
12.         isAcceptable(s: string) {
13.             return lettersRegexp.test(s);
14.         }
15.     }
17.     export class ZipCodeValidator implements StringValidator {
18.         isAcceptable(s: string) {
19.             return s.length === 5 && numberRegexp.test(s);
20.         }
21.     }
22. }
24. // 使用命名空间
25. let validators: { [s: string]: Validation.StringValidator; } = {};
26. validators["ZIP code"] = new Validation.ZipCodeValidator();
28. // 嵌套命名空间
29. namespace Shapes {
30.     namespace Polygons {
31.         export class Triangle { }
32.         export class Square { }
33.     }
34. }
36. // 使用嵌套命名空间
37. let sq = new Shapes.Polygons.Square();
39. // 命名空间别名
40. import polygons = Shapes.Polygons;
41. let tri = new polygons.Triangle();

复制代码

4. 高级特性

4.1 高级泛型

TypeScript的泛型系统非常强大，支持复杂的类型操作：

2. // 泛型约束与索引类型
3. function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
4.     return obj[key];
5. }
7. let x = { a: 1, b: 2, c: 3, d: 4 };
9. getProperty(x, "a"); // okay
10. getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.
12. // 泛型与new
13. function create<T>(c: { new(): T; }): T {
14.     return new c();
15. }
17. // 泛型与默认类型
18. interface GenericIdentityFn<T = string> {
19.     (arg: T): T;
20. }
22. // 泛型与条件类型
23. type TypeName<T> =
24.     T extends string ? "string" :
25.     T extends number ? "number" :
26.     T extends boolean ? "boolean" :
27.     T extends undefined ? "undefined" :
28.     T extends Function ? "function" :
29.     "object";
31. type T0 = TypeName<string>;  // "string"
32. type T1 = TypeName<"a">;  // "string"
33. type T2 = TypeName<true>;  // "boolean"
34. type T3 = TypeName<() => void>;  // "function"
35. type T4 = TypeName<string[]>;  // "object"
37. // 泛型与映射类型
38. type Readonly<T> = {
39.     readonly [P in keyof T]: T[P];
40. };
42. type Partial<T> = {
43.     [P in keyof T]?: T[P];
44. };
46. type Person = {
47.     name: string;
48.     age: number;
49. };
51. type ReadonlyPerson = Readonly<Person>;
52. type PartialPerson = Partial<Person>;

复制代码

4.2 条件类型

条件类型允许根据条件选择类型：

2. // 基本条件类型
3. type NonNullable<T> = T extends null | undefined ? never : T;
5. // 分布式条件类型
6. type ToArray<T> = T extends any ? T[] : never;
8. type StrOrNumArray = ToArray<string | number>;  // string[] | number[]
10. // 条件类型与推断
11. type ExtractType<T> = T extends Promise<infer U> ? U : never;
13. type PromiseType = ExtractType<Promise<string>>;  // string
15. // 条件类型与映射
16. type ExtractInfo<T> = {
17.     [K in keyof T]: T[K] extends Function ? K : never;
18. }[keyof T];
20. interface User {
21.     id: number;
22.     name: string;
23.     updateName: (newName: string) => void;
24. }
26. type FunctionKeys = ExtractInfo<User>;  // "updateName"

复制代码

4.3 映射类型

映射类型允许基于现有类型创建新类型：

2. // 基本映射类型
3. type OptionsFlags<T> = {
4.     [K in keyof T]: boolean;
5. };
7. interface FeatureFlags {
8.     darkMode: () => void;
9.     newUserProfile: () => void;
10. }
12. type FeatureOptions = OptionsFlags<FeatureFlags>;
13. // 等同于:
14. // {
15. //     darkMode: boolean;
16. //     newUserProfile: boolean;
17. // }
19. // 修改属性
20. type CreateMutable<T> = {
21.     -readonly [P in keyof T]: T[P];
22. };
24. type LockedAccount = {
25.     readonly id: string;
26.     readonly name: string;
27. };
29. type UnlockedAccount = CreateMutable<LockedAccount>;
30. // 等同于:
31. // {
32. //     id: string;
33. //     name: string;
34. // }
36. // 添加属性修饰符
37. type Concrete<T> = {
38.     [P in keyof T]-?: T[P];
39. };
41. type MaybeUser = {
42.     id: string;
43.     name?: string;
44.     age?: number;
45. };
47. type User = Concrete<MaybeUser>;
48. // 等同于:
49. // {
50. //     id: string;
51. //     name: string;
52. //     age: number;
53. // }
55. // 通过as重新映射键
56. type Getters<T> = {
57.     [P in keyof T as `get${Capitalize<string & P>}`]: () => T[P];
58. };
60. interface Person {
61.     name: string;
62.     age: number;
63.     location: string;
64. }
66. type LazyPerson = Getters<Person>;
67. // 等同于:
68. // {
69. //     getName: () => string;
70. //     getAge: () => number;
71. //     getLocation: () => string;
72. // }

复制代码

4.4 模板字面量类型

模板字面量类型允许基于字符串操作创建类型：

2. // 基本模板字面量类型
3. type EmailLocaleIDs = "welcome_email" | "email_heading";
4. type FooterLocaleIDs = "footer_title" | "footer_sendoff";
6. type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
7. // 等同于:
8. // "welcome_email_id" | "email_heading_id" | "footer_title_id" | "footer_sendoff_id"
10. // 字符串联合类型中的交叉
11. type Email = "email";
12. type Locale = "en" | "de" | "fr";
14. type EmailLocaleIDs = `${Email}_${Locale}`;
15. // 等同于:
16. // "email_en" | "email_de" | "email_fr"
18. // 大小写转换
19. type Greeting = "Hello, World";
20. type ShoutyGreeting = Uppercase<Greeting>;
21. // 等同于:
22. // "HELLO, WORLD"
24. type ASCIICacheKey<Str extends string> = `ID-${Uppercase<Str>}`;
25. type MainID = ASCIICacheKey<"my_app">;
26. // 等同于:
27. // "ID-MY_APP"
29. // 字符串操作类型
30. type Uncapitalize<S extends string> = intrinsic;
31. type Capitalize<S extends string> = intrinsic;
32. type Uppercase<S extends string> = intrinsic;
33. type Lowercase<S extends string> = intrinsic;

复制代码

4.5 类型推断与控制流分析

TypeScript的类型推断和控制流分析能力非常强大：

2. // 类型推断
3. let x = 3;  // 推断为number类型
5. // 上下文类型
6. window.onmousedown = function(mouseEvent) {
7.     console.log(mouseEvent.button);  // 推断为MouseEvent类型
8. };
10. // 类型保护与控制流分析
11. function padLeft(value: string, padding: string | number) {
12.     if (typeof padding === "number") {
13.         return Array(padding + 1).join(" ") + value;
14.     }
15.     return padding + value;
16. }
18. // 可辨识联合与控制流分析
19. interface Square {
20.     kind: "square";
21.     size: number;
22. }
23. interface Rectangle {
24.     kind: "rectangle";
25.     width: number;
26.     height: number;
27. }
28. interface Circle {
29.     kind: "circle";
30.     radius: number;
31. }
33. type Shape = Square | Rectangle | Circle;
35. function area(s: Shape): number {
36.     switch (s.kind) {
37.         case "square": return s.size * s.size;
38.         case "rectangle": return s.width * s.height;
39.         case "circle": return Math.PI * s.radius ** 2;
40.         default:
41.             // 如果没有处理所有情况，这里会报错
42.             const _exhaustiveCheck: never = s;
43.             return _exhaustiveCheck;
44.     }
45. }
47. // 类型推断与null检查
48. function doSomething(x: string | null) {
49.     if (x === null) {
50.         // 在这个块中，x的类型是null
51.     } else {
52.         // 在这个块中，x的类型是string
53.         console.log(x.toUpperCase());
54.     }
55. }
57. // 类型推断与赋值分析
58. let x: string | number | boolean;
59. x = "hello";  // x现在是string类型
60. x = 42;       // x现在是number类型
61. x = true;     // x现在是boolean类型

复制代码

5. 工程实践

5.1 配置文件详解

TypeScript的配置文件tsconfig.json是项目中的关键文件：

2. {
3.   "compilerOptions": {
4.     /* 基本选项 */
5.     "target": "es5",                          // 指定ECMAScript目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'
6.     "module": "commonjs",                     // 指定模块代码生成: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'
7.     "lib": ["es6", "dom"],                    // 指定要包含在编译中的库文件
8.     "allowJs": true,                          // 允许编译javascript文件
9.     "checkJs": true,                          // 在.js文件中报告错误
10.     "jsx": "react",                           // 指定JSX代码生成: 'preserve', 'react-native', or 'react'
11.     "declaration": true,                      // 生成相应的 '.d.ts' 文件
12.     "sourceMap": true,                        // 生成相应的 '.map' 文件
13.     "outFile": "./",                          // 连接输出到单个文件
14.     "outDir": "./",                           // 重定向输出结构到目录
15.     "rootDir": "./",                          // 指定输入文件的基本目录
16.     "removeComments": true,                   // 不输出注释到输出
17.     "noEmit": true,                           // 不输出文件
18.     "importHelpers": true,                    // 从tslib导入辅助工具函数
19.     "downlevelIteration": true,               // 在ES3和ES5中完全支持迭代
20.     "isolatedModules": true,                  // 将每个文件作为单独的模块
21.     "strict": true,                           // 启用所有严格类型检查选项
22.    
23.     /* 额外检查 */
24.     "noUnusedLocals": true,                   // 报告未使用的局部变量的错误
25.     "noUnusedParameters": true,               // 报告未使用的参数的错误
26.     "noImplicitReturns": true,               // 在函数中没有隐式返回时报告错误
27.     "noFallthroughCasesInSwitch": true,       // 在switch语句中报告fallthrough情况的错误
28.    
29.     /* 模块解析选项 */
30.     "moduleResolution": "node",               // 指定模块解析策略: 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
31.     "baseUrl": "./",                          // 用于解析非相对模块名称的基本目录
32.     "paths": {},                              // 模块名到基于baseUrl的路径映射
33.     "rootDirs": [],                           // 根文件夹列表，其组合内容表示项目运行时的内容结构
34.     "typeRoots": [],                          // 包含类型声明的文件夹列表
35.     "types": [],                              // 要包含的类型声明文件名列表
36.     "allowSyntheticDefaultImports": true,     // 允许从没有默认导出的模块中默认导入
37.    
38.     /* Source Map Options */
39.     "sourceRoot": "",                         // 指定调试器应定位的位置，而不是生成的源位置
40.     "mapRoot": "",                            // 指定调试器应定位映射文件的位置，而不是生成的位置
41.     "inlineSourceMap": true,                  // 生成带有源映射的单个文件，而不是单独的文件
42.     "inlineSources": true,                    // 将源代码与源映射一起内联到单个文件中
43.    
44.     /* 实验性选项 */
45.     "experimentalDecorators": true,           // 启用对ES装饰器的实验性支持
46.     "emitDecoratorMetadata": true            // 为装饰器发出设计类型元数据
47.   },
48.   "include": [
49.     "src/**/*"
50.   ],
51.   "exclude": [
52.     "node_modules",
53.     "**/*.spec.ts"
54.   ]
55. }

复制代码

5.2 与框架集成

TypeScript可以与现代前端框架无缝集成：

2. // 安装类型定义
3. npm install --save-dev @types/react @types/react-dom
5. // 基本函数组件
6. import React from 'react';
8. interface GreetingProps {
9.   name: string;
10. }
12. const Greeting: React.FC<GreetingProps> = ({ name }) => {
13.   return <h1>Hello, {name}!</h1>;
14. };
16. export default Greeting;
18. // 类组件
19. import React from 'react';
21. interface CounterState {
22.   count: number;
23. }
25. class Counter extends React.Component<{}, CounterState> {
26.   constructor(props: {}) {
27.     super(props);
28.     this.state = {
29.       count: 0
30.     };
31.   }
33.   increment = () => {
34.     this.setState({ count: this.state.count + 1 });
35.   };
37.   render() {
38.     return (
39.       <div>
40.         <p>Count: {this.state.count}</p>
41.         <button onClick={this.increment}>Increment</button>
42.       </div>
43.     );
44.   }
45. }
47. export default Counter;
49. // 使用Hooks
50. import React, { useState, useEffect } from 'react';
52. interface User {
53.   id: number;
54.   name: string;
55.   email: string;
56. }
58. const UserProfile: React.FC<{ userId: number }> = ({ userId }) => {
59.   const [user, setUser] = useState<User | null>(null);
60.   const [loading, setLoading] = useState<boolean>(true);
62.   useEffect(() => {
63.     const fetchUser = async () => {
64.       try {
65.         setLoading(true);
66.         const response = await fetch(`https://api.example.com/users/${userId}`);
67.         const userData = await response.json();
68.         setUser(userData);
69.       } catch (error) {
70.         console.error('Error fetching user:', error);
71.       } finally {
72.         setLoading(false);
73.       }
74.     };
76.     fetchUser();
77.   }, [userId]);
79.   if (loading) return <div>Loading...</div>;
80.   if (!user) return <div>User not found</div>;
82.   return (
83.     <div>
84.       <h2>{user.name}</h2>
85.       <p>Email: {user.email}</p>
86.     </div>
87.   );
88. };
90. export default UserProfile;

复制代码

2. // 安装类型定义
3. npm install --save-dev vue-class-component vue-property-decorator
5. // 使用装饰器
6. import { Vue, Component, Prop } from 'vue-property-decorator';
8. @Component
9. export default class Greeting extends Vue {
10.   @Prop({ type: String, required: true })
11.   name!: string;
13.   get greeting(): string {
14.     return `Hello, ${this.name}!`;
15.   }
16. }
18. // 使用Composition API
19. import { defineComponent, ref, computed } from 'vue';
21. export default defineComponent({
22.   props: {
23.     name: {
24.       type: String,
25.       required: true
26.     }
27.   },
28.   setup(props) {
29.     const count = ref(0);
30.    
31.     const doubleCount = computed(() => count.value * 2);
32.    
33.     function increment() {
34.       count.value++;
35.     }
36.    
37.     return {
38.       count,
39.       doubleCount,
40.       increment
41.     };
42.   }
43. });
45. // 使用TypeScript与Vue 3的<script setup>
46. <script setup lang="ts">
47. import { ref, computed } from 'vue';
49. interface Props {
50.   name: string;
51.   initialCount?: number;
52. }
54. const props = withDefaults(defineProps<Props>(), {
55.   initialCount: 0
56. });
58. const count = ref(props.initialCount);
59. const doubleCount = computed(() => count.value * 2);
61. function increment() {
62.   count.value++;
63. }
64. </script>

复制代码

5.3 代码规范与最佳实践

使用TypeScript时，遵循一些最佳实践可以提高代码质量和可维护性：

2. // 1. 使用明确的类型而不是any
3. // 不推荐
4. function processData(data: any) {
5.   return data.map(item => item.id);
6. }
8. // 推荐
9. interface DataItem {
10.   id: number;
11.   name: string;
12. }
14. function processData(data: DataItem[]) {
15.   return data.map(item => item.id);
16. }
18. // 2. 使用接口定义对象形状
19. // 不推荐
20. function printUser(user: { name: string; age: number }) {
21.   console.log(`${user.name} is ${user.age} years old`);
22. }
24. // 推荐
25. interface User {
26.   name: string;
27.   age: number;
28. }
30. function printUser(user: User) {
31.   console.log(`${user.name} is ${user.age} years old`);
32. }
34. // 3. 使用类型别名简化复杂类型
35. // 不推荐
36. function processItems(items: Array<{ id: number; name: string; tags: string[] }>) {
37.   // ...
38. }
40. // 推荐
41. type Item = {
42.   id: number;
43.   name: string;
44.   tags: string[];
45. };
47. function processItems(items: Item[]) {
48.   // ...
49. }
51. // 4. 使用泛型提高代码复用性
52. // 不推荐
53. function getNumberArrayLength(arr: number[]): number {
54.   return arr.length;
55. }
57. function getStringArrayLength(arr: string[]): number {
58.   return arr.length;
59. }
61. // 推荐
62. function getArrayLength<T>(arr: T[]): number {
63.   return arr.length;
64. }
66. // 5. 使用枚举代替魔法字符串
67. // 不推荐
68. function setStatus(status: string) {
69.   if (status === 'active') {
70.     // ...
71.   } else if (status === 'inactive') {
72.     // ...
73.   }
74. }
76. // 推荐
77. enum Status {
78.   Active = 'active',
79.   Inactive = 'inactive',
80.   Pending = 'pending'
81. }
83. function setStatus(status: Status) {
84.   if (status === Status.Active) {
85.     // ...
86.   } else if (status === Status.Inactive) {
87.     // ...
88.   }
89. }
91. // 6. 使用类型守卫缩小类型范围
92. // 不推荐
93. function processValue(value: string | number) {
94.   if (typeof value === 'string') {
95.     console.log(value.toUpperCase());
96.   } else {
97.     console.log(value.toFixed(2));
98.   }
99. }
101. // 推荐
102. function isString(value: unknown): value is string {
103.   return typeof value === 'string';
104. }
106. function processValue(value: string | number) {
107.   if (isString(value)) {
108.     console.log(value.toUpperCase());
109.   } else {
110.     console.log(value.toFixed(2));
111.   }
112. }
114. // 7. 使用readonly和const确保不可变性
115. // 不推荐
116. let config = {
117.   apiUrl: 'https://api.example.com',
118.   timeout: 5000
119. };
121. config.timeout = 10000; // 可能导致意外修改
123. // 推荐
124. interface Config {
125.   readonly apiUrl: string;
126.   readonly timeout: number;
127. }
129. const config: Config = {
130.   apiUrl: 'https://api.example.com',
131.   timeout: 5000
132. };
134. // 8. 使用工具类型简化类型操作
135. // 不推荐
136. interface PartialUser {
137.   id?: number;
138.   name?: string;
139.   email?: string;
140. }
142. // 推荐
143. interface User {
144.   id: number;
145.   name: string;
146.   email: string;
147. }
149. type PartialUser = Partial<User>;

复制代码

5.4 调试技巧

在TypeScript中进行调试时，有一些技巧可以帮助你更有效地解决问题：

2. // 1. 使用类型断言进行调试
3. function processValue(value: unknown) {
4.   // 使用类型断言检查类型
5.   if ((value as string).toUpperCase) {
6.     console.log("It's a string");
7.   } else if ((value as number).toFixed) {
8.     console.log("It's a number");
9.   }
10. }
12. // 2. 使用条件类型进行类型检查
13. type IsString<T> = T extends string ? true : false;
15. type CheckString = IsString<"hello">; // true
16. type CheckNumber = IsString<42>; // false
18. // 3. 使用类型守卫进行运行时检查
19. function isString(value: unknown): value is string {
20.   return typeof value === 'string';
21. }
23. function processValue(value: unknown) {
24.   if (isString(value)) {
25.     // 在这个块中，TypeScript知道value是string类型
26.     console.log(value.toUpperCase());
27.   }
28. }
30. // 4. 使用类型谓词进行高级类型检查
31. interface Bird {
32.   fly(): void;
33.   layEggs(): void;
34. }
36. interface Fish {
37.   swim(): void;
38.   layEggs(): void;
39. }
41. function isFish(pet: Fish | Bird): pet is Fish {
42.   return (pet as Fish).swim !== undefined;
43. }
45. function processPet(pet: Fish | Bird) {
46.   if (isFish(pet)) {
47.     pet.swim();
48.   } else {
49.     pet.fly();
50.   }
51. }
53. // 5. 使用映射类型进行调试
54. type Optional<T> = {
55.   [K in keyof T]?: T[K];
56. };
58. interface User {
59.   id: number;
60.   name: string;
61.   email: string;
62. }
64. type PartialUser = Optional<User>;
66. // 6. 使用条件类型和infer进行类型推断
67. type Unpack<T> = T extends Array<infer U> ? U : T;
69. type UnpackedString = Unpack<string[]>; // string
70. type UnpackedNumber = Unpack<number>; // number
72. // 7. 使用类型断言和类型保护处理DOM元素
73. function getElementById<T extends HTMLElement>(id: string): T | null {
74.   const element = document.getElementById(id);
75.   return element as T;
76. }
78. const button = getElementById<HTMLButtonElement>('my-button');
79. if (button) {
80.   button.disabled = true;
81. }
83. // 8. 使用类型查询获取变量类型
84. const user = {
85.   id: 1,
86.   name: 'John',
87.   email: 'john@example.com'
88. };
90. type User = typeof user;

复制代码

6. 实战项目

6.1 构建一个完整的TypeScript应用

让我们构建一个简单的任务管理应用，展示TypeScript的实际应用：

2. // 1. 定义类型和接口
3. interface Task {
4.   id: number;
5.   title: string;
6.   description: string;
7.   completed: boolean;
8.   createdAt: Date;
9.   updatedAt: Date;
10. }
12. interface TaskService {
13.   getAll(): Promise<Task[]>;
14.   getById(id: number): Promise<Task | null>;
15.   create(task: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>): Promise<Task>;
16.   update(id: number, updates: Partial<Task>): Promise<Task | null>;
17.   delete(id: number): Promise<boolean>;
18. }
20. // 2. 实现任务服务
21. class LocalStorageTaskService implements TaskService {
22.   private readonly STORAGE_KEY = 'tasks';
24.   async getAll(): Promise<Task[]> {
25.     const tasksJson = localStorage.getItem(this.STORAGE_KEY);
26.     if (!tasksJson) return [];
27.    
28.     const tasks = JSON.parse(tasksJson);
29.     return tasks.map((task: any) => ({
30.       ...task,
31.       createdAt: new Date(task.createdAt),
32.       updatedAt: new Date(task.updatedAt)
33.     }));
34.   }
36.   async getById(id: number): Promise<Task | null> {
37.     const tasks = await this.getAll();
38.     return tasks.find(task => task.id === id) || null;
39.   }
41.   async create(taskData: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>): Promise<Task> {
42.     const tasks = await this.getAll();
43.     const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
44.    
45.     const newTask: Task = {
46.       id: newId,
47.       ...taskData,
48.       createdAt: new Date(),
49.       updatedAt: new Date()
50.     };
51.    
52.     tasks.push(newTask);
53.     this.saveTasks(tasks);
54.    
55.     return newTask;
56.   }
58.   async update(id: number, updates: Partial<Task>): Promise<Task | null> {
59.     const tasks = await this.getAll();
60.     const taskIndex = tasks.findIndex(task => task.id === id);
61.    
62.     if (taskIndex === -1) return null;
63.    
64.     tasks[taskIndex] = {
65.       ...tasks[taskIndex],
66.       ...updates,
67.       updatedAt: new Date()
68.     };
69.    
70.     this.saveTasks(tasks);
71.     return tasks[taskIndex];
72.   }
74.   async delete(id: number): Promise<boolean> {
75.     const tasks = await this.getAll();
76.     const filteredTasks = tasks.filter(task => task.id !== id);
77.    
78.     if (filteredTasks.length === tasks.length) return false;
79.    
80.     this.saveTasks(filteredTasks);
81.     return true;
82.   }
84.   private saveTasks(tasks: Task[]): void {
85.     localStorage.setItem(this.STORAGE_KEY, JSON.stringify(tasks));
86.   }
87. }
89. // 3. 创建任务管理器类
90. class TaskManager {
91.   constructor(private taskService: TaskService) {}
93.   async addTask(title: string, description: string): Promise<Task> {
94.     return this.taskService.create({
95.       title,
96.       description,
97.       completed: false
98.     });
99.   }
101.   async completeTask(id: number): Promise<Task | null> {
102.     return this.taskService.update(id, { completed: true });
103.   }
105.   async updateTask(id: number, updates: Partial<Omit<Task, 'id' | 'createdAt' | 'updatedAt'>>): Promise<Task | null> {
106.     return this.taskService.update(id, updates);
107.   }
109.   async removeTask(id: number): Promise<boolean> {
110.     return this.taskService.delete(id);
111.   }
113.   async getTasks(): Promise<Task[]> {
114.     return this.taskService.getAll();
115.   }
117.   async getTask(id: number): Promise<Task | null> {
118.     return this.taskService.getById(id);
119.   }
120. }
122. // 4. 创建UI控制器
123. class TaskUIController {
124.   private taskList: HTMLElement;
125.   private taskForm: HTMLFormElement;
126.   private taskTitleInput: HTMLInputElement;
127.   private taskDescriptionInput: HTMLTextAreaElement;
128.   
129.   constructor(
130.     private taskManager: TaskManager,
131.     private container: HTMLElement
132.   ) {
133.     this.setupUI();
134.     this.attachEventListeners();
135.     this.loadTasks();
136.   }
138.   private setupUI(): void {
139.     this.container.innerHTML = `
140.       <div class="task-app">
141.         <h1>Task Manager</h1>
142.         <form id="task-form" class="task-form">
143.           <div class="form-group">
144.             <label for="task-title">Title</label>
145.             <input type="text" id="task-title" required>
146.           </div>
147.           <div class="form-group">
148.             <label for="task-description">Description</label>
149.             <textarea id="task-description" rows="3"></textarea>
150.           </div>
151.           <button type="submit">Add Task</button>
152.         </form>
153.         <div id="task-list" class="task-list"></div>
154.       </div>
155.     `;
157.     this.taskList = document.getElementById('task-list')!;
158.     this.taskForm = document.getElementById('task-form')! as HTMLFormElement;
159.     this.taskTitleInput = document.getElementById('task-title')! as HTMLInputElement;
160.     this.taskDescriptionInput = document.getElementById('task-description')! as HTMLTextAreaElement;
161.   }
163.   private attachEventListeners(): void {
164.     this.taskForm.addEventListener('submit', (e) => {
165.       e.preventDefault();
166.       this.handleAddTask();
167.     });
168.   }
170.   private async handleAddTask(): Promise<void> {
171.     const title = this.taskTitleInput.value.trim();
172.     const description = this.taskDescriptionInput.value.trim();
173.    
174.     if (!title) return;
175.    
176.     try {
177.       await this.taskManager.addTask(title, description);
178.       this.taskForm.reset();
179.       this.loadTasks();
180.     } catch (error) {
181.       console.error('Error adding task:', error);
182.     }
183.   }
185.   private async loadTasks(): Promise<void> {
186.     try {
187.       const tasks = await this.taskManager.getTasks();
188.       this.renderTasks(tasks);
189.     } catch (error) {
190.       console.error('Error loading tasks:', error);
191.     }
192.   }
194.   private renderTasks(tasks: Task[]): void {
195.     this.taskList.innerHTML = '';
196.    
197.     if (tasks.length === 0) {
198.       this.taskList.innerHTML = '<p>No tasks found. Add your first task!</p>';
199.       return;
200.     }
201.    
202.     tasks.forEach(task => {
203.       const taskElement = document.createElement('div');
204.       taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;
205.       taskElement.innerHTML = `
206.         <div class="task-header">
207.           <h3>${this.escapeHtml(task.title)}</h3>
208.           <div class="task-actions">
209.             <button class="toggle-task" data-id="${task.id}">
210.               ${task.completed ? 'Mark Incomplete' : 'Mark Complete'}
211.             </button>
212.             <button class="delete-task" data-id="${task.id}">Delete</button>
213.           </div>
214.         </div>
215.         <p>${this.escapeHtml(task.description)}</p>
216.         <div class="task-meta">
217.           <small>Created: ${task.createdAt.toLocaleString()}</small>
218.           ${task.updatedAt > task.createdAt ? `<small>Updated: ${task.updatedAt.toLocaleString()}</small>` : ''}
219.         </div>
220.       `;
221.       
222.       this.taskList.appendChild(taskElement);
223.     });
224.    
225.     // Add event listeners to buttons
226.     document.querySelectorAll('.toggle-task').forEach(button => {
227.       button.addEventListener('click', (e) => {
228.         const id = parseInt((e.target as HTMLElement).getAttribute('data-id')!);
229.         this.handleToggleTask(id);
230.       });
231.     });
232.    
233.     document.querySelectorAll('.delete-task').forEach(button => {
234.       button.addEventListener('click', (e) => {
235.         const id = parseInt((e.target as HTMLElement).getAttribute('data-id')!);
236.         this.handleDeleteTask(id);
237.       });
238.     });
239.   }
241.   private async handleToggleTask(id: number): Promise<void> {
242.     try {
243.       const task = await this.taskManager.getTask(id);
244.       if (task) {
245.         await this.taskManager.updateTask(id, { completed: !task.completed });
246.         this.loadTasks();
247.       }
248.     } catch (error) {
249.       console.error('Error toggling task:', error);
250.     }
251.   }
253.   private async handleDeleteTask(id: number): Promise<void> {
254.     try {
255.       await this.taskManager.removeTask(id);
256.       this.loadTasks();
257.     } catch (error) {
258.       console.error('Error deleting task:', error);
259.     }
260.   }
262.   private escapeHtml(text: string): string {
263.     const div = document.createElement('div');
264.     div.textContent = text;
265.     return div.innerHTML;
266.   }
267. }
269. // 5. 初始化应用
270. document.addEventListener('DOMContentLoaded', () => {
271.   const container = document.getElementById('app')!;
272.   const taskService = new LocalStorageTaskService();
273.   const taskManager = new TaskManager(taskService);
274.   const uiController = new TaskUIController(taskManager, container);
275. });

复制代码

6.2 常见问题与解决方案

在使用TypeScript的过程中，你可能会遇到一些常见问题。以下是一些解决方案：

2. // 问题代码
3. const user = JSON.parse('{"name": "John", "age": 30}');
4. console.log(user.name); // 错误: 类型"{}"上不存在属性"name"
6. // 解决方案1: 类型断言
7. const user = JSON.parse('{"name": "John", "age": 30}') as { name: string; age: number };
8. console.log(user.name);
10. // 解决方案2: 接口定义
11. interface User {
12.   name: string;
13.   age: number;
14. }
16. const user = JSON.parse('{"name": "John", "age": 30}') as User;
17. console.log(user.name);
19. // 解决方案3: 类型守卫
20. function isUser(obj: any): obj is User {
21.   return typeof obj === 'object' &&
22.          obj !== null &&
23.          typeof obj.name === 'string' &&
24.          typeof obj.age === 'number';
25. }
27. const user = JSON.parse('{"name": "John", "age": 30}');
28. if (isUser(user)) {
29.   console.log(user.name);
30. }

复制代码

2. // 问题代码
3. interface User {
4.   name: string;
5.   email?: string;
6. }
8. function getEmail(user: User): string {
9.   return user.email.toLowerCase(); // 错误: 对象可能为"undefined"
10. }
12. // 解决方案1: 使用可选链操作符
13. function getEmail(user: User): string {
14.   return user.email?.toLowerCase() || 'No email provided';
15. }
17. // 解决方案2: 使用类型守卫
18. function getEmail(user: User): string {
19.   if (user.email) {
20.     return user.email.toLowerCase();
21.   }
22.   return 'No email provided';
23. }
25. // 解决方案3: 使用默认值
26. function getEmail(user: User): string {
27.   const email = user.email || 'No email provided';
28.   return email.toLowerCase();
29. }

复制代码

2. // 问题代码
3. function fetchData() {
4.   return fetch('/api/data')
5.     .then(response => response.json())
6.     .then(data => {
7.       return data.items; // 错误: 类型"{}"上不存在属性"items"
8.     });
9. }
11. // 解决方案1: 定义返回类型
12. interface DataItem {
13.   id: number;
14.   name: string;
15. }
17. interface ApiResponse {
18.   items: DataItem[];
19. }
21. async function fetchData(): Promise<DataItem[]> {
22.   const response = await fetch('/api/data');
23.   const data = (await response.json()) as ApiResponse;
24.   return data.items;
25. }
27. // 解决方案2: 使用泛型
28. async function fetchData<T>(): Promise<T> {
29.   const response = await fetch('/api/data');
30.   return response.json() as Promise<T>;
31. }
33. // 使用示例
34. interface DataItem {
35.   id: number;
36.   name: string;
37. }
39. interface ApiResponse {
40.   items: DataItem[];
41. }
43. async function getData() {
44.   const response = await fetchData<ApiResponse>();
45.   return response.items;
46. }

复制代码

2. // 问题代码
3. function getProperty(obj: any, key: string) {
4.   return obj[key]; // 返回类型为any
5. }
7. // 解决方案1: 使用泛型和keyof
8. function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
9.   return obj[key];
10. }
12. // 使用示例
13. interface User {
14.   name: string;
15.   age: number;
16. }
18. const user: User = { name: 'John', age: 30 };
19. const userName = getProperty(user, 'name'); // 类型为string
20. const userAge = getProperty(user, 'age');   // 类型为number
21. const invalid = getProperty(user, 'email'); // 错误: 类型"email"不存在于类型"User"中
23. // 解决方案2: 使用索引签名
24. interface StringMap {
25.   [key: string]: string;
26. }
28. function getValues(map: StringMap, keys: string[]): string[] {
29.   return keys.map(key => map[key]);
30. }

复制代码

2. // 问题代码
3. import _ from 'lodash';
4. const result = _.map([1, 2, 3], n => n * 2); // 错误: 找不到模块"lodash"或其相应的类型声明
6. // 解决方案1: 安装类型定义
7. npm install --save-dev @types/lodash
9. // 解决方案2: 创建自己的类型声明
10. // 在项目中创建types/lodash.d.ts文件
11. declare module 'lodash' {
12.   export function map<T, U>(array: T[], iteratee: (item: T) => U): U[];
13.   // 添加其他你使用的lodash函数...
14. }
16. // 解决方案3: 使用require和类型断言
17. const _ = require('lodash') as any;
18. const result = _.map([1, 2, 3], n => n * 2);

复制代码

总结

TypeScript是一个强大的工具，它通过添加静态类型系统和其他特性来扩展JavaScript。本指南从基础语法开始，逐步介绍了TypeScript的高级特性和实际应用。

通过学习本指南，你已经了解了：

1. TypeScript的基本类型和语法
2. 接口、类和泛型的使用
3. 中级特性如高级类型、类型守卫和装饰器
4. 高级特性如条件类型、映射类型和模板字面量类型
5. 工程实践，包括配置文件、框架集成和最佳实践
6. 实战项目开发

要真正掌握TypeScript，最重要的是实践。尝试将TypeScript应用到你的项目中，逐步采用其特性，你会发现代码的可维护性和可靠性会显著提高。

TypeScript的生态系统不断发展，新的特性和改进不断推出。保持学习，关注TypeScript的最新发展，将帮助你充分利用这个强大的工具。

版权声明

1、转载或引用本网站内容(TypeScript入门指南从基础语法到高级特性的完整学习路径)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://pixtech.cc/thread-39934-1-1.html