es6模块导入与导出,import与export(export default, export { // ... })基础入门

默认导出

一个模块,只允许出现一个默认导出( export default xxx ),出现多个会报错!

导出:

这么写: export default 任何类型的数据

🌰: export default function (pageSize:number, pageNumber: number) { console.log(pageSize, pageNumber); }

上面的代码,为默认导出一个函数, export default后也可以跟任意类型的数据,包括{}

导入:

这么写: import xxx from '你的模块路径' (xxx为默认导出的那个数据,名字随便起)

🌰: import getList from './export'

export.ts

export default function (pageSize: number, pageNumber: number) {
    console.log(pageSize, pageNumber);
}

index.ts

import getList from './export';
getList(1, 2);

分别导出

导出:

这么写: export const|let|var 变量|常量 = 任何类型的数据

导出方法还可以这么写: export function 方法名() { ... }

🌰: export const name = '张三'

🌰: export let age = 23

🌰: export var add = (a:number, b:number) => a + b

🌰: export function myLog() { console.log('我是分别导出的方法'); }

上面的代码,为导出一个name常量和age变量,和add、myLog两个方法

导入:

被导入的文件有 export default 的:

这么写:

import xxx, { export导出的数据1, export导出的数据2, export导出的数据3 } from '你的模块路径'

(xxx为默认导出的那个数据,名字随便起)

🌰: import defaultValue, { name, age, add, myLog } from "./export"
被导入的文件没有 export default 的:

这么写:

import { export导出的数据1, export导出的数据2, export导出的数据3 } from '你的模块路径'

🌰: import { name, age, add, myLog } from "./export"

export.ts

// 有export default
export const name = '张三'
export let age = 23
export var add = (a: number, b: number) => a + b
export function myLog() { 
    console.log('我是分别导出的方法');
}
export default 1;

// 没有export default
export const name = '张三'
export let age = 23
export var add = (a: number, b: number) => a + b
export function myLog() { 
    console.log('我是分别导出的方法'); 
}

index.ts

// 有export default
import defaultValue, { name, age, add, myLog } from "./export";
console.log(defaultValue);
console.log(name);
console.log(age);
console.log(add);
console.log(myLog);

// 没有export default
import { name, age, add, myLog } from "./export";
console.log(name);
console.log(age);
console.log(add);
console.log(myLog);

别名

使用 as 方式来起别名

当模板(template) 中的变量或方法与模块中的变量或方法重名时,可以使用别名的方式来避免

假设现在模板(template) 和模块中,都存在了一个 getList 方法

使用:

这么写: import xxx as 别名 from '你的模块路径'

🌰: import { getList as getListApi } from "./export"

export.ts

export const getList = function () {
    console.log('模块的getList方法');
}

index.ts

import { getList as getListApi } from "./export";

function getList() {
    console.log('模板的getList方法');
    getListApi()
}
getList();

* (模块内所有的导出的内容,包括export default)

使用:

这么写: import * as xxx from '你的模块路径' (xxx为别名, *没法直接用)

🌰: import * as all from './export

export.ts

export const name = '张三';
export const age = 18;
export const hobby = ['篮球', '足球', '乒乓球'];
export const add = (num1: number, num2: number): number => num1 + num2;
export const getList = () => console.log('获取列表');
export default 'hello world';

index.ts

import * as all from './export';
console.log(all);

import函数

相当于动态导入

import函数返回一个Promise,通过.then获取

不用放到最顶层使用(常规的 import xxx from 'xx', 都是必须放到文件最顶层的)

使用:

这么写: import("你的模块路径")

🌰: import("./export")

export.ts

export const name = '张三';
export const age = 18;
export const hobby = ['篮球', '足球', '乒乓球'];
export const add = (num1: number, num2: number): number => num1 + num2;
export const getList = () => console.log('获取列表');
export default 'hello world';

index.ts

if (1 < 2) {
    import("./export").then(res => {
        console.log(res);
    })
}else {
    // 加载其他模块
}