TypeScript 简介和优势

1. TypeScript 简介

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。TypeScript 在 JavaScript 的基础上添加了静态类型检查和面向对象编程的特性，使得开发者可以在编译阶段发现并修复错误，从而提高代码的可靠性和可维护性。

1.1 TypeScript 的主要特性

• 静态类型检查：TypeScript 允许开发者为变量、函数参数和返回值等指定类型，编译器会在编译时检查这些类型是否匹配，从而减少运行时错误。
• 面向对象编程：TypeScript 支持类、接口、继承、多态等面向对象编程的特性，使得代码结构更加清晰和易于维护。
• ES6+ 支持：TypeScript 支持最新的 ECMAScript 标准，包括箭头函数、解构赋值、模板字符串等现代 JavaScript 特性。
• 工具支持：TypeScript 提供了丰富的开发工具和编辑器支持，如 Visual Studio Code、WebStorm 等，这些工具可以帮助开发者更高效地编写和调试代码。

2. TypeScript 的优势

2.1 提高代码质量

通过静态类型检查，TypeScript 可以在编译阶段捕获类型错误，避免在运行时出现意外的错误。这不仅提高了代码的可靠性，还减少了调试时间。

2.2 增强代码可维护性

TypeScript 的面向对象编程特性使得代码结构更加清晰，易于理解和维护。类和接口的使用可以帮助开发者更好地组织代码，减少重复代码的出现。

2.3 更好的开发体验

TypeScript 提供了强大的开发工具支持，如智能代码补全、类型推断、重构工具等，这些工具可以显著提高开发效率，减少人为错误。

2.4 跨平台和跨框架支持

TypeScript 可以与各种前端框架（如 React、Angular、Vue.js）和后端框架（如 Node.js、Express）无缝集成，使得开发者可以在不同的平台上使用相同的语言和工具链。

3. 开发环境搭建

3.1 安装 Node.js

TypeScript 需要 Node.js 环境来运行。首先，你需要安装 Node.js。你可以从 Node.js 官网 下载并安装适合你操作系统的版本。

安装完成后，打开终端（命令行工具）并运行以下命令来验证安装是否成功：

node -v

如果安装成功，你应该会看到 Node.js 的版本号。

3.2 安装 TypeScript 编译器

TypeScript 编译器（tsc）是一个命令行工具，用于将 TypeScript 代码编译为 JavaScript 代码。你可以使用 npm（Node.js 的包管理器）来安装 TypeScript 编译器。

在终端中运行以下命令来全局安装 TypeScript：

npm install -g typescript

安装完成后，你可以运行以下命令来验证安装是否成功：

tsc -v

如果安装成功，你应该会看到 TypeScript 编译器的版本号。

4. 第一个 TypeScript 程序

4.1 创建项目目录

首先，创建一个新的项目目录，并在该目录下初始化一个新的 npm 项目：

mkdir my-typescript-project
cd my-typescript-project
npm init -y

4.2 创建 TypeScript 文件

在项目目录下创建一个新的 TypeScript 文件 index.ts，并在文件中编写以下代码：

// index.ts
function greet(name: string): string {
    return `Hello, ${name}!`;
}

console.log(greet("TypeScript"));

4.3 编译 TypeScript 文件

在终端中运行以下命令来编译 TypeScript 文件：

tsc index.ts

编译完成后，你会看到生成了一个同名的 JavaScript 文件 index.js。

4.4 运行 JavaScript 文件

你可以使用 Node.js 来运行生成的 JavaScript 文件：

node index.js

你应该会看到输出：

Hello, TypeScript!

5. 基本类型和变量声明

5.1 基本类型

TypeScript 支持以下基本类型：

• number：表示数字类型，包括整数和浮点数。
• string：表示字符串类型。
• boolean：表示布尔类型，值为 true 或 false。
• array：表示数组类型，可以指定数组元素的类型。
• tuple：表示元组类型，允许定义固定长度的数组，每个元素的类型可以不同。

5.2 变量声明

在 TypeScript 中，你可以使用 let 或 const 关键字来声明变量，并指定变量的类型。

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let hobbies: string[] = ["reading", "coding"];
let person: [string, number] = ["Bob", 30];

5.3 类型推断

TypeScript 支持类型推断，这意味着如果你在声明变量时直接赋值，TypeScript 会自动推断变量的类型。

let age = 25; // TypeScript 推断 age 为 number 类型
let name = "Alice"; // TypeScript 推断 name 为 string 类型

6. TypeScript 配置文件 (tsconfig.json)

6.1 创建 tsconfig.json

tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译选项和项目结构。你可以在项目根目录下创建一个 tsconfig.json 文件，并添加以下基本配置：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

6.2 配置项解释

• target：指定编译后的 JavaScript 版本，如 ES6、ES5 等。
• module：指定模块系统，如 CommonJS、ES6 等。
• outDir：指定编译后的 JavaScript 文件输出目录。
• rootDir：指定 TypeScript 源文件的根目录。
• strict：启用严格模式，包括 noImplicitAny、strictNullChecks 等选项。
• esModuleInterop：启用 ES 模块互操作性。

