TypeScript学习大纲

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

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

    let isDone: boolean = false;
    let decimal: number = 6;
    let color: string = "blue";
    
  2. 数组:
    可以在元素类型后面直接跟上 [],形成元素类型的数组。

    let list: number[] = [1, 2, 3];
    
  3. 枚举:
    枚举类型是 TypeScript 为 JavaScript 提供了一个方便的添加命名数值集合的方法。

    enum Color {Red, Green, Blue}
    let c: Color = Color.Green;
    
  4. 任意值 (Any):
    当你不希望类型检查器检查某些值时,可以使用 any 类型。

    let notSure: any = 4;
    notSure = "maybe a string instead";
    
  5. 空值 (Void):
    用于表示没有任何类型,通常用于表示没有返回值的函数的返回类型。

    function warnUser(): void {
        console.log("This is my warning message");
    }
    
  6. 接口 (Interfaces):
    接口是代码或第三方代码的契约,或者是在你的代码或第三方代码之间的契约。

    interface LabelledValue {
      label: string;
    }
    function printLabel(labelledObj: LabelledValue) {
      console.log(labelledObj.label);
    }
    
  7. 类 (Classes):
    TypeScript 的类只是 JavaScript 的类的一个简单的语法糖。

    class Greeter {
      greeting: string;
      constructor(message: string) {
        this.greeting = message;
      }
      greet() {
        return "Hello, " + this.greeting;
      }
    }
    
  8. 模块 (Modules):
    TypeScript 与 ECMAScript 2015 一样,任何包含顶级 import 或 export 的文件都被视为模块。

    // module.ts
    export function hello() {
        return "Hello!";
    }
    
    // main.ts
    import { hello } from './module';
    console.log(hello());
    
  9. 泛型 (Generics):
    泛型是创建可重用组件的一种方法,一个组件可以支持多种类型的数据。

    function identity<T>(arg: T): T {
        return arg;
    }
    
  10. 装饰器 (Decorators):
    装饰器为您编写类声明时的修饰的声明提供了一种方式。

    function sealed(constructor: Function) {
        Object.seal(constructor);
        Object.seal(constructor.prototype);
    }
    
    @sealed
    class Greeter {
        // ...
    }
    
  11. 命名空间 (Namespaces):
    命名空间是将代码包裹在一个全局名称下的一种方式,以防止与在其他地方编写的代码冲突。

    namespace MyNamespace {
        export interface SomeInterface {
            // ...
        }
        export class SomeClass {
            // ...
        }
    }
    
  12. 类型断言:
    类型断言好比其它语言里的类型转换,但不进行特殊的数据检查和解构。它没有运行时的影响,只是在编译阶段起作用。

    let someValue: any = "this is a string";
    let strLength: number = (<string>someValue).length;
    
  13. 映射类型 (Mapped Types)
    TypeScript 允许你从旧的类型中创建新的类型,例如将所有的属性变为可选或只读。

    type Readonly<T> = {
        readonly [P in keyof T]: T[P];
    };
    
    type Partial<T> = {
        [P in keyof T]?: T[P];
    };
    
  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"
    
  15. 索引类型 (Indexed Types)
    使用索引类型查询和索引类型访问操作来实现“从对象中选择属性”的模式。

    function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
        return names.map(n => o[n]);
    }
    
  16. 模板字面量类型 (Template Literal Types)
    允许你在类型级别使用字符串模板字面量语法。

    type World = "world";
    type Greeting = `hello ${World}`;
    
  17. 递归类型 (Recursive Types)
    类型可以引用它们自己,形成递归或嵌套类型。

    type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
    interface JsonObject { [key: string]: JsonValue; }
    interface JsonArray extends Array<JsonValue> {}
    
  18. 类型断言和类型保护:
    自定义类型保护允许你明确地影响类型检查的结果。

    function isString(test: any): test is string {
        return typeof test === "string";
    }
    
  19. 类型推断 (Type Inference)
    TypeScript 尝试根据代码自动确定表达式的类型。

    let x = 3;  // `x` has the type `number`
    
  20. 声明合并 (Declaration Merging)
    TypeScript 允许声明合并,以便用户可以将类、接口、模块等拆分成多个文件。

    interface Cloner {
        clone(animal: Animal): Animal;
    }
    
    interface Cloner {
        clone(animal: Sheep): Sheep;
    }
    
  21. 全局声明 (Global Declarations)
    你可以在全局范围内声明变量、类型、函数等,以便在项目中共享。

    declare var jQuery: (selector: string) => any;
    
  22. 类型和命名空间导入/导出:
    使用 import/export 语法来组织和共享代码。

    import { SomeType } from './some-module';
    export { SomeType };
    
  23. 装饰器工厂:
    创建和组合装饰器。

    function loggable(target: Function) {
        return class extends target {
            log() {
                console.log('Logging...');
            }
        }
    }
    
    @loggable
    class MyClass {
        // ...
    }
    
  24. 使用 tsconfig.json:
    使用 tsconfig.json 文件来配置 TypeScript 项目的编译选项和包含的文件。

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今晚务必早点睡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值