Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cyco130/detype
Remove the types, keep the formatting
https://github.com/cyco130/detype
Last synced: about 10 hours ago
JSON representation
Remove the types, keep the formatting
- Host: GitHub
- URL: https://github.com/cyco130/detype
- Owner: cyco130
- Created: 2021-10-07T09:39:28.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-15T19:31:20.000Z (3 months ago)
- Last Synced: 2024-10-12T14:49:05.539Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 406 KB
- Stars: 80
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# detype
> Remove the types, keep the formatting
```sh
npm i -g detype
```
Suppose you have a library that you want to provide usage examples for. **detype** can help you generate vanilla JavaScript samples from TypeScript samples automatically and remove the burden of maintaining two separate versions of what is essentially the same code.
It is a command line tool and a library that removes type annotations and other TypeScript specific syntax constructs and outputs vanilla JavaScript **without altering the source formatting** too much. It supports `.ts`, `.tsx`, as well as `.vue` files.
In other words, it turns this:
```ts
import type { ParsedPath } from "path";
let x: string;
// This comment should be kept
// This comment should be deleted
// Ditto for this
interface Foo {
// This should go too
bar: number;
}
// This comment should also be kept
export function bar(foo: Foo): Date {
return new Date();
}
```
into this:
```js
let x;
// This comment should be kept
// This comment should also be kept
export function bar(foo) {
return new Date();
}
```
The output is very close to hand-written JavaScript, especially if you were already using Prettier for formatting.
## Doesn't `tsc` already do that?
There are lots of tools for transpiling TypeScript into plain JavaScript (`tsc`, `babel`, `swc`, `esbuild`, `sucrase` etc.) but none of them is perfectly suitable for this specific use case. Most of them don't preserve the formatting at all. `sucrase` comes close, but it doesn't remove comments attached to TypeScript-only constructs.
`detype` uses [Babel](https://babeljs.io/), a small Babel plugin to remove comments attached to TypeScript-only constructs, and [Prettier](https://prettier.io/) under the hood. For Vue files, it also uses the tools from the [VueDX project](https://github.com/vuedx/languagetools).
## Magic comments
Sometimes you want the generated JavaScript to be slightly different than the TypeScript original. You can use the magic comments feature to achieve this:
Input:
```ts
// @detype: replace
// These two lines will be removed
console.log("Hello from TypeScript");
// @detype: with
// // Notice the double comments!
// console.log("Hello from JavaScript");
// @detype: end
```
Output:
```js
// Notice the double comments!
console.log("Hello from JavaScript");
```
If you just want to remove the magic comments, you can use the `-m` CLI flag or the `removeMagicComments` function to generate uncluttered TypeScript like this:
```ts
// These two lines will be removed
console.log("Hello from TypeScript");
```
## CLI Usage
```
detype [-m | --remove-magic-comments] [OUTPUT]
INPUT Input file or directory
OUTPUT Output file or directory
(optional if it can be inferred and it won't overwrite the source file)
-t, --remove-ts-comments
Remove @ts-ignore and @ts-expect-error comments
-m, --remove-magic-comments
Remove magic comments only, don't perform ts > js transform
detype [-v | --version]
Print version and exit
detype [-h | --help]
Print this help and exit
```
## Node API
```ts
// Transform TypeScript code into vanilla JavaScript without affecting the formatting
function transform(
// Source code
code: string,
// File name for the source
fileName: string,
// Options to pass to prettier
prettierOptions?: PrettierOptions | null,
): Promise;
// Transform the input file and write the output to another file
function transformFile(
inputFileName: string,
outputFileName: string,
): Promise;
// Remove magic comments without performing the TS to JS transform
export async function removeMagicComments(
// Source code
code: string,
// File name for the source
fileName: string,
// Options to pass to prettier
prettierOptions?: PrettierOptions | null,
): Promise;
// Remove magic comments from the input file and write the output to another file
export async function removeMagicCommentsFromFile(
inputFileName: string,
outputFileName: string,
): Promise;
```
## Change log
### 1.0
- BREAKING CHANGE: `removeMagicComments` is now async due to Prettier's API change
- feat: support transform defineProps's and defineEmits's types to parameters ([PR by Dunqing](https://github.com/cyco130/detype/pull/11))
### 0.6
- feature: Option to remove @ts-ignore and @ts-expect-error comments
- fix: Preserve newline runs (especially in template literals!)
### 0.5
- BREAKING CHANGE: Drop support for Node 12
- chore: Set up CI workflows
### 0.4
- feature: CLI support for removing magic comments
- chore: Improve documentation
### 0.3
- feature: Magic comments
- feature: Expose type declarations
- fix: Better empty line handling
### 0.2
- feature: for Vue single file components
### 0.1
- Initial release
## Credits
Fatih Aygün, under MIT License