最近自己开了个坑,用 Koa 2 实现一个简单的 CMS。在写的过程中发现原生 JS 写着固然爽,但是因为 JavaScript 本身真的标准太多了,我的强迫症告诉我跟着一种标准走准没错!于是我开始学习 TypeScript 了!短时间内增加了我的学习成本以及时间成本,但是在长期的角度来看能提升代码质量以及可维护性!
关于 export
在 JS 的各种标准里,模块的导入和导出有不同的方式。
命名导出 - export
最常见的导出方式,也是最好用的,可以一次性导出一个值,也可以一次性导出很多个值。这种导出方式也叫 named export。
1 | // Exporting individual features |
对应的导入方式应为:
1 | import { name, getName, Animal, Directions, Options } from 'foo'; |
默认导出 - export default
默认导出是 ES6 模块系统中的一个特性,使用它导出的值不需要被命名:
1 | export default function foo(): stirng; |
要导入 export default
的值是很直观的:
1 | import foo from "foo" |
我们不需要 { variable, ... }
来选择哪一个导出的值,非常方便,但是在实际应用中也有很多缺陷,在网络上已经有很多人吐槽啦。
兼容导出 - export =
兼容导出是我自己给它取的名字,这种方式的导出对应了 CommonJS 中的:
1 | // 整体导出 |
在 TS 中,我们有三种方式导入,其中第三种是官方所推荐的方式:
-
const variableName = require("moduleName")
和const variableName = require("modueltName").propertyName
1
2
3
4// 整体导入
const foo = require('foo');
// 单个导入
const bar = require('foo').bar; -
import {propertyName, ...} from "moduleName"
和import * as variableName from "moduleName"
1
2
3
4// 整体导入
import * as foo from 'foo';
// 单个导入
import { bar } from 'foo'; -
import variableName = require("moduleName")
和import variableName = moduleName.propertyName
1
2
3
4// 整体导入
import foo = require('foo');
// 单个导入
import bar = foo.bar;
由于第三种是官方推荐的方式,那就默认第三种!
因为在使用 export =
之后,我们不能再导出单个值了,所以这个时候我们应该用 declare
来实现声明合并:
1 | export = foo; |
小结
export =
和 import ... require
是 TypeScript 为了兼容 CommonJS 和 AMD 规范二存在的语法,所以其实并不常用。在绝大多数情况下,还是建议用 named export。
To - Be - Done