tslint import-ordering

tslint 3.13.0版本中引入规则import-ordering, 该规则强制规范import语句,将其进行分组,每组用单个空行分隔,起顺序为:

  1. 三方库引入(标准npm依赖)
  2. npm-scoped
  3. 相对路径引入

在每个group中,又可强制alphabetize规则
如果check-groups打开时,每个group字母顺序来format, 若未打开则强制所有import的alphabetize
在实践中发现一些问题是

  1. 比如在Angular 2代码风格中,angular core的引入需要在应用引入之前,但这并不总是alphabetized
  2. 单元测试中,测试实例需要在最后引入,仍然未必alphabetized

可以通过如下风格规避:

import * as fs from 'fs';
import * as os from 'os';

import * as bar from './bar';
import * as foo from './foo';

import default problem

之前用react实现自己的组件库时,遭遇了如下err

Uncaught TypeError: Cannot read property 'createElement' of undefined

经多方查阅以后总结了一下,主要问题出现在typescript引入方式上。

// this importing syntax may cause err
import X from Y

// default importing is safe
import * as X from Y

about enzyme

在typescript里写测试的时候,其正确表现会和react版本有关系,同时涉及到import的语法。
这时候发现的一个蛋疼现象是test只能在es6的import语法下正常跑过。
总结了一下发现,其实只有在被测试组件里引入了third-party-dependency的时候报错(比 如antd里面的测试),这时候,使用 import X as Y(好像是,懒得查了,错了换default)。