TypeScript学习大纲

TypeScript 是 JavaScript 的一个超集，它为 JavaScript 添加了静态类型系统。以下是一些必须了解的 TypeScript 基本知识点和特性：

1. 基本类型:
   TypeScript 支持与 JavaScript 相同的基本类型，并提供了一些额外的类型选项。

   let isDone: boolean = false;
   let decimal: number = 6;
   let color: string = "blue";
   1
   2
   3

2. 数组:
   可以在元素类型后面直接跟上 []，形成元素类型的数组。

   let list: number[] = [1, 2, 3];
   1

3. 枚举:
   枚举类型是 TypeScript 为 JavaScript 提供了一个方便的添加命名数值集合的方法。

   enum Color {Red, Green, Blue}
   let c: Color = Color.Green;
   1
   2

4. 任意值 (Any):
   当你不希望类型检查器检查某些值时，可以使用 any 类型。

   let notSure: any = 4;
   notSure = "maybe a string instead";
   1
   2

5. 空值 (Void):
   用于表示没有任何类型，通常用于表示没有返回值的函数的返回类型。

   function warnUser(): void {
       console.log("This is my warning message");
   }
   1
   2
   3

6. 接口 (Interfaces):
   接口是代码或第三方代码的契约，或者是在你的代码或第三方代码之间的契约。

   interface LabelledValue {
     label: string;
   }
   function printLabel(labelledObj: LabelledValue) {
     console.log(labelledObj.label);
   }
   1
   2
   3
   4
   5
   6

7. 类 (Classes):
   TypeScript 的类只是 JavaScript 的类的一个简单的语法糖。

   class Greeter {
     greeting: string;
     constructor(message: string) {
       this.greeting = message;
     }
     greet() {
       return "Hello, " + this.greeting;
     }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9

8. 模块 (Modules):
   TypeScript 与 ECMAScript 2015 一样，任何包含顶级 import 或 export 的文件都被视为模块。

   // module.ts
   export function hello() {
       return "Hello!";
   }
   
   // main.ts
   import { hello } from './module';
   console.log(hello());
   1
   2
   3
   4
   5
   6
   7
   8

9. 泛型 (Generics):
   泛型是创建可重用组件的一种方法，一个组件可以支持多种类型的数据。

   function identity<T>(arg: T): T {
       return arg;
   }
   1
   2
   3

10. 装饰器 (Decorators):
    装饰器为您编写类声明时的修饰的声明提供了一种方式。

    function sealed(constructor: Function) {
        Object.seal(constructor);
        Object.seal(constructor.prototype);
    }
    
    @sealed
    class Greeter {
        // ...
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9

11. 命名空间 (Namespaces):
    命名空间是将代码包裹在一个全局名称下的一种方式，以防止与在其他地方编写的代码冲突。

    namespace MyNamespace {
        export interface SomeInterface {
            // ...
        }
        export class SomeClass {
            // ...
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8

12. 类型断言:
    类型断言好比其它语言里的类型转换，但不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。

    let someValue: any = "this is a string";
    let strLength: number = (<string>someValue).length;
    1
    2

13. 映射类型 (Mapped Types)：
    TypeScript 允许你从旧的类型中创建新的类型，例如将所有的属性变为可选或只读。

    type Readonly<T> = {
        readonly [P in keyof T]: T[P];
    };
    
    type Partial<T> = {
        [P in keyof T]?: T[P];
    };
    1
    2
    3
    4
    5
    6
    7

14. 条件类型 (Conditional Types)：
    通过条件表达式对类型进行选择。

    type TypeName<T> =
        T extends string ? "string" :
        T extends number ? "number" :
        "object";
    type T1 = TypeName<string>;  // "string"
    type T2 = TypeName<number>;  // "number"
    1
    2
    3
    4
    5
    6

15. 索引类型 (Indexed Types)：
    使用索引类型查询和索引类型访问操作来实现“从对象中选择属性”的模式。

    function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
        return names.map(n => o[n]);
    }
    1
    2
    3

16. 模板字面量类型 (Template Literal Types)：
    允许你在类型级别使用字符串模板字面量语法。

    type World = "world";
    type Greeting = `hello ${World}`;
    1
    2

17. 递归类型 (Recursive Types)：
    类型可以引用它们自己，形成递归或嵌套类型。

    type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
    interface JsonObject { [key: string]: JsonValue; }
    interface JsonArray extends Array<JsonValue> {}
    1
    2
    3

18. 类型断言和类型保护:
    自定义类型保护允许你明确地影响类型检查的结果。

    function isString(test: any): test is string {
        return typeof test === "string";
    }
    1
    2
    3

19. 类型推断 (Type Inference)：
    TypeScript 尝试根据代码自动确定表达式的类型。

    let x = 3;  // `x` has the type `number`
    1

20. 声明合并 (Declaration Merging)：
    TypeScript 允许声明合并，以便用户可以将类、接口、模块等拆分成多个文件。

    interface Cloner {
        clone(animal: Animal): Animal;
    }
    
    interface Cloner {
        clone(animal: Sheep): Sheep;
    }
    1
    2
    3
    4
    5
    6
    7

21. 全局声明 (Global Declarations)：
    你可以在全局范围内声明变量、类型、函数等，以便在项目中共享。

    declare var jQuery: (selector: string) => any;
    1

22. 类型和命名空间导入/导出:
    使用 import/export 语法来组织和共享代码。

    import { SomeType } from './some-module';
    export { SomeType };
    1
    2

23. 装饰器工厂:
    创建和组合装饰器。

    function loggable(target: Function) {
        return class extends target {
            log() {
                console.log('Logging...');
            }
        }
    }
    
    @loggable
    class MyClass {
        // ...
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

24. 使用 tsconfig.json:
    使用 tsconfig.json 文件来配置 TypeScript 项目的编译选项和包含的文件。

25. 使用第三方库的类型定义:
    通过 DefinitelyTyped 项目和 @types 作用域包来获取和使用第三方库的类型定义。

这些基本知识点和特性为您提供了使用 TypeScript 编写强类型和面向对象的 JavaScript 代码的基础。TypeScript 具有很多其他高级特性和配置选项，可以通过阅读 TypeScript 官方手册 或其他相关资源来进一步学习和掌握。