TypeScript 笔记

最近自己开了个坑,用 Koa 2 实现一个简单的 CMS。在写的过程中发现原生 JS 写着固然爽,但是因为 JavaScript 本身真的标准太多了,我的强迫症告诉我跟着一种标准走准没错!于是我开始学习 TypeScript 了!短时间内增加了我的学习成本以及时间成本,但是在长期的角度来看能提升代码质量以及可维护性!

关于 export

在 JS 的各种标准里,模块的导入和导出有不同的方式。

命名导出 - export

最常见的导出方式,也是最好用的,可以一次性导出一个值,也可以一次性导出很多个值。这种导出方式也叫 named export

1
2
3
4
5
6
7
8
9
10
11
// Exporting individual features
export let name1, name2, ...; // also var, const
export let name1 = ..., name2 = ..., ...; // also var, const
export function functionName(){...}
export class ClassName {...}

// Export list
export { name1, name2, ... };

// Renaming exports
export { variable1 as name1, variable2 as name2, ... };

对应的导入方式应为:

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
2
3
4
// 整体导出
module.exports = foo;
// 单个导出
exports.bar = bar;

在 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
2
3
4
5
6
export = foo;

declare function foo(): string;
declare namespace foo {
const bar: number;
}

小结

export =import ... require 是 TypeScript 为了兼容 CommonJS 和 AMD 规范二存在的语法,所以其实并不常用。在绝大多数情况下,还是建议用 named export

To - Be - Done

文章作者: Kiyoshi
文章链接: https://blog.k1yoshi.com/article/ts-note/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Kiyoshi's Blog