超快让你认识新宠儿“TS”

什么是 TypeScript

定义和背景

TypeScript 是由微软开发并维护的一种开源编程语言。它被称为 JavaScript 的超集，这意味着所有合法的 JavaScript 代码在 TypeScript 中同样合法。TypeScript 增加了静态类型、类和接口等特性，旨在提高代码的可维护性和可读性，特别是在大型项目中。TypeScript 的设计目标是让开发者能够在编写代码时发现潜在的错误，并且在使用现代 JavaScript 特性的同时能够更好地组织和管理代码。

安装和基本设置步骤

安装 TypeScript 很简单，只需使用 npm（Node 包管理器）即可。

安装 Node.js 和 npm 首先，需要确保你已经安装了 Node.js 和 npm。你可以从 Node.js 官方网站下载并安装。
安装 TypeScript 编译器 在命令行中运行以下命令来全局安装 TypeScript 编译器：
```
npm install -g typescript
```
创建一个 TypeScript 文件 新建一个名为 hello.ts 的文件，并添加以下代码：
javascript 复制代码
```
function greet(name: string) {
    return `Hello, ${name}!`;
}

console.log(greet("World"));
```
编译 TypeScript 文件 使用 TypeScript 编译器将 hello.ts 编译为 JavaScript 文件：
```
tsc hello.ts
```
这将在同一目录下生成一个 hello.js 文件，内容如下：
javascript 复制代码
```
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("World"));
```

TypeScript 的主要特性

静态类型检查

TypeScript 的核心特性之一是静态类型检查。与 JavaScript 不同，TypeScript 可以在编译时检测类型错误，这有助于在早期发现并修复潜在的问题。

ini 复制代码

let isDone: boolean = false;
let age: number = 25;
let userName: string = "John";

基本类型、接口和类型别名

TypeScript 提供了多种基本类型以及定义复杂类型的机制。

基本类型

ini 复制代码

let isDone: boolean = false;
let age: number = 25;
let userName: string = "John";

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

css 复制代码

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

let user: Person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

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

ini 复制代码

type StringOrNumber = string | number;

let sample: StringOrNumber;
sample = "Hello";
sample = 123;

类和对象

TypeScript 支持面向对象编程，包括类和继承等特性。

typescript 复制代码

class Animal {
    name: string;

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

    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

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

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

模块和命名空间

模块和命名空间用于组织和封装代码。

模块模块是外部的，可以导入和导出。

typescript 复制代码

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

// main.ts
import { add } from './utils';

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

命名空间 命名空间是内部的，用于逻辑分组。

arduino 复制代码

namespace Utility {
    export function log(message: string) {
        console.log(message);
    }
}

Utility.log("Hello, TypeScript!");

泛型

泛型用于创建可复用的组件。

ini 复制代码

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

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

异步编程支持

TypeScript 支持现代 JavaScript 的异步编程模式，包括 async/await 语法。

javascript 复制代码

function delay(ms: number) {
    return new Promise<void>(resolve => setTimeout(resolve, ms));
}

async function asyncCall() {
    console.log("Waiting...");
    await delay(1000);
    console.log("Done!");
}

asyncCall();

TypeScript 与 JavaScript 的区别

主要区别和优劣势对比

TypeScript 和 JavaScript 的主要区别在于类型系统。TypeScript 是强类型或静态类型的，而 JavaScript 是弱类型或动态类型的。

静态类型： TypeScript 在编译时检查类型，发现错误。

ini 复制代码

let isDone: boolean = false;
// isDone = 123; // Error: Type 'number' is not assignable to type 'boolean'

动态类型： JavaScript 只有在运行时才会发现类型错误。
ini 复制代码
```
let isDone = false;
isDone = 123; // No error until runtime
```

迁移 JavaScript 代码到 TypeScript 的方法和注意事项

将现有的 JavaScript 项目迁移到 TypeScript 可以逐步进行：

重命名文件 ：将 .js 文件重命名为 .ts 文件。
添加类型注解：在代码中逐步添加类型注解。
javascript 复制代码
```
function greet(name: string) {
    return `Hello, ${name}!`;
}
```

配置 TypeScript 编译器 ：创建一个 tsconfig.json 文件，配置 TypeScript 编译选项。

json 复制代码

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true
    }
}

逐步引入类型检查 ：使用 any 类型逐步进行迁移，减少初期的编译错误。
ini 复制代码
```
let someValue: any = "this is a string";
```

编译器的工作原理和选项

TypeScript 编译器 (tsc) 将 TypeScript 代码编译为 JavaScript 代码，并支持多种编译选项。

基本编译命令：
```
tsc filename.ts
```

配置文件 (tsconfig.json) ：配置文件用于指定编译选项。

json 复制代码

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

与常见框架和库的集成

TypeScript 与流行的 JavaScript 框架和库（如 React, Vue）紧密集成。

React ：使用 create-react-app 创建 TypeScript 项目。
lua 复制代码
```
npx create-react-app my-app --template typescript
```
Vue： Vue CLI 支持创建 TypeScript 项目。
lua 复制代码
```
vue create my-vue-app
```