mirror of
https://github.com/labs42io/clean-code-typescript.git
synced 2024-11-23 05:34:04 +00:00
Grouping imports and typescript aliases (#16)
* Grouping imports and typescript aliases * fix PR comments (rename section + tsconfig example) * shorter import (Use typescript aliases Example) * Adjust `Organize imports` description
This commit is contained in:
parent
2e1325b54e
commit
c46f8d7599
80
README.md
80
README.md
|
@ -2508,6 +2508,86 @@ class Square implements Shape {
|
|||
|
||||
**[⬆ back to top](#table-of-contents)**
|
||||
|
||||
### Organize imports
|
||||
|
||||
With clean and easy to read import statements you can quickly see the dependencies of current code. Make sure you apply following good practices for `import` statements:
|
||||
|
||||
- Import statements should be alphabetized and grouped.
|
||||
- Unused imports should be removed.
|
||||
- Named imports must be alphabetized (i.e. `import {A, B, C} from 'foo';`)
|
||||
- Import sources must be alphabetized within groups, i.e.: `import * as foo from 'a'; import * as bar from 'b';`
|
||||
- Groups of imports are delineated by blank lines.
|
||||
- Groups must respect following order:
|
||||
- Polyfills (i.e. `import 'reflect-metadata';`)
|
||||
- Node builtin modules (i.e. `import fs from 'fs';`)
|
||||
- external modules (i.e. `import { query } from 'itiriri';`)
|
||||
- internal modules (i.e `import { UserService } from 'src/services/userService';`)
|
||||
- modules from a parent directory (i.e. `import foo from '../foo'; import qux from '../../foo/qux';`)
|
||||
- modules from the same or a sibling's directory (i.e. `import bar from './bar'; import baz from './bar/baz';`)
|
||||
|
||||
**Bad:**
|
||||
|
||||
```ts
|
||||
import { TypeDefinition } from '../types/typeDefinition';
|
||||
import { AttributeTypes } from '../model/attribute';
|
||||
import { ApiCredentials, Adapters } from './common/api/authorization';
|
||||
import fs from 'fs';
|
||||
import { ConfigPlugin } from './plugins/config/configPlugin';
|
||||
import { BindingScopeEnum, Container } from 'inversify';
|
||||
import 'reflect-metadata';
|
||||
```
|
||||
|
||||
**Good:**
|
||||
|
||||
```ts
|
||||
import 'reflect-metadata';
|
||||
|
||||
import fs from 'fs';
|
||||
import { BindingScopeEnum, Container } from 'inversify';
|
||||
|
||||
import { AttributeTypes } from '../model/attribute';
|
||||
import { TypeDefinition } from '../types/typeDefinition';
|
||||
|
||||
import { ApiCredentials, Adapters } from './common/api/authorization';
|
||||
import { ConfigPlugin } from './plugins/config/configPlugin';
|
||||
```
|
||||
|
||||
**[⬆ back to top](#table-of-contents)**
|
||||
|
||||
### Use typescript aliases
|
||||
|
||||
Create prettier imports by defining the paths and baseUrl properties in the compilerOptions section in the `tsconfig.json`
|
||||
|
||||
This will avoid long relative paths when doing imports.
|
||||
|
||||
**Bad:**
|
||||
|
||||
```ts
|
||||
import { UserService } from '../../../services/UserService';
|
||||
```
|
||||
|
||||
**Good:**
|
||||
|
||||
```ts
|
||||
import { UserService } from '@services/UserService';
|
||||
```
|
||||
|
||||
```js
|
||||
// tsconfig.json
|
||||
...
|
||||
"compilerOptions": {
|
||||
...
|
||||
"baseUrl": "src",
|
||||
"paths": {
|
||||
"@services": ["services/*"]
|
||||
}
|
||||
...
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
**[⬆ back to top](#table-of-contents)**
|
||||
|
||||
## Comments
|
||||
|
||||
The use of a comments is an indication of failure to express without them. Code should be the only source of truth.
|
||||
|
|
Loading…
Reference in a new issue