TypeScript 基础教程指南

1. 什么是 TypeScript？

TypeScript 是由微软开发的开源编程语言，它是 JavaScript 的超集，提供了静态类型检查和更丰富的开发工具。TypeScript 可以编译成纯 JavaScript，支持所有浏览器和操作系统。

2. 安装 TypeScript

要安装 TypeScript，首先需要确保已经安装了 Node.js 和 npm。然后可以通过 npm 安装 TypeScript：

npm install -g typescript

安装完成后，可以通过 tsc --version 来检查是否安装成功。

3. 第一个 TypeScript 程序

创建一个 hello.ts 文件，并添加以下代码：

function greet(person: string) {
    return `Hello, ${person}`;
}

let user = "World";
console.log(greet(user));

然后使用 TypeScript 编译器将其编译为 JavaScript：

tsc hello.ts

这会生成一个 hello.js 文件，运行它：

node hello.js

4. 基本类型

TypeScript 提供了多种基本类型，如 boolean、number、string、array、tuple、enum 等。以下是一些示例：

4.1 布尔值（boolean）

布尔值是最基本的数据类型，表示 true 或 false。

let isDone: boolean = false;

4.2 数字（number）

TypeScript 和 JavaScript 一样，所有数字都是浮点数。除了十进制和十六进制字面量，TypeScript 还支持二进制和八进制字面量。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

4.3 字符串（string）

字符串类型表示文本数据。可以使用双引号（"）或单引号（'）表示字符串。

let color: string = "blue";
color = 'red';

可以使用模板字符串（反引号）定义多行文本和内嵌表达式。

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.
I'll be ${age + 1} years old next month.`;

4.4 数组（array）

TypeScript 提供了两种定义数组的方式：

1. 在元素类型后面加上 []。
2. 使用数组泛型 Array<元素类型>。

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

4.5 元组（tuple）

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。

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

4.6 枚举（enum）

枚举类型用于定义一组命名的常量，使用 enum 关键字。

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

默认情况下，从 0 开始为元素编号。也可以手动指定成员的值。

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

enum Color { Red = 1, Green = 2, Blue = 4 }
let c: Color = Color.Green; // Green 的值是 2

5. 接口

接口用于定义对象的类型。以下是一个简单的示例：

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return `Hello, ${person.firstName} ${person.lastName}`;
}

let user = { firstName: "John", lastName: "Doe" };
console.log(greeter(user));

6. 类

TypeScript 支持面向对象编程，包括类、继承和访问修饰符。以下是一个示例：

class Animal {
    private name: string;

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

    public move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

let dog = new Animal("Dog");
dog.move(10);

7. 泛型

泛型使得函数和类可以适用于多种类型。以下是一个示例：

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

let output1 = identity<string>("myString");
let output2 = identity<number>(100);

8. 高级类型

TypeScript 提供了多种高级类型，如交叉类型、联合类型、类型别名等。以下是一些示例：

8.1 交叉类型（Intersection Types）

交叉类型将多个类型合并为一个类型。可以使用 & 符号来表示。

interface Person {
    name: string;
}

interface Employee {
    employeeId: number;
}

type EmployeePerson = Person & Employee;

let emp: EmployeePerson = { name: "John", employeeId: 123 };

8.2 联合类型（Union Types）

联合类型表示一个值可以是几种类型之一。可以使用 | 符号来表示。

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 '${typeof padding}'.`);
}

padLeft("Hello", 4); // "    Hello"
padLeft("Hello", ">>> "); // ">>> Hello"

8.3 类型别名（Type Aliases）

类型别名用于给类型起一个新的名字。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
    if (typeof n === "string") {
        return n;
    } else {
        return n();
    }
}

9. 模块

TypeScript 支持模块系统，可以将代码拆分为更小的文件并导入导出。以下是一个示例：

math.ts:

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

app.ts:

import { add } from "./math";

console.log(add(2, 3));

10. 配置 TypeScript 编译器

可以使用 tsconfig.json 文件来配置 TypeScript 编译器。创建一个 tsconfig.json 文件，添加以下内容：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "outDir": "./dist"
    },
    "include": ["src"]
}

然后运行 tsc，TypeScript 编译器将根据配置文件进行编译。