在前端开发中，TypeScript 已经成为了非常流行的语言。它可以让我们在编写 JavaScript 代码时，拥有更强的类型检查和更好的代码提示。在 TypeScript 中，我们也需要经常使用到 import 和 export 语句来引入和导出模块。本文将详细介绍 TypeScript 中的 import 和 export 的使用方式及一些技巧，并提供示例代码。
import 语句
在 TypeScript 中，我们可以使用 import 语句来引入其他模块的代码。import 语句有以下几种使用方式：
1. 导入整个模块
我们可以使用 import 语句来导入一个模块的所有代码，例如：
import * as MyModule from './my-module';
这个语句将会把 './my-module' 模块中导出的所有内容都放在 MyModule 对象中。如果我们需要使用 MyModule 中的某个属性或方法，可以直接使用点号来访问，例如：
console.log(MyModule.myProperty); MyModule.myFunction();
2. 导入单个变量
如果我们只需要导入一个模块中的某个变量，可以使用以下语法：
import { myVariable } from './my-module';
这个语句将会导入 './my-module' 模块中导出的 myVariable 变量，并赋值给当前作用域中的 myVariable 变量。
3. 导入多个变量
如果我们需要导入多个变量，可以使用以下语法：
import { myVariable1, myVariable2 } from './my-module';
这个语句将会导入 './my-module' 模块中导出的 myVariable1 和 myVariable2 变量，并分别赋值给当前作用域中的 myVariable1 和 myVariable2 变量。
4. 导入所有变量
如果我们需要导入一个模块中所有导出的变量，可以使用以下语法：
import * as MyModule from './my-module';
这个语句将会把 './my-module' 模块中导出的所有变量都放在 MyModule 对象中。如果我们需要使用 MyModule 中的某个变量，可以直接使用点号来访问，例如：
console.log(MyModule.myVariable1); console.log(MyModule.myVariable2);
export 语句
在 TypeScript 中，我们可以使用 export 语句来导出模块中的代码。export 语句有以下几种使用方式：
1. 导出单个变量
我们可以使用 export 语句来导出一个变量，例如：
export const myVariable = 'hello';
这个语句将会导出一个名为 myVariable 的常量，其值为 'hello'。
2. 导出多个变量
如果我们需要导出多个变量，可以使用以下语法：
export const myVariable1 = 'hello'; export const myVariable2 = 'world';
这个语句将会导出两个常量 myVariable1 和 myVariable2，分别为 'hello' 和 'world'。
3. 导出默认变量
我们可以使用 export default 语句来导出一个默认变量，例如：
const myVariable = 'hello'; export default myVariable;
这个语句将会导出一个默认变量 myVariable，其值为 'hello'。在导入时，我们可以使用以下语法：
import myVariable from './my-module';
4. 导出函数
如果我们需要导出一个函数，可以使用以下语法：
export function myFunction() { console.log('hello world'); }
这个语句将会导出一个名为 myFunction 的函数，其功能为输出 'hello world'。在导入时，我们可以使用以下语法：
import { myFunction } from './my-module';
5. 导出类
如果我们需要导出一个类，可以使用以下语法：
export class MyClass { myProperty: string = 'hello'; myMethod() { console.log(this.myProperty); } }
这个语句将会导出一个名为 MyClass 的类，其有一个 myProperty 属性和一个 myMethod 方法。在导入时，我们可以使用以下语法：
import { MyClass } from './my-module';
技巧与指导意义
在使用 import 和 export 语句时，我们需要注意以下几点：
1. 使用相对路径
在导入和导出模块时，我们应该使用相对路径。例如，如果我们需要导入位于同一目录下的 my-module.ts 模块，应该使用以下语法：
import { myVariable } from './my-module';
2. 导入和导出时使用相同的名称
为了避免出现错误，我们在导入和导出时应该使用相同的名称。例如，如果我们需要导出一个名为 myVariable 的常量，应该使用以下语法：
export const myVariable = 'hello';
在导入时，我们应该使用以下语法：
import { myVariable } from './my-module';
3. 使用默认导出
在导出模块时，如果只需要导出一个变量或函数，可以使用默认导出。这样做可以让代码更简洁易懂。例如，如果我们需要导出一个名为 myVariable 的常量，可以使用以下语法：
const myVariable = 'hello'; export default myVariable;
在导入时，我们可以使用以下语法：
import myVariable from './my-module';
4. 使用命名导出
在导出模块时，如果需要导出多个变量或函数，可以使用命名导出。这样做可以让代码更清晰明了。例如，如果我们需要导出两个常量 myVariable1 和 myVariable2，可以使用以下语法：
export const myVariable1 = 'hello'; export const myVariable2 = 'world';
在导入时，我们可以使用以下语法：
import { myVariable1, myVariable2 } from './my-module';
示例代码
下面是一个使用了 import 和 export 语句的 TypeScript 模块示例代码：
-- -------------------- ---- ------- -- ------------ ------ ----- ----------- - -------- ------ ----- ----------- - -------- ------ -------- ------------ - ------------------ -------- - ------ ----- ------- - ----------- ------ - -------- ---------- - ----------------------------- - -展开代码
-- -------------------- ---- ------- -- -------- ------ - ------------ ----------- - ---- -------------- ------ - ---------- - ---- -------------- ------ - ------- - ---- -------------- ------------------------- ------------------------- ------------- ----- ------- - --- ---------- -------------------展开代码
在 index.ts 中，我们使用了不同的 import 语句来导入 my-module.ts 模块中的变量、函数和类，并在控制台中输出了它们的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1fad3a941bf71343edf74