7. 基本类型详解

7.1 number 类型

number 类型用于表示数字，包括整数和浮点数。

let age: number = 25;
let pi: number = 3.14;

7.2 string 类型

string 类型用于表示字符串。

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`;

7.3 boolean 类型

boolean 类型用于表示布尔值，值为 true 或 false。

let isStudent: boolean = true;
let isAdult: boolean = false;

7.4 array 类型

array 类型用于表示数组，可以指定数组元素的类型。

let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];

7.5 tuple 类型

tuple 类型用于表示固定长度的数组，每个元素的类型可以不同。

let person: [string, number] = ["Alice", 25];

8. 枚举类型

枚举类型用于定义一组命名的常量。

enum Color {
    Red,
    Green,
    Blue
}

let favoriteColor: Color = Color.Green;
console.log(favoriteColor); // 输出: 1

9. Any 和 Unknown 类型

9.1 any 类型

any 类型允许变量存储任何类型的值，相当于关闭了类型检查。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 也可以是布尔值

9.2 unknown 类型

unknown 类型类似于 any，但它更安全，因为它要求在使用之前进行类型检查。

let notSure: unknown = 4;
if (typeof notSure === "string") {
    console.log(notSure.toUpperCase());
}

10. Void, Null 和 Undefined

10.1 void 类型

void 类型表示没有返回值的函数。

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

10.2 null 和 undefined 类型

null 和 undefined 是 TypeScript 中的两种特殊类型，分别表示空值和未定义的值。

let u: undefined = undefined;
let n: null = null;

11. Never 类型

never 类型表示永远不会发生的值。通常用于表示永远不会返回的函数。

function throwError(message: string): never {
    throw new Error(message);
}

12. 类型断言

类型断言允许开发者告诉编译器某个值的具体类型。

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

13. 函数声明和表达式

13.1 函数声明

函数声明使用 function 关键字定义函数。

function add(a: number, b: number): number {
    return a + b;
}

13.2 函数表达式

函数表达式将函数赋值给一个变量。

let add = function(a: number, b: number): number {
    return a + b;
};

14. 可选参数和默认参数

14.1 可选参数

可选参数使用 ? 标记，表示该参数可以省略。

function greet(name: string, greeting?: string): string {
    return greeting ? `${greeting}, ${name}!` : `Hello, ${name}!`;
}

14.2 默认参数

默认参数在参数声明时指定默认值。

function greet(name: string, greeting: string = "Hello"): string {
    return `${greeting}, ${name}!`;
}

15. 剩余参数

剩余参数使用 ... 语法，表示函数可以接受任意数量的参数。

function sum(...numbers: number[]): number {
    return numbers.reduce((acc, num) => acc + num, 0);
}

16. 函数重载

函数重载允许定义多个具有相同名称但参数类型或数量不同的函数。

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    return a + b;
}

17. This 和箭头函数

17.1 this 关键字

this 关键字在函数中引用当前对象。

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
}

17.2 箭头函数

箭头函数不会创建自己的 this，而是继承外层作用域的 this。

let greet = (name: string) => {
    console.log(`Hello, ${name}!`);
};

18. 接口定义和使用

接口用于定义对象的结构。

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

function greet(person: Person) {
    console.log(`Hello, ${person.name}!`);
}

19. 可选属性和只读属性

19.1 可选属性

可选属性使用 ? 标记，表示该属性可以省略。

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

19.2 只读属性

只读属性使用 readonly 关键字，表示该属性只能在创建时赋值。

interface Person {
    readonly id: number;
    name: string;
}

20. 函数类型接口

函数类型接口用于定义函数的签名。

interface GreetFunction {
    (name: string): string;
}

let greet: GreetFunction = function(name) {
    return `Hello, ${name}!`;
};

21. 类类型接口

类类型接口用于定义类的结构。

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): void;
}

class Clock implements ClockInterface {
    currentTime: Date = new Date();
    setTime(d: Date) {
        this.currentTime = d;
    }
}

22. 继承接口

接口可以继承其他接口。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

23. 类型别名 vs 接口

类型别名和接口都可以用于定义类型，但它们有一些区别。

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

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

24. 类的定义和实例化

类用于定义对象的蓝图。

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
}

let person = new Person("Alice");
person.greet();

25. 继承和多态

25.1 继承

子类可以继承父类的属性和方法。

class Animal {
    move(distance: number = 0) {
        console.log(`Animal moved ${distance}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof! Woof!");
    }
}

25.2 多态

多态允许子类重写父类的方法。

class Animal {
    makeSound() {
        console.log("Animal sound");
    }
}

class Dog extends Animal {
    makeSound() {
        console.log("Woof! Woof!");
    }
}

26. 访问修饰符 (public, private, protected)

26.1 public

public 是默认的访问修饰符，表示属性或方法可以在任何地方访问。

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

26.2 private

private 表示属性或方法只能在类内部访问。

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

26.3 protected

protected 表示属性或方法可以在类内部和子类中访问。

class Person {
    protected name: string;
    constructor(name: string) {
        this.name = name