兼收并蓄 TypeScript - 类: 模块
兼收并蓄 TypeScript - 类: 模块
示例如下:
module\main.ts
/**
* 本例用于演示 import, export
*/
// 从指定的模块中导入指定的被 export 的变量或函数或对象
import { name, hello } from './a';
// 从指定的模块中导入指定的被 export 的变量或函数或对象
import { name_b, hello_b } from './b';
// 从指定的模块中导入指定的被 export 的变量或函数或对象（并重命名）
import { name as name_c, hello as hello_c } from './c';
// 从指定的模块中导入指定的被 export 的变量或函数或对象（并重命名）
import { name as name_d, hello as hello_d } from './d';
// 从指定的模块中导入被 export default 的变量或函数或对象，并为其命名
// 注：对于 export default 导出的对象，在 import 的时候不需要加 {}
import obj_e from './e';
// 从指定的模块中导入被 export default 的变量或函数或对象，并为其命名
// 注：对于 export default 导出的对象，在 import 的时候不需要加 {}
import obj_f from './f';
// 从指定的模块中导入指定的被 export 的变量或函数或对象
import { name as name_g, hello as hello_g } from './g';
// 从指定的模块中导入被 export 的全部内容
import * as obj_h from './h';
console.log(`a: ${name} ${hello()}`);
console.log(`b: ${name_b} ${hello_b()}`);
console.log(`c: ${name_c} ${hello_c()}`);
console.log(`d: ${name_d} ${hello_d()}`);
console.log(`e: ${obj_e.name} ${obj_e.hello()}`);
console.log(`f: ${obj_f.name} ${obj_f.hello()}`);
console.log(`g: ${name_g} ${hello_g()}`);
console.log(`h: ${obj_h.name} ${obj_h.hello()}`);
// 将 './i' 文件导入并编译
import './i';
module\dynamicImport.ts
/**
* 本例用于演示模块的动态导入（es2020 新特性）
*/
setTimeout(async () => {
// 模块的动态导入
const a = await import('./a.js');
console.log(`${a.name} ${a.hello()}`); // name hello
}, 3000);
module\a.ts
let name = "name";
let hello = function() {
return "hello"
};
// 导出指定的变量或函数或对象
export { name, hello }
module\b.ts
let name = "name";
let hello = function() {
return "hello"
};
// 导出指定的变量或函数或对象（并重命名）
export { name as name_b, hello as hello_b};
module\c.ts
// 导出指定的变量或函数或对象
export let name = "name", hello = ()=> { return "hello"; };
module\d.ts
// 导出指定的变量或函数或对象
// 一个模块中可以有多个 export
export let name = "name";
export let hello = ()=> { return "hello"; };
module\e.ts
// 导出 default 变量或函数或对象
// 一个模块中只能有一个 export default
export default {
name : "name",
hello:function() {
return "hello";
}
}
module\f.ts
let obj = {
name : "name",
hello:function() {
return "hello";
}
}
// 导出 default 变量或函数或对象
// 一个模块中只能有一个 export default
export default obj;
module\g.ts
// 从指定的模块中导出全部内容
export * from './a';
module\h.ts
let name = "name";
let hello = function() {
return "hello"
};
// 导出指定的变量或函数或对象
export { name, hello }
module\i.ts
let myName = "i am webabcd";
console.log(myName);
