TypeScript

TypeScript 是一种由 Microsoft 开发的编程语言，它是 JavaScript 的超集，为 JavaScript 添加了静态类型检查和其他一些特性。通过使用 TypeScript，开发者可以在编写代码时发现并防止一些常见的错误，提高代码质量和可维护性。

基本使用

1. 声明变量类型

在 TypeScript 中，你可以使用 : 来为变量明确指定类型。

let num: number = 5;
let name: string = "Alice";

2. 函数参数和返回值类型

可以为函数的参数和返回值指定类型。

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

3. 类型推断

TypeScript 会根据上下文自动推断变量的类型。

let age = 25; // TypeScript 推断 age 为 number 类型

4. 接口和类型别名

可以使用接口和类型别名定义自定义类型。

interface Person {
    name: string;
    age: number;
}

type Point = {
    x: number;
    y: number;
};

5. 联合类型和交叉类型

可以使用联合类型表示多种类型之一，使用交叉类型表示多个类型的组合。

type ID = string | number;

type ExtendedPoint = Point & { label: string };

进阶技巧

1. 泛型

泛型允许你编写可以适用于多种类型的代码组件。

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

let num: number = identity(5);
let str: string = identity("hello");

2. 类型断言

类型断言允许你在某些情况下告诉 TypeScript 编译器某个值的类型。

let value: any = "hello";
let strLength: number = (value as string).length;

3. Nullable 类型

使用联合类型或 null 和 undefined 类型可以处理可能为 null 或 undefined 的值。

let username: string | null = getUserFromDatabase();
if (username !== null) {
    // 可以安全地使用 username
}

4. 类型守卫

类型守卫是一种在特定上下文中缩小类型范围的技术，通常与联合类型一起使用。

function printLength(value: string | string[]): void {
    if (typeof value === "string") {
        console.log(value.length); // 在这里 value 被 TypeScript 理解为 string 类型
    } else {
        console.log(value.length); // 在这里 value 被 TypeScript 理解为 string[] 类型
    }
}

5. 类型别名和接口的差异

类型别名用于给类型起别名，可以表示基本类型、联合类型、交叉类型等。
接口用于描述对象的形状，可以拥有方法、属性和索引签名。

tsconfig.json 配置

tsconfig.json 是 TypeScript 项目的配置文件，它用于指定 TypeScript 编译器的行为和选项。下面是一些常见的 tsconfig.json 配置选项：

`compilerOptions`

用于配置 TypeScript 编译器的选项。

target: 指定编译后的 JavaScript 代码的目标版本。常见的值包括 "es5"、"es6" 等。
module: 指定生成的 JavaScript 模块类型。常见的值有 "commonjs"、"es6" 等。
strict: 启用严格的类型检查。推荐将其设置为 true，以确保更安全的代码。
outDir: 指定编译输出的目录。
sourceMap: 生成对应的 .js.map 文件，用于在调试时将编译后的 JavaScript 代码映射回 TypeScript 源代码。
noImplicitAny: 禁止隐式的 any 类型。
strictNullChecks: 启用严格的 null 检查，帮助避免 null 或 undefined 引发的错误。
esModuleInterop: 允许以更简洁的方式导入 CommonJS 模块。

`include` 和 `exclude`

这些选项用于指定需要编译的文件或文件夹，以及需要排除的文件或文件夹。通常，使用通配符来匹配文件路径。

`files`

如果不想使用 include 和 exclude，你可以使用 files 选项来显式列出要包含在编译中的文件。

使用示例

以下是一个简单的 tsconfig.json 配置示例：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "sourceMap": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

在这个示例中，compilerOptions 部分配置了一些常见的编译选项，include 指定了要编译的 TypeScript 文件，而 exclude 则指定了要排除的文件夹。

typescript | 青训营