TypeScript 常见知识点总结及实例解析【复习、了解必看！】

和标题所说一致，本文很浅显的总结了TypeScript的常见知识点和一些使用方法的小例子，意在让想要了解TypeScript的小伙伴亦或是想要复习TyprScript相关知识点的小伙伴可以快速的刷一遍TS的知识点。
废话不多说，我们开始啦！

1. TypeScript 简介

TypeScript 是一种由 Microsoft 开发和维护的开源编程语言。它是 JavaScript 的一个超集，为这门动态类型语言添加了可选的静态类型检查。使用 TypeScript 可以帮助我们捕捉早期错误，提供更好的代码提示，以及提升开发效率。

TypeScript 设计的目的是开发大型应用程序，然后将 TypeScript 编译成 JavaScript，因为浏览器只能理解 JavaScript。

2. 安装和配置

要在项目中使用 TypeScript，首先需要安装 TypeScript 编译器。可以通过 npm（Node.js 的包管理器）来安装。

npm install -g typescript

安装完成后，可以通过 tsc --version 命令来验证安装是否成功。

接下来，通过在项目根目录下运行 tsc --init 来生成一个 tsconfig.json 文件，该文件用于配置 TypeScript 编译器的选项。

3. 基本类型

TypeScript 包含 JavaScript 的所有基本类型，并添加了一些其他类型。

// Boolean
let isDone: boolean = false;

// Number
let decimal: number = 6;

// String
let color: string = "blue";

// Array
let list: number[] = [1, 2, 3];
let listGeneric: Array<number> = [1, 2, 3];

// Tuple
let x: [string, number] = ["hello", 10];

// Enum
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

// Any
let notSure: any = 4;

// Void
function warnUser(): void {
    console.log("This is my warning message");
}

// Null and Undefined
let u: undefined = undefined;
let n: null = null;

// Never
function error(message: string): never {
    throw new Error(message);
}

4. 函数

TypeScript 允许你为函数的输入输出分别定义类型。

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x + y; };

5. 接口

接口是 TypeScript 的核心原则之一，为这些类型命名和为你的代码或第三方代码定义契约。

interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

6. 类

TypeScript 支持 JavaScript 的新特性，比如支持基于类的面向对象编程。

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

7. 泛型

泛型提供了一种方法来创建可重用的组件，一个组件可以支持多种类型的数据。

function identity<T>(arg: T): T {
    return arg;
}
let output = identity<string>("myString");

8. 枚举

使用枚举我们可以定义一组命名的常数。

enum Direction {
    Up = 1,
    Down,
    Left,
    Right,
}

9. 高级类型

TypeScript 提供了多种高级类型，以支持更复杂的类型操作和更强大的类型安全。

9.1 交叉类型

交叉类型是将多个类型合并为一个类型，这让我们可以将现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

interface BusinessPartner {
    name: string;
    credit: number;
}

interface Contact {
    email: string;
    phone: string;
}

type Customer = BusinessPartner & Contact;

let customer: Customer = {
    name: 'ABC Inc.',
    credit: 100,
    email: 'contact@abc.com',
    phone: '+123456789'
};

9.2 联合类型

联合类型表示一个值可以是几种类型之一。使用联合类型，我们可以更灵活地处理不同类型的值。

function padLeft(value: string, padding: string | number) {
    if (typeof padding === "number") {
        return Array(padding + 1).join(" ") + value;
    }
    if (typeof padding === "string") {
        return padding + value;
    }
    throw new Error(`Expected string or number, got '${padding}'.`);
}

console.log(padLeft("Hello world", 4));  // 输出："    Hello world"

9.3 类型守卫

类型守卫是一些表达式，它们在运行时检查以确保在某个作用域内的类型。typeof 和 instanceof 是 TypeScript 中最常见的类型守卫。

class Bird {
    fly() {
        console.log("bird flies");
    }
}

class Fish {
    swim() {
        console.log("fish swims");
    }
}

function move(pet: Fish | Bird) {
    if (pet instanceof Fish) {
        pet.swim();
    } else {
        pet.fly();
    }
}

9.4 类型别名

类型别名用来给一个类型起一个新名字。类型别名有时和接口很像，但是可以作用于原始值，联合类型，元组以及其它任何你需要手写的类型。

type StringOrNumber = string | number;

function logMessage(message: StringOrNumber): void {
    console.log(message);
}

10. 模块和命名空间

TypeScript 支持模块和命名空间，以便更好地组织代码和促进可重用性。

10.1 模块

模块是自声明的；两个模块之间的关系是通过在文件级别上使用导入和导出建立的。

// someModule.ts
export interface SomeInterface {
    doSomething(): void;
}

// anotherModule.ts
import { SomeInterface } from "./someModule";

class SomeClass implements SomeInterface {
    doSomething() {
        // implementation
    }
}

10.2 命名空间

命名空间是用来组织代码的一种方式，避免全局命名空间的污染。命名空间内的类不会污染全局命名空间。

namespace MyNamespace {
    export class MyClass {
        public myMethod() {
            console.log("Hello from MyClass");
        }
    }
}

let myClassInstance = new MyNamespace.MyClass();
myClassInstance.myMethod();

11. 装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上。装饰器使用 @expression 这种形式，expression 求值后必须为一个函数，它会在运行时被调用。

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

12. 混入

混入是一种将多个类的实现合并到一个类的方法。在 TypeScript 中，可以通过将多个类的接口合并，并将它们的实现复制到一个类中来实现混入。

// Logger 混入
class Logger {
  log(message: string) {
    console.log(message);
  }
}

// 用户类，应用 Logger 混入
class User {
  constructor(private name: string) {}
}

// 使用混入
interface User extends Logger {} // 将 Logger 混入到 User 类中

const user = new User("John");
user.log("Hello, world!"); // 将调用 Logger 混入中的 log 方法

13. 条件类型

条件类型选择两种类型之间的一种，根据给定的条件进行选择。

type IsString<T> = T extends string ? "yes" : "no";

type T1 = IsString<string>;  // "yes"
type T2 = IsString<number>;  // "no"

通过这些特性，你可以构建更健壯、易于维护且类型安全的大型应用程序。
希望这份笔记能够帮助你了解或是复习TypeScript的相关知识，并在你的项目中得到有效应用，如果你想要深入了解TypeScript的话这些还仅仅不够，如果后期有时间我会再写一篇详细的来为大家讲解。
如果你能看到这里请给我点个赞吧！非常感谢！