42、ES6模块与TypeScript基础入门

ES6模块与TypeScript基础入门

1. ES6模块概述

ES6模块可以避免污染全局作用域，将脚本及其成员（类、函数、变量和常量）的可见性限制在导入它们的模块中。

1.1 导入和导出

模块是实现特定功能的JavaScript文件，通过导出（或导入）公共API，供其他JavaScript程序使用。无需特殊关键字来声明某个文件中的代码是模块，只需使用 import 和 export 关键字，即可将脚本转换为ES6模块。
- import 关键字 ：使一个脚本能够声明它需要使用另一个脚本中导出的成员。
- export 关键字 ：用于声明模块应向其他脚本公开的变量、函数和类。未明确导出的模块函数、变量和类对模块来说是私有的。

1.2 导出类型

ES6提供了两种导出方式：命名导出和默认导出。

1.2.1 命名导出

可以在模块的多个成员（如类、函数和变量）前使用 export 关键字。示例代码如下：

// tax.js
export let taxCode = 1;
export function calcTaxes() { }
function doSomethingElse() { }
export function fileTaxes() { }

当脚本导入命名导出的模块成员时，它们的名称必须放在花括号中。示例代码如下：

// main.js
import {taxCode, calcTaxes} from 'tax';
if (taxCode === 1) { // do something }
calcTaxes();

1.2.2 默认导出

可以将一个导出的模块成员标记为默认导出，这意味着它是一个匿名导出，另一个模块可以在其导入语句中为其指定任何名称。示例代码如下：

// my_module.js
export default function() { // do something }
export let taxCode;

导入默认导出和命名导出的示例代码如下：

// main.js
import coolFunction, {taxCode} from 'my_module';
coolFunction();

注意，默认导出的 coolFunction 不需要使用花括号，而命名导出的 taxCode 需要。导入使用 default 关键字导出的类、变量或函数的脚本可以为它们指定新名称，而无需使用任何特殊关键字。若要为命名导出指定别名，可按以下方式编写：

import coolFunction, {taxCode as taxCode2016} from 'my_module';

导入模块语句不会复制导出的代码，导入作为引用。导入模块或成员的脚本无法修改它们，如果导入模块中的值发生变化，新值会立即反映在所有导入它们的地方。

1.3 注意事项

在Angular应用中，不要使用默认导出，因为在提前编译（AoT）期间会出现错误。

2. TypeScript基础

2.1 TypeScript简介

TypeScript由微软于2012年发布，核心开发者是Anders Hejlsberg。它支持ES5、ES6及更新的ECMAScript语法，是JavaScript的超集，为JavaScript添加了许多有用的功能。

2.2 转译器的作用

Web浏览器只能理解JavaScript，如果源代码是用TypeScript编写的，必须将其转译为JavaScript才能在JavaScript引擎（无论是浏览器还是独立引擎）中运行。转译是将一种语言的程序源代码转换为另一种语言的源代码，很多开发者也使用“编译”这个词。

2.3 开始使用TypeScript

2.3.1 安装和使用TypeScript编译器

可以使用Node.js的npm包管理器安装TypeScript编译器。以下是具体步骤：
1. 全局安装TypeScript编译器：

npm install -g typescript

2. 检查TypeScript编译器版本：

tsc --version

3. 将TypeScript代码转译为JavaScript：

tsc main.ts

4. 生成源映射文件：

tsc --sourcemap main.ts

5. 将代码转译为ES5兼容语法：

tsc --t ES5 main.ts

6. 启动TypeScript编译器的监视模式：

tsc -w *.ts

2.3.2 TypeScript作为JavaScript的超集

只需将JavaScript代码文件的扩展名从 .js 更改为 .ts ，它就会成为有效的TypeScript代码。

2.4 运行代码示例

若要在本地计算机上运行代码示例，请按以下步骤操作：
1. 从 https://nodejs.org/en/download/ 安装Node.js（使用当前版本）。
2. 将 https://github.com/Farata/angulartypescript 仓库克隆或下载到任意目录。
3. 在命令窗口中，进入该目录，然后进入 code-samples/appendixB 子目录。
4. 运行 npm install 命令，在本地安装项目依赖项（TypeScript编译器）。
5. 运行 npm run tsc 命令，使用本地安装的TypeScript编译器将所有代码示例编译到 dist 目录。
6. 运行特定的代码示例（如 fatArrow.js ），使用以下命令：

node dist/fatArrow

2.5 可选类型

可以为变量声明类型，也可以不声明。示例代码如下：

let name1 = 'John Smith';
let name2: string = 'John Smith';

在第二行中，指定类型 string 是不必要的，因为变量用字符串初始化，TypeScript会推断 name2 的类型为 string 。即使在声明中不使用类型，TypeScript也会根据赋值推断类型并进行类型检查，这称为类型推断。

TypeScript中有四个用于声明基本类型的关键字： number 、 boolean 、 string 和 void ，最后一个表示函数声明中没有返回值。变量可以具有 null 或 undefined 类型的值。示例代码如下：

let salary: number;
let isValid: boolean;
let customerName: string = null;

从TypeScript 2.7开始，需要在声明期间初始化变量，或者在构造函数中初始化成员变量。所有这些类型都是 any 类型的子类型，可以显式声明变量为 any 类型，此时不会应用推断类型。示例代码如下：

let name2: any = 'John Smith';
name2 = 123;

2.6 函数

TypeScript函数和函数表达式与JavaScript函数类似，但可以显式声明参数类型和返回值。

2.6.1 计算税的JavaScript函数示例

function calcTax(state, income, dependents) {
    if (state === 'NY') {
        return income * 0.06 - dependents * 500;
    } else if (state === 'NJ') {
        return income * 0.05 - dependents * 300;
    }
}

如果错误地传递参数，可能会导致结果为 NaN 。

2.6.2 计算税的TypeScript函数示例

function calcTax(state: string, income: number, dependents: number): number {
    if (state === 'NY'){
        return income * 0.06 - dependents * 500;
    } else if (state ==='NJ'){
        return income * 0.05 - dependents * 300;
    }
}

使用TypeScript编译器可以在编译时检测到类型不匹配的错误，避免运行时错误。

2.6.3 默认参数

在声明函数时，可以指定默认参数值。示例代码如下：

function calcTax(income: number, dependents: number, state: string = 'NY'): number{
    // the code goes here
}

可以使用两个或三个参数调用该函数。

2.6.4 可选参数

在TypeScript中，可以通过在参数名称后附加问号将函数参数标记为可选。可选参数必须在函数声明中位于最后。示例代码如下：

function calcTax(income: number, state: string = 'NY', dependents?: number): number{
    let deduction: number;
    if (dependents) {
        deduction = dependents * 500;
    }else {
        deduction = 0;
    }
    if (state === 'NY') {
        return income * 0.06 - deduction;
    } else if (state === 'NJ') {
        return income * 0.05 - deduction;
    }
}

2.7 函数重载

JavaScript不支持函数重载，而TypeScript支持，但由于代码必须转译为单个JavaScript函数，重载的语法并不优雅。可以声明函数的多个签名，但只有一个函数体，在函数体中需要检查参数的数量和类型，并执行相应的代码部分。示例代码如下：

function attr(name: string): string;
function attr(name: string, value: string): void;

3. 总结

本文介绍了ES6模块和TypeScript的基础知识，包括模块的导入和导出、TypeScript的安装和使用、可选类型、函数等内容。通过使用ES6模块和TypeScript，可以提高代码的可维护性和安全性，减少运行时错误。

下面是一个简单的流程图，展示了TypeScript代码的编译过程：

graph LR
    A[TypeScript代码] --> B(转译)
    B --> C[JavaScript代码]
    C --> D(运行)
    B --> E[源映射文件]
    D --> F(调试)
    E --> F

同时，为了更清晰地对比JavaScript和TypeScript函数的差异，我们列出以下表格：
| 特性 | JavaScript | TypeScript |
| ---- | ---- | ---- |
| 参数类型声明 | 无 | 可以显式声明 |
| 返回值类型声明 | 无 | 可以显式声明 |
| 类型检查 | 运行时可能出错 | 编译时检查 |
| 默认参数 | 手动实现 | 支持语法声明 |
| 可选参数 | 手动处理 | 支持语法声明 |
| 函数重载 | 不支持 | 支持 |

4. 深入理解ES6模块和TypeScript

4.1 ES6模块的优势和应用场景

ES6模块的主要优势在于避免全局作用域污染，增强代码的封装性和可维护性。在实际开发中，当项目规模较大时，使用ES6模块可以将不同功能的代码分割成独立的模块，便于团队协作和代码管理。
例如，在一个电商网站的前端开发中，可以将商品列表展示、购物车管理、用户登录等功能分别封装成独立的模块，通过导入和导出机制实现模块之间的交互。

4.2 TypeScript的类型系统在实际项目中的应用

TypeScript的类型系统可以帮助开发者在编译阶段发现类型错误，减少运行时错误。在大型项目中，类型检查可以提高代码的可靠性和可维护性。
以一个在线文档编辑系统为例，使用TypeScript可以对文档的标题、内容、作者等信息进行类型定义，确保数据的准确性。

interface Document {
    title: string;
    content: string;
    author: string;
}

function saveDocument(doc: Document) {
    // 保存文档的逻辑
}

4.3 ES6模块和TypeScript的结合使用

在实际项目中，通常会将ES6模块和TypeScript结合使用。以下是一个简单的示例，展示了如何在TypeScript项目中使用ES6模块：

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

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

const result = add(1, 2);
console.log(result);

通过这种方式，可以充分发挥ES6模块的模块化优势和TypeScript的类型检查功能。

5. 实践操作：搭建一个简单的TypeScript项目

5.1 项目初始化

首先，确保已经安装了Node.js和npm。然后，创建一个新的项目目录，并在该目录下初始化项目：

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

5.2 安装TypeScript编译器

使用npm全局安装TypeScript编译器：

npm install -g typescript

5.3 配置TypeScript编译器

在项目根目录下创建一个 tsconfig.json 文件，配置TypeScript编译器的选项：

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

5.4 编写TypeScript代码

在项目中创建一个 src 目录，并在其中创建一个 main.ts 文件：

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

const message = greet('World');
console.log(message);

5.5 编译和运行代码

使用TypeScript编译器将 main.ts 文件编译为JavaScript文件：

tsc src/main.ts

编译后会在项目根目录下生成一个 main.js 文件，使用Node.js运行该文件：

node main.js

5.6 项目结构和流程总结

以下是项目的结构和编译运行流程的流程图：

graph LR
    A[项目根目录] --> B(src目录)
    B --> C(main.ts)
    C --> D(tsc编译)
    D --> E(main.js)
    E --> F(node运行)
    A --> G(tsconfig.json)
    D --> G

6. 总结与展望

6.1 总结

本文深入探讨了ES6模块和TypeScript的相关知识，包括ES6模块的导入导出、TypeScript的类型系统、函数特性等。通过结合实际示例和操作步骤，展示了如何在项目中使用ES6模块和TypeScript，以及它们带来的优势。

6.2 展望

随着Web开发技术的不断发展，ES6模块和TypeScript的应用将会越来越广泛。未来，它们可能会在更多的领域得到应用，如人工智能、物联网等。同时，相关的工具和生态系统也会不断完善，为开发者提供更好的开发体验。

为了更清晰地展示ES6模块和TypeScript的关键特性，我们列出以下表格：
| 特性 | ES6模块 | TypeScript |
| ---- | ---- | ---- |
| 作用 | 避免全局作用域污染，增强模块化 | 提供类型系统，增强代码可靠性 |
| 导入导出 | 支持命名导出和默认导出 | 与ES6模块结合使用 |
| 类型检查 | 无 | 编译时进行类型检查 |
| 函数特性 | 基本的函数语法 | 支持参数类型、返回值类型、默认参数、可选参数和函数重载 |

通过学习和掌握ES6模块和TypeScript，开发者可以提高代码的质量和可维护性，更好地应对复杂的项目需求。