Typescript详解

TypeScript是JavaScript的一个超集，它在JavaScript的基础上添加了可选的静态类型和基于类的面向对象编程。以下是TypeScript的详细介绍：

一、基础概念

1. 定义与目的

   • TypeScript继承了JavaScript的全部语法，并添加了一些新的特性，如静态类型检查、类和接口等。
   • TypeScript的目的是增强JavaScript的功能，提高代码的可读性和可维护性，使其更适合用于开发大型、复杂的企业级项目。

2. 编译

   • TypeScript代码需要编译成JavaScript代码才能在浏览器中运行。编译过程会删除类型声明和类型相关的代码，只保留能运行的JavaScript代码。

3. 优缺点

   • 优点：增强了代码的可维护性，特别是大型项目；友好的快速的能在编辑器中提示错误，在编译阶段就能发现大部分错误；支持最新的JavaScript的新特性。
   • 缺点：需要一定的学习成本；与一些插件库可能不完全兼容；增加了前期的开发成本（开发速度）。

二、基础类型

TypeScript提供了多种基础类型，包括：

1. 布尔类型（boolean）
2. 数字类型（number）
3. 字符串类型（string）
4. 数组类型：可以使用多种方式来声明数组类型，如let a: number[] = [];或let b: Array<number> = [];。
5. 元组类型（tuple）：表示一个已知数量和类型的数组。例如，let tuple: [number, string, boolean] = [1, "hello", true];。
6. 枚举类型（enum）：用于定义数值的集合，通常用于定义一组有规则的数据。枚举根据存储值不同分为数字枚举、字符串枚举和复合枚举。
7. any类型：用来定义一个不确定的类型，任何值都可以赋值给any。但滥用any会使TypeScript失去类型检查的意义。
8. unknown类型：任何值都可以赋值给unknown，但unknown只能赋值给unknown或any。它用于表示一个不确定的类型，但比any更安全，因为它禁止了未知类型的隐式转换。
9. void类型：用于标识方法返回值的类型，表示该方法没有返回值。
10. never类型：表示永不返回的值或永远返回error的值。

此外，TypeScript还支持对象（Object）、{}（空对象，表示没有元素成员的对象）等类型。

三、进阶概念

1. 联合类型：可以通过竖线（|）分隔多个类型来定义一个联合类型。例如，let value: string | number = "hello";。

2. 类型别名：使用type关键字可以为类型定义别名。例如，type Name = string;。

3. 类型推断：TypeScript会在没有明确的类型注解时，根据值的上下文来推断出一个类型。

4. 类型断言：可以使用类型断言来手动指定一个值的类型。类型断言有两种形式：尖括号声明和as声明。例如，
   let value: any = "hello"; let valueLength: number = (<string>value).length; 或 let value: any = "hello"; let valueLength: number = (value as string).length;。

5. 对象（Object）与接口（interface）

   • 对象：在TypeScript中，Object类型是一个非原始类型，它带有对象的API，并定义了constructor、toString()等方法。
   • 接口：接口是对行为的抽象，具体的行为由类来实现。接口可以包含可选属性、只读属性、函数类型、索引签名等。接口也可以被继承。

6. 类

   • TypeScript支持基于类的面向对象编程。类可以包含属性、方法、构造函数、访问修饰符（如public、private、protected）等。
   • TypeScript还支持抽象类、静态成员、继承、多态等面向对象的概念。

7. 泛型：泛型允许在定义函数、接口或类的时候不预先指定具体的类型，而在使用的时候再指定类型。这可以提高代码的复用性和类型安全性。

8. 装饰器：装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问器，属性或参数上。装饰器使用@expression这种形式，expression必须为一个函数，它会在运行时被调用，被装饰的声明信息作为参数传入。

四、高级技巧

1. NonNullable：排除null和undefined，断言明确表示一个类型不允许为null或undefined。
2. Partial：使类型中的所有属性都成为可选的。这在仅更新对象字段的子集时非常有用。
3. Readonly：使类型的所有属性都不可变，从而防止重新分配。
4. 映射类型：允许通过转换现有类型来创建新类型。这对于创建对象类型的变体非常方便。
5. 条件类型：提供了根据条件转换类型的极大灵活性。
6. as const：非常适合冻结值并确保TypeScript将它们视为文字类型，而不是可变值。
7. Extract和Exclude：可以从联合中过滤出或挑选特定类型。
8. 类型保护：可以在运行时动态地优化类型。
9. Record：当你需要具有动态键的对象类型时，Record<K, V>是完美的选择。

五、应用场景

TypeScript适用于各种规模的JavaScript应用，特别是那些需要高可维护性和类型安全性的大型项目。它也被广泛用于开发框架和库，如Angular、React和Vue等。

综上所述，TypeScript是一种功能强大的编程语言，它增强了JavaScript的功能并提高了代码的可读性和可维护性。通过掌握TypeScript的基础类型和进阶概念，开发者可以编写出更加健壮和可维护的JavaScript应用。

联合类型

在TypeScript中，联合类型（Union Types）是一种用于表示变量或参数可以具有多种类型的概念。它允许开发者将多个类型中的一个或多个类型作为一个整体来使用。使用“|”符号可以将多个类型组合成一个联合类型。例如：

let variable: string | number;

上述代码定义了一个名为variable的变量，它可以是字符串类型或者数字类型。

类型别名

类型别名（Type Alias）是TypeScript提供的一种机制，用于为任意类型定义一个别名。通过type关键字，开发者可以将复杂的类型定义提取出来，赋予一个直观的名字，便于复用和理解。其基本语法为：

type AliasName = TypeDefinition;

类型别名可以用于定义对象类型、联合类型或交叉类型等。例如：

type UserID = string;
let id1: UserID = "abc123";
let id2: UserID = "xyz456";

在这个例子中，UserID是string的一个别名，用于表示用户ID。

类型推断

TypeScript提供了类型推断的能力，即如果未显式指定类型，编译器会根据赋值的值来推断变量的类型。例如：

let count = 5; // 类型被推断为number

此外，TypeScript编译器还会根据函数的返回值来推断返回类型，以及根据函数的默认参数来推断参数类型。

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。其基本语法为：

值 as 类型

或者（在TS中，但不在JSX中）：

<类型>值

类型断言的一个常见用途是将一个联合类型断言为其中一个类型。例如：

interface Cat { name: string; run(): void; }
interface Fish { name: string; swim(): void; }

function getName(animal: Cat | Fish) {
    return animal.name; // 可以访问共有属性
}

function isFish(animal: Cat | Fish) {
    return typeof (animal as Fish).swim === 'function'; // 使用类型断言访问Fish特有的方法
}

但需要注意，类型断言只能够欺骗TypeScript编译器，无法避免运行时的错误。滥用类型断言可能会导致运行时错误。

对象与接口

在TypeScript中，接口（Interface）常用于定义对象的类型约束。通过接口定义的类型，等同于是创建了一个新的类型结构。接口可以包含属性、方法、可选属性、只读属性等。例如：

interface Person {
    name: string;
    age: number;
    gender?: string; // 可选属性
    readonly id: string; // 只读属性
}

const student: Person = {
    name: 'Lily',
    age: 28,
    gender: '女',
    id: 'S12345'
};

类

类（Class）是TypeScript中的另一个核心概念，用于定义对象的模板或蓝图。类可以包含属性、方法、构造方法等成员。例如：

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    introduce() {
        return `我叫${this.name}，今年${this.age}岁`;
    }
}

const p1 = new Person('Giles', 38);
console.log(p1.introduce());

泛型

泛型（Generics）是TypeScript中的一个强大特性，允许在定义函数、接口或类时不指定具体类型，而是在使用时再指定类型。这可以提高代码的复用性和类型安全性。例如：

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

const output = identity<string>("myString"); // 类型被指定为string

装饰器

装饰器（Decorators）是TypeScript和ES7的一个提案，它允许开发者在类声明、方法、属性或参数上添加元数据或修改类的行为。装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或参数上。但需要注意的是，装饰器目前还是一个实验性特性，需要在tsconfig.json中开启相应的编译器选项才能使用。

综上所述，联合类型、类型别名、类型推断、类型断言、对象与接口、类、泛型和装饰器都是TypeScript中的核心概念，它们各自具有独特的作用和用法，共同构成了TypeScript强大的类型系统。