TypeScrtipt 中的模块化

TypeScript模块化实战指南

最新推荐文章于 2025-04-04 21:18:33 发布

原创最新推荐文章于 2025-04-04 21:18:33 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript

TS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在TypeScript中实现模块化的多种方式，包括统一导出与解构导入、单独导出、对象导出、默认导出、混合导入以及export和import的结合使用。通过具体的代码示例展示了如何在不同场景下进行模块间的交互，帮助开发者更好地理解和应用TypeScript的模块系统。

TypeScrtipt 中的模块化

首先初始化项目：

// 在控制台输入 npm init 选择相应的选项（一直回车）
npm init

局部安装typescript

// 在控制台输入
npm i typescrtipt

设置自动编译typescript

// 控制台输入 
npm i ts-node-dev --save-dev

packages.json中添加脚本

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "ts-node-dev --respawn --transpile-only index.ts"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "typescript": "^4.7.2"
  },
  "devDependencies": {
    "ts-node-dev": "^2.0.0"
  }
}

在终端中使用npm start启动

新建文件夹src
- 文件夹src下面新建文件夹模块化
- 在文件夹模块化下面新建文件foo.ts和mian.ts
在根目录下新建文件index.ts作为入口文件
```
import "./src/模块化/main";
```

ts模块化情况一（统一导出，解构导入）

在src文件夹下面的模块化文件夹下面的foo.ts中

const username = "admin";

const sum = (a: number, b: number): number => {
  return a + b;
};

// 统一导出
export { sum, username };

在src文件夹下面的模块化文件夹下面的main.ts中

import { username, sum} from "./foo";

console.log(username);
console.log(sum(10, 20));

打印结果展示

ts模块化情况二（单独导出，解构导入）
- 在src文件夹下面的模块化文件夹下面的foo.ts中
```
// 单独导出
export const sayHello = (name: string): void => {
  console.log(name);
};
```
- 在src文件夹下面的模块化文件夹下面的main.ts中
```
import { sayHello } from "./foo";

sayHello("张三");
```
- 打印结果展示

ts模块化情况三（统一或者单独导出）作为一个对象

在src文件夹下面的模块化文件夹下面的foo.ts中

const username = "admin";

const sum = (a: number, b: number): number => {
  return a + b;
};

// 统一导出
export { sum, username };

// 单独导出
export const sayHello = (name: string): void => {
  console.log(name);
};

在src文件夹下面的模块化文件夹下面的main.ts中

// 起一个别名 foo
import * as foo from "./foo";

console.log(foo);
console.log(foo.username);
foo.sayHello("张三");

打印结果展示

ts模块化情况四：默认导出（一个文件中只能有一个默认导出）
- 在src文件夹下面的模块化文件夹下面的foo.ts中
```
// 默认导出
export default function () {
  console.log("默认导出");
}
```
- 在src文件夹下面的模块化文件夹下面的main.ts中
```
import a from "./foo";

a();
```
- 打印结果展示

ts模块化情况五：一起导入默认导出的和统一（单独）导出的

在src文件夹下面的模块化文件夹下面的foo.ts中

const username = "admin";

const sum = (a: number, b: number): number => {
  return a + b;
};

// 统一导出
export { sum, username };

// 单独导出
export const sayHello = (name: string): void => {
  console.log(name);
};

// 默认导出
export default function () {
  console.log("默认导出");
}

在src文件夹下面的模块化文件夹下面的main.ts中

import a, { username, sum, sayHello } from "./foo";

a();
console.log(username);
console.log(sum);
sayHello("张三");

打印结果展示

ts模块化情况六：export和import结合使用

在formatDate.ts中

/**
 * 格式化时间
 * @param date
 * @returns 日期
 */
export const formatDate = (date: Date): string => {
  return date.toLocaleDateString();
};

在formatString.ts中

export const formatString = (a: any) => {
  return a.toString();
};

在math.ts中

export const random = () => {
  return Math.random();
};

在模块二文件夹里面的index.ts中（做统一导出）

export * from "./formatDate";
export * from "./formatString";
export * from "./math";

在根目录下的index.ts中（做导入）

import { formatDate, formatString, random } from "./src/模块化2/index";

console.log(formatDate(new Date()));

console.log(formatString(10));

console.log(random());

打印结果展示