Skip to content

Commit 47d1a86

Browse files
authored
Babel with typescript issue118 (#138)
* ์˜์–ด 1์ฐจ ๋ฒˆ์—ญ * ์›๋ฌธ ์‚ญ์ œ, ๋” ๋งค๋„๋Ÿฌ์šด ๋ฒˆ์—ญ์ฒด๋กœ ์ˆ˜์ • * ๋งค๋„๋Ÿฌ์šด ๋ฒˆ์—ญ์ฒด๋กœ ์ถ”๊ฐ€ ์ˆ˜์ • * 1์ฐจ ์ˆ˜์ • * 2์ฐจ ์ˆ˜์ • * 3์ฐจ ์ˆ˜์ •
1 parent 71a5e51 commit 47d1a86

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

Diff for: โ€Žpages/tutorials/babel-with-typescript.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,44 @@ permalink: /docs/handbook/babel-with-typescript.html
55
oneline: How to create a hybrid Babel + TypeScript project
66
---
77

8-
# Babel vs `tsc` for TypeScript
8+
# Babel vs TypeScript์˜ `tsc`
99

10-
When making a modern JavaScript project, you might ask yourself what the right way to convert files from TypeScript to JavaScript.
10+
๋ชจ๋˜ JavaScript ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ, TypeScript์—์„œ JavaScript ํŒŒ์ผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
1111

12-
A lot of the time the answer is _"it depends"_, or _"someone may have decided for you"_ depending on the project. If you are building your project with an existing framework like [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/) or any framework mentioned in the [Getting Started](/docs/home) then this decision is handled for you.
12+
๋งŽ์€ ๊ฒฝ์šฐ ๊ทธ ๋Œ€๋‹ต์€ ํ”„๋กœ์ ํŠธ์— ๋”ฐ๋ผ _"~์— ๋‹ฌ๋ ค์žˆ๋‹ค"_ ๋˜๋Š” _"๋ˆ„๊ตฐ๊ฐ€ ์—ฌ๋Ÿฌ๋ถ„ ๋Œ€์‹  ๊ฒฐ์ •ํ–ˆ์„์ง€๋„ ๋ชจ๋ฅธ๋‹ค`_ ๊ฐ€ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)์™€ ๊ฐ™์€ ๊ธฐ์กด ํ”„๋ ˆ์ž„์›Œํฌ ๋˜๋Š” [Getting Started](/docs/home)์— ์–ธ๊ธ‰๋œ ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ๋‹ค๋ฉด ๊ฒฐ์ •์€ ์—ฌ๋Ÿฌ๋ถ„ ์†์— ๋‹ฌ๋ ค์žˆ์Šต๋‹ˆ๋‹ค.
1313

14-
However, a useful heuristic could be:
14+
ํ•˜์ง€๋งŒ, ์‚ฌ์šฉํ• ๋งŒํ•œ ์ง๊ด€์ ์ธ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค:
1515

16-
* Is your build output mostly the same as your source input files? Use `tsc`
17-
* Do you need a build pipeline with multiple potential outputs? Use `babel` for transpiling and `tsc` for type checking
16+
* ๋นŒ๋“œ ์ถœ๋ ฅ ๊ฒฐ๊ณผ์™€ ์†Œ์Šค ์ž…๋ ฅ ํŒŒ์ผ์ด ๊ฑฐ์˜ ๋น„์Šทํ•œ๊ฐ€์š”? `tsc`๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.
17+
* ์—ฌ๋Ÿฌ ์ž ์žฌ์ ์ธ ๊ฒฐ๊ณผ๋ฌผ์„ ๋‚ด๋Š” ๋นŒ๋“œ ํŒŒ์ดํ”„๋ผ์ธ์ด ํ•„์š”ํ•˜์‹ ๊ฐ€์š”? `babel`๋กœ ํŠธ๋žœ์ŠคํŒŒ์ผ๋ง์„ ํ•˜๊ณ , `tsc`๋กœ ํƒ€์ž…์„ ๊ฒ€์‚ฌํ•˜์„ธ์š”.
1818

19-
## Babel for transpiling, `tsc` for types
19+
## ํŠธ๋žœ์ŠคํŒŒ์ผ๋ง์€ Babel, ํƒ€์ž…์€ `tsc` (Babel for transpiling, `tsc` for types)
2020

21-
This is a common pattern for projects with existing build infrastructure which may have been ported from a JavaScript codebase to TypeScript.
21+
JavaScript ์ฝ”๋“œ ๋ฒ ์ด์Šค์—์„œ TypeScript๋กœ ํฌํŒ…๋˜์—ˆ์„ ์ˆ˜ ์žˆ๋Š” ๊ธฐ์กด ๋นŒ๋“œ ์ธํ”„๋ผ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง„ ํ”„๋กœ์ ํŠธ์˜ ์ผ๋ฐ˜์ ์ธ ํŒจํ„ด์ž…๋‹ˆ๋‹ค.
2222

23-
This technique is a hybrid approach, using Babel's [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript) to generate your JS files, and then using TypeScript to do type checking and `.d.ts` file generation.
23+
์ด ๊ธฐ์ˆ ์€, Babel์˜ [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)์„ ์‚ฌ์šฉํ•˜์—ฌ JS ํŒŒ์ผ์„ ์ƒ์„ฑํ•œ ํ›„, TypeScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํƒ€์ž… ๊ฒ€์‚ฌ ๋ฐ `.d.ts` ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๋Š” ๋ณตํ•ฉ ์ ‘๊ทผ ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.
2424

25-
By using babel's support for TypeScript, you get the ability to work with existing build pipelines and are more likely to have a faster JS emit time because Babel does not type check your code.
25+
Babel์€ TypeScript๋ฅผ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์—, ๊ธฐ์กด ๋นŒ๋“œ ํŒŒ์ดํ”„๋ผ์ธ์œผ๋กœ ์ž‘์—…ํ•  ์ˆ˜ ์žˆ๊ณ  Babel์ด ์ฝ”๋“œ ํƒ€์ž…์„ ๊ฒ€์‚ฌํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— JS ์ถœ๋ ฅ ์‹œ๊ฐ„์ด ๋” ๋นจ๋ผ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
2626

27-
#### Type Checking and d.ts file generation
27+
#### ํƒ€์ž… ๊ฒ€์‚ฌ์™€ d.ts ํŒŒ์ผ ์ƒ์„ฑ (Type Checking and d.ts file generation)
2828

29-
The downside to using babel is that you don't get type checking during the transition from TS to JS. This can mean that type errors which you miss in your editor could sneak through into production code.
29+
Babel ์‚ฌ์šฉ์˜ ๋‹จ์ ์€ TS๋ฅผ JS๋กœ ์ „ํ™˜ํ•˜๋Š” ๋™์•ˆ ํƒ€์ž… ๊ฒ€์‚ฌ๋ฅผ ํ•  ์ˆ˜ ์—†๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ์ฆ‰, ์—๋””ํ„ฐ์—์„œ ํƒ€์ž… ์˜ค๋ฅ˜๋ฅผ ์žก์ง€ ๋ชปํ•˜๊ณ  ์ƒ์šฉ ์ฝ”๋“œ์— ํฌํ•จ๋  ์ˆ˜๋„ ์žˆ๋‹จ ๋œป์ž…๋‹ˆ๋‹ค.
3030

31-
In addition to that, Babel cannot create `.d.ts` files for your TypeScript which can make it harder to work with your project if it is a library.
31+
๋˜ํ•œ, Babel์€ TypeScript์— ๋Œ€ํ•œ `.d.ts` ํŒŒ์ผ์„ ๋งŒ๋“ค ์ˆ˜ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์—ฌ๋Ÿฌ๋ถ„์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ ๊ฒฝ์šฐ ์ž‘์—…ํ•˜๊ธฐ๊ฐ€ ๋” ์–ด๋ ค์›Œ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
3232

33-
To fix these issues, you would probably want to set up a command to type check your project using TSC. This likely means duplicating some of your babel config into a corresponding [`tsconfig.json`](/tconfig) and ensuring these flags are enabled:
33+
์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด TSC๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ์˜ ํƒ€์ž…์„ ๊ฒ€์‚ฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ช…๋ น์–ด๋ฅผ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ์ด๋Š” Babel ๊ตฌ์„ฑ์˜ ์ผ๋ถ€๋ฅผ ํ•ด๋‹น [`tsconfig.json`](/tconfig)์— ๋ณต์ œํ•˜๊ณ , ๋‹ค์Œ ํ”Œ๋ž˜๊ทธ๊ฐ€ ํ™œ์„ฑํ™”๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค:
3434

3535
```json
3636
"compilerOptions": {
37-
// Ensure that .d.ts files are created by tsc, but not .js files
37+
// tsc๋ฅผ ์‚ฌ์šฉํ•ด .js ํŒŒ์ผ์ด ์•„๋‹Œ .d.ts ํŒŒ์ผ์ด ์ƒ์„ฑ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
3838
"declaration": true,
3939
"emitDeclarationOnly": true,
40-
// Ensure that Babel can safely transpile files in the TypeScript project
40+
// Babel์ด TypeScript ํ”„๋กœ์ ํŠธ์˜ ํŒŒ์ผ์„ ์•ˆ์ „ํ•˜๊ฒŒ ํŠธ๋žœ์ŠคํŒŒ์ผํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
4141
"isolatedModules": true
4242
}
4343
```
4444

45-
For more information on these flags:
45+
ํ•ด๋‹น ํ”Œ๋ž˜๊ทธ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๋‹ค์Œ์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”:
4646

4747
* [`isolatedModules`](/tsconfig#isolatedModules)
4848
* [`declaration`](/tsconfig#declaration), [`emitDeclarationOnly`](/tsconfig#emitDeclarationOnly)

0 commit comments

Comments
ย (0)