πPutout plugin for transforming TypeScript code
npm install @putout/plugin-typescript[NPMIMGURL]: https://img.shields.io/npm/v/@putout/plugin-typescript.svg?style=flat&longCache=true
[NPMURL]: https://npmjs.org/package/@putout/plugin-typescript "npm"
> TypeScript is JavaScript with syntax for types.
>
> (c) typescriptcriptlang.org
πPutout plugin adds ability to transform TypeScript code. Enabled by default for ts and tsx files.
```
npm i putout @putout/plugin-typescript -D
- β
apply-as-type-assertion;
- β
apply-type-guards;
- β
apply-utility-types;
- β
convert-commonjs-to-esm;
- β
convert-esm-to-commonjs;
- β
convert-generic-to-shorthand;
- β
convert-namespace-to-global;
- β
cts-file;
- β
find-file;
- β
mts-file;
- β
remove-duplicate-exports;
- β
remove-duplicate-interface-keys;
- β
remove-duplicates-from-union;
- β
remove-unused-types;
- β
remove-getter-arguments;
- β
remove-setter-return-type;
- β
remove-useless-mapped-types;
- β
remove-useless-mapping-modifiers;
- β
remove-useless-non-null-expressions;
- β
remove-useless-parens;
- β
remove-useless-promise;
- β
remove-useless-types;
- β
remove-useless-types-from-constants;
- β
rename-file-cts-to-ts;
- β
rename-file-mts-to-ts;
`json`
{
"rules": {
"typescript/apply-as-type-assertion": "on",
"typescript/apply-utility-types": "on",
"typescript/apply-type-guards": "on",
"typescript/convert-generic-to-shorthand": "on",
"typescript/convert-commonjs-to-esm": "off",
"typescript/convert-esm-to-commonjs": "off",
"typescript/convert-namespace-to-global": "off",
"typescript/remove-duplicates-from-union": "on",
"typescript/remove-duplicates-interface-keys": "on",
"typescript/remove-duplicates-exports": "on",
"typescript/remove-useless-types-from-constants": "on",
"typescript/remove-unused-types": "on",
"typescript/remove-useless-types": "on",
"typescript/remove-useless-parens": "on",
"typescript/remove-useless-promise": "on",
"typescript/remove-getter-arguments": "on",
"typescript/remove-setter-return-type": "on",
"typescript/remove-useless-mapped-types": "on",
"typescript/remove-useless-non-null-expressions": "on",
"typescript/cts-file": "off",
"typescript/mts-file": "off",
"typescript/rename-file-cts-to-ts": "off",
"typescript/rename-file-mts-to-ts": "off",
"typescript/find-file": ["off", {
"ignore": []
}]
}
}
According to best practice.
`ts`
const boundaryElement =
`ts`
const boundaryElement1 = e.target as HTMLElement;
`ts`
type SuperType1 = {
[Key in keyof Type]?: Type[Key];
};
`ts`
type SuperType1 = Partial
> It just so happens that TypeScript has something called a type guard.type guard
> A is some expression that performs a runtime check that guarantees the type in some scope.
>
> (c) typescript.org
Check out in πPutout Editor.
`ts`
const isNumber = (a) => typeof a === 'number';
`ts`
const isNumber = (a): a is number => typeof a === 'number';
> There is no difference at all. Type[] is the shorthand syntax for an array of Type. Array is the generic syntax. They are completely equivalent.
>
> (c) https://stackoverflow.com/a/36843084/4536327
Convert generic to shorthand.
`ts`
interface A {
x: Array
y: Array
}
`ts`
interface A {
x: X[];
y: X[] | Y[];
}
Linter | Rule | Fix
--------|-------|------------|
π Putout | typescript/convert-generic-to-shorthand | β
β£ ESLint | @typescript-eslint/array-type | β
Checkout in πPutout Editor.
`ts`
import foo = require('foo');
export = 5;
`ts
import foo from 'foo';
export default 5;
`
Checkout in πPutout Editor.
`ts
import foo from 'foo';
export default 5;
`
`ts`
import foo = require('foo');
export = 5;
Checkout in πPutout Editor.
`ts`
declare namespace global {
var al: any;
}
`ts`
declare global {
var al: any;
}
Linter | Rule | Fix
--------|-------|------------|
π Putout | typescript/convert-namespace-to-global | β
β£ ESLint | @typescript-eslint/no-namespace | β
`ts`
type x =
| boolean[]
| A
| string
| A
| string[]
| boolean[];
`ts`
type x =
| boolean[]
| A
| string
| string[];
In JavaScript duplicate exports leads to SyntaxError, anyways TypeScript parses such code and reports Duplicates Identifier diagnostic.
It gives us ability to automate fixing of such code π. Check it out in πPutout Editor.
`ts`
export {
a,
hello,
a,
world,
};
#### β Example of correct code
`ts`
export {
hello,
a,
world,
};
βοΈ The rule fits good with putout/add-newlines-between-specifiers of eslint-plugin-putout.
> The get syntax binds an object property to a function that will be called when that property is looked up
>
> (c) MDN
#### β Example of incorrect code
`ts`
export interface IParamsConstructor {
get fromArray: IParams;
}
#### β Example of correct code
`ts`
export interface IParamsConstructor {
get [fromArray](): IParams;
}
> The set syntax binds an object property to a function to be called when there is an attempt to set that property.
>
> (c) MDN
#### β Example of incorrect code
`ts`
export interface IParamsConstructor {
set fromArray(values: ParamsArray): string;
}
#### β Example of correct code
`ts`
export interface IParamsConstructor {
set fromArray(values: ParamsArray);
}
#### β Example of incorrect code
`ts`
const x: any = 5;
#### β Example of correct code
`ts`
const x = 5;
`ts
type n = number;
type s = string;
const x: n = 5;
`
`ts
type n = number;
const x: n = 5;
`
`ts
type oldType = {
a: number;
b: string;
};
type newType = oldType;
const x: newType = {
a: 5,
b: 'hello',
};
`
`ts
type oldType = {
a: number;
b: string;
};
const x: oldType = {
a: 5,
b: 'hello',
};
`
Check it out in πPutout Editor.
`ts`
const m: X[] = [];
const z: X | Y = 5;
const f: X = 5;
`ts`
const x: X[] | Y[] = [];
const m: X[] = [];
const z: X | Y = 5;
const f: X = 5;
Check it out in πPutout Editor.
`ts`
function doStuff(): Promise
return 'hello';
}
`ts`
function doStuff(): string {
return 'hello';
}
Remove useless mapped types.
`ts`
type SuperType = {
[Key in keyof Type]: Type[Key];
};
`ts`
type SuperType = Type;
Checkout in πPutout Editor.
`ts`
const bar = foo!!.str;
const baz = bar!?.n;
`ts`
const bar = foo!.str;
const baz = bar?.n;
Remove useless mapping modifiers.
`ts`
type SuperType = {
[Key in keyof Type]+?: Type[Key];
};
`ts`
type SuperType = {
[Key in keyof Type]?: Type[Key];
};
`ts`
interface Hello {
hello: any;
hello: string;
}
`ts`
interface Hello {
hello: string;
}
Run convert-esm-to-commonjs for all *.cts files with help of redlint.
Check out in πPutout Editor.
Run convert-esm-to-commonjs for all *.mts files with help of redlint.
Check out in πPutout Editor.
Checkout in πPutout Editor.
`ts`
__putout_processor_filesystem(['/', [
'/hello.ts',
'const a: number = 5;',
]]);
`ts`
__putout_processor_filesystem(['/', [
'/hello.ts',
'const a = 5;',
]]);
Rename *.cts files when type === "commonjs":
`diff-- lib/
/
|-- package.json
- -- hello.cts-- hello.ts
+
``
Check out in πPutout Editor.
Rename *.mts files when type === "module":
`diff-- lib/
/
|-- package.json
- -- hello.mts-- hello.ts
+
```
Check out in πPutout Editor.
MIT