From e5b24ad0580a3a369a16d7350b176a64f3c9d9cf Mon Sep 17 00:00:00 2001 From: Seohyun Yoon Date: Wed, 12 Aug 2020 22:55:29 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=EC=98=81=EC=96=B4=201=EC=B0=A8=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tutorials/babel-with-typescript.md | 38 ++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index afb3dd6f..47a67347 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -6,32 +6,58 @@ oneline: How to create a hybrid Babel + TypeScript project --- # Babel vs `tsc` for TypeScript +# Babel vs TypeScript의 `tsc` When making a modern JavaScript project, you might ask yourself what the right way to convert files from TypeScript to JavaScript. +모던 JavaScript 프로젝트를 만들 때, 여러분은 TypeScript에서 JavaScript로 파일을 변환하는 올바른 방법이 무엇인지 고민하게 될 것입니다. + 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. +대부분의 경우, 이 질문의 대답은 프로젝트마다 `"~에 달려있다"` 혹은 `"~누군가 여러분 대신해서 결정했을지도 모른다` 일 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같이 이미 존재하는 프레임워크 혹은 [Getting Started](/docs/home)에 언급된 그 어떤 프레임워크를 사용하여 프로젝트를 만들고 있다면, 해결책은 여러분의 손에 달려있습니다. + However, a useful heuristic could be: +하지만, 유용한 heuristic은 다음과 같습니다: + * Is your build output mostly the same as your source input files? Use `tsc` * Do you need a build pipeline with multiple potential outputs? Use `babel` for transpiling and `tsc` for type checking +* 빌드 출력 결과가 소스 입력 파일과 거의 비슷한가요? `tsc`를 사용하세요. +* 잠재 산출 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링을 하고, `tsc`로 타입체크를 하세요. + ## Babel for transpiling, `tsc` for types +## 트랜스파일링은 Babel, 타입은 `tsc` + This is a common pattern for projects with existing build infrastructure which may have been ported from a JavaScript codebase to TypeScript. +JavaScript 코드베이스를 TypeScript로 포팅 되었을 수 있는 기존 빌드 인프라 구조를 가진 프로젝트의 일반적인 패턴입니다. + 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. +Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성하고, 타입을 체크하고, `.d.ts` 파일 생성을 위해 TypeScript를 사용하는 방법인데 이는 하이브리드식 접근법입니다. + 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. +Babel의 TypeScript 지원을 사용하여 기존 빌드 파이프라인으로 작업할 수 있으며, Babel은 코드의 타입을 체크하지 않기 때문에, JS 실행 시간이 더 빨라질 것입니다. + #### Type Checking and d.ts file generation +#### 타입 체킹과 d.ts 파일 생성 + 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. +Babel 사용의 단점은, TS를 JS로 전환하는 동안, 타입 체크를 할 수 없다는 점입니다. 즉, 텍스트 편집기에서 타입 오류를 잡지 못하고 배포 코드에 몰래 들어갈 수 있다는 뜻입니다. + 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. +게다가, Babel은 TypeScript에 대한 `.d.ts` 파일을 만들 수 없기 때문에, 여러분의 프로젝트가 라이브러리라면, 작업이 더 힘들어질 수 있습니다. + 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: +이와 같은 문제를 수정하기위해선, TSC를 사용하여 프로젝트의 타입을 체크할 수 있는 명령어를 설정하고 싶으실 것입니다. 이는 Babel 설정의 일부를 해당 [`tsconfig.json`](/tconfig)에 복사하고, 다음 플래그를 사용하도록 설정해줍니다: + ```json "compilerOptions": { // Ensure that .d.ts files are created by tsc, but not .js files @@ -42,7 +68,19 @@ To fix these issues, you would probably want to set up a command to type check y } ``` +```json +"compilerOptions": { + // tsc를 통해 .js 파일이 아닌 .d.ts 파일이 생성되도록 합니다. + "declaration": true, + "emitDeclarationOnly": true, + // Babel이 TypeScript 프로젝트의 파일을 안전하게 트랜스파일링할 수 있도록 합니다. + "isolatedModules": true +} +``` + For more information on these flags: +다음 플래그들에 대한 더 많은 정보는 다음을 참고해주세요.: + * [`isolatedModules`](/tsconfig#isolatedModules) * [`declaration`](/tsconfig#declaration), [`emitDeclarationOnly`](/tsconfig#emitDeclarationOnly) \ No newline at end of file From d20c69bad2bee1b638a73399426a977e7456ead5 Mon Sep 17 00:00:00 2001 From: Seohyun Yoon Date: Wed, 12 Aug 2020 23:57:10 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=EC=9B=90=EB=AC=B8=20=EC=82=AD=EC=A0=9C,=20?= =?UTF-8?q?=EB=8D=94=20=EB=A7=A4=EB=81=84=EB=9F=AC=EC=9A=B4=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD=EC=B2=B4=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tutorials/babel-with-typescript.md | 68 ++++++------------------ 1 file changed, 15 insertions(+), 53 deletions(-) diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index 47a67347..cea16362 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -5,82 +5,44 @@ permalink: /docs/handbook/babel-with-typescript.html oneline: How to create a hybrid Babel + TypeScript project --- -# Babel vs `tsc` for TypeScript # Babel vs TypeScript의 `tsc` -When making a modern JavaScript project, you might ask yourself what the right way to convert files from TypeScript to JavaScript. +모던 JavaScript 프로젝트를 만들 때, 여러분은 TypeScript에서 JavaScript로 파일을 변환하는 올바른 방법이 무엇일까 고민하게 될 것입니다. -모던 JavaScript 프로젝트를 만들 때, 여러분은 TypeScript에서 JavaScript로 파일을 변환하는 올바른 방법이 무엇인지 고민하게 될 것입니다. +많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신해서 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)처럼 이미 존재하는 프레임워크 혹은 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면, 해결책은 여러분의 손에 달려있습니다. -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. +하지만, 사용할만한 휴로스틱은 다음과 같습니다: -대부분의 경우, 이 질문의 대답은 프로젝트마다 `"~에 달려있다"` 혹은 `"~누군가 여러분 대신해서 결정했을지도 모른다` 일 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같이 이미 존재하는 프레임워크 혹은 [Getting Started](/docs/home)에 언급된 그 어떤 프레임워크를 사용하여 프로젝트를 만들고 있다면, 해결책은 여러분의 손에 달려있습니다. - -However, a useful heuristic could be: - -하지만, 유용한 heuristic은 다음과 같습니다: - -* Is your build output mostly the same as your source input files? Use `tsc` -* Do you need a build pipeline with multiple potential outputs? Use `babel` for transpiling and `tsc` for type checking - -* 빌드 출력 결과가 소스 입력 파일과 거의 비슷한가요? `tsc`를 사용하세요. -* 잠재 산출 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링을 하고, `tsc`로 타입체크를 하세요. - -## Babel for transpiling, `tsc` for types +* 빌드 출력 결과와 소스 입력 파일이 거의 비슷한가요? `tsc`를 사용하세요. +* 잠재 산출 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링 (transpling)을 하고, `tsc`로 타입을 검사하세요. ## 트랜스파일링은 Babel, 타입은 `tsc` -This is a common pattern for projects with existing build infrastructure which may have been ported from a JavaScript codebase to TypeScript. - -JavaScript 코드베이스를 TypeScript로 포팅 되었을 수 있는 기존 빌드 인프라 구조를 가진 프로젝트의 일반적인 패턴입니다. - -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. - -Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성하고, 타입을 체크하고, `.d.ts` 파일 생성을 위해 TypeScript를 사용하는 방법인데 이는 하이브리드식 접근법입니다. - -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. - -Babel의 TypeScript 지원을 사용하여 기존 빌드 파이프라인으로 작업할 수 있으며, Babel은 코드의 타입을 체크하지 않기 때문에, JS 실행 시간이 더 빨라질 것입니다. - -#### Type Checking and d.ts file generation +JavaScript 코드 베이스에서 TypeScript로 포팅되었을 수 있는 기존 빌드 인프라 구조를 가진 프로젝트의 일반적인 패턴입니다. -#### 타입 체킹과 d.ts 파일 생성 +이 기술은, Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성한 후, TypeScript를 사용하여 타입 검사 및 `.d.ts` 파일을 생성하는 복합 식 접근 방식입니다. -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. +Babel의 TypeScript 지원을 사용하여 기존 빌드 파이프라인으로 작업할 수 있으며 Babel은 코드의 타입을 검사하지 않기 때문에 JS 출력 시간이 더 빨라질 것입니다. -Babel 사용의 단점은, TS를 JS로 전환하는 동안, 타입 체크를 할 수 없다는 점입니다. 즉, 텍스트 편집기에서 타입 오류를 잡지 못하고 배포 코드에 몰래 들어갈 수 있다는 뜻입니다. +#### 타입 검사와 d.ts 파일 생성 -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. +Babel 사용의 단점은 TS를 JS로 전환하는 동안 타입 검사를 할 수 없다는 점입니다. 즉, 에디터에서 타입 오류를 잡지 못하고 상용 코드에 포함될 수도 있단 뜻입니다. -게다가, Babel은 TypeScript에 대한 `.d.ts` 파일을 만들 수 없기 때문에, 여러분의 프로젝트가 라이브러리라면, 작업이 더 힘들어질 수 있습니다. +게다가, Babel은 TypeScript에 대한 `.d.ts` 파일을 만들 수 없기 때문에 여러분의 프로젝트가 라이브러리라면 작업이 더 힘들어질 수 있습니다. -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: - -이와 같은 문제를 수정하기위해선, TSC를 사용하여 프로젝트의 타입을 체크할 수 있는 명령어를 설정하고 싶으실 것입니다. 이는 Babel 설정의 일부를 해당 [`tsconfig.json`](/tconfig)에 복사하고, 다음 플래그를 사용하도록 설정해줍니다: - -```json -"compilerOptions": { - // Ensure that .d.ts files are created by tsc, but not .js files - "declaration": true, - "emitDeclarationOnly": true, - // Ensure that Babel can safely transpile files in the TypeScript project - "isolatedModules": true -} -``` +이와 같은 문제를 수정하기 위해 TSC를 사용하여 프로젝트의 타입을 검사할 수 있는 명령어를 설정하고 싶을 것입니다. 이는 Babel 구성의 일부를 해당 [`tsconfig.json`](/tconfig)에 복사하고, 다음 플래그를 사용하도록 설정해줍니다: ```json "compilerOptions": { - // tsc를 통해 .js 파일이 아닌 .d.ts 파일이 생성되도록 합니다. + // tsc를 사용해 .js 파일이 아닌 .d.ts 파일이 생성되었는지 확인합니다. "declaration": true, "emitDeclarationOnly": true, - // Babel이 TypeScript 프로젝트의 파일을 안전하게 트랜스파일링할 수 있도록 합니다. + // Babel이 TypeScript 프로젝트의 파일을 안전하게 트랜스파일할 수 있는지 확인합니다. "isolatedModules": true } ``` -For more information on these flags: - -다음 플래그들에 대한 더 많은 정보는 다음을 참고해주세요.: +해당 플래그에 대한 더 많은 정보는 다음을 참고해주세요: * [`isolatedModules`](/tsconfig#isolatedModules) * [`declaration`](/tsconfig#declaration), [`emitDeclarationOnly`](/tsconfig#emitDeclarationOnly) \ No newline at end of file From afaabebc62338cd3cae9d117f2a21e5f9e5c7015 Mon Sep 17 00:00:00 2001 From: Seohyun Yoon Date: Thu, 13 Aug 2020 00:11:33 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=EB=A7=A4=EB=81=84=EB=9F=AC=EC=9A=B4=20=20?= =?UTF-8?q?=EB=B2=88=EC=97=AD=EC=B2=B4=EB=A1=9C=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tutorials/babel-with-typescript.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index cea16362..59caeb03 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -7,9 +7,9 @@ oneline: How to create a hybrid Babel + TypeScript project # Babel vs TypeScript의 `tsc` -모던 JavaScript 프로젝트를 만들 때, 여러분은 TypeScript에서 JavaScript로 파일을 변환하는 올바른 방법이 무엇일까 고민하게 될 것입니다. +모던 JavaScript 프로젝트를 만들 때, TypeScript에서 JavaScript로 파일을 변환하는 올바른 방법이 무엇일까 고민하게 될 것입니다. -많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신해서 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)처럼 이미 존재하는 프레임워크 혹은 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면, 해결책은 여러분의 손에 달려있습니다. +많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같은 기존 프레임워크 또는 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면 결정은 여러분의 손에 달려있습니다. 하지만, 사용할만한 휴로스틱은 다음과 같습니다: @@ -22,15 +22,15 @@ JavaScript 코드 베이스에서 TypeScript로 포팅되었을 수 있는 기 이 기술은, Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성한 후, TypeScript를 사용하여 타입 검사 및 `.d.ts` 파일을 생성하는 복합 식 접근 방식입니다. -Babel의 TypeScript 지원을 사용하여 기존 빌드 파이프라인으로 작업할 수 있으며 Babel은 코드의 타입을 검사하지 않기 때문에 JS 출력 시간이 더 빨라질 것입니다. +Babel의 TypeScript 지원을 사용하면 기존 빌드 파이프라인으로 작업할 수 있고 Babel이 코드 타입을 검사하지 않기 때문에 JS 출력 시간이 더 빨라질 가능성이 높습니다. #### 타입 검사와 d.ts 파일 생성 Babel 사용의 단점은 TS를 JS로 전환하는 동안 타입 검사를 할 수 없다는 점입니다. 즉, 에디터에서 타입 오류를 잡지 못하고 상용 코드에 포함될 수도 있단 뜻입니다. -게다가, Babel은 TypeScript에 대한 `.d.ts` 파일을 만들 수 없기 때문에 여러분의 프로젝트가 라이브러리라면 작업이 더 힘들어질 수 있습니다. +또한, Babel은 TypeScript에 대한 `.d.ts` 파일을 만들 수 없기 때문에 여러분의 프로젝트가 라이브러리인 경우 작업하기가 더 어려워질 수 있습니다. -이와 같은 문제를 수정하기 위해 TSC를 사용하여 프로젝트의 타입을 검사할 수 있는 명령어를 설정하고 싶을 것입니다. 이는 Babel 구성의 일부를 해당 [`tsconfig.json`](/tconfig)에 복사하고, 다음 플래그를 사용하도록 설정해줍니다: +이러한 문제를 해결하려면 TSC를 사용하여 프로젝트의 타입을 검사할 수 있는 명령어를 설정하는 것이 좋습니다. 이는 Babel 구성의 일부를 해당 [`tsconfig.json`](/tconfig)에 복제하고, 다음 플래그가 활성화되었는지 확인하는 것을 의미합니다: ```json "compilerOptions": { @@ -42,7 +42,7 @@ Babel 사용의 단점은 TS를 JS로 전환하는 동안 타입 검사를 할 } ``` -해당 플래그에 대한 더 많은 정보는 다음을 참고해주세요: +해당 플래그에 대한 자세한 내용은 다음을 참고해주세요: * [`isolatedModules`](/tsconfig#isolatedModules) * [`declaration`](/tsconfig#declaration), [`emitDeclarationOnly`](/tsconfig#emitDeclarationOnly) \ No newline at end of file From 529a21dcd8aea60536fb1e86ebc8a0dfdb4f49b4 Mon Sep 17 00:00:00 2001 From: Seohyun Yoon Date: Thu, 13 Aug 2020 00:38:58 +0900 Subject: [PATCH 4/6] =?UTF-8?q?1=EC=B0=A8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tutorials/babel-with-typescript.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index 59caeb03..f1fcd982 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -7,24 +7,24 @@ oneline: How to create a hybrid Babel + TypeScript project # Babel vs TypeScript의 `tsc` -모던 JavaScript 프로젝트를 만들 때, TypeScript에서 JavaScript로 파일을 변환하는 올바른 방법이 무엇일까 고민하게 될 것입니다. +모던 JavaScript 프로젝트를 만들 때, TypeScript에서 JavaScript 파일로 변환하는 올바른 방법에 대해 고민할 수 있습니다. -많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같은 기존 프레임워크 또는 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면 결정은 여러분의 손에 달려있습니다. +많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같은 기존 프레임워크 또는 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면 결정은 여러분 손에 달려있습니다. 하지만, 사용할만한 휴로스틱은 다음과 같습니다: * 빌드 출력 결과와 소스 입력 파일이 거의 비슷한가요? `tsc`를 사용하세요. * 잠재 산출 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링 (transpling)을 하고, `tsc`로 타입을 검사하세요. -## 트랜스파일링은 Babel, 타입은 `tsc` +## 트랜스파일링은 Babel, 타입은 `tsc` (Babel for transpiling, `tsc` for types) JavaScript 코드 베이스에서 TypeScript로 포팅되었을 수 있는 기존 빌드 인프라 구조를 가진 프로젝트의 일반적인 패턴입니다. -이 기술은, Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성한 후, TypeScript를 사용하여 타입 검사 및 `.d.ts` 파일을 생성하는 복합 식 접근 방식입니다. +이 기술은, Babel의 [preset-typescript](https://babeljs.io/docs/en/babel-preset-typescript)을 사용하여 JS 파일을 생성한 후, TypeScript를 사용하여 타입 검사 및 `.d.ts` 파일을 생성하는 복합 접근 방식입니다. -Babel의 TypeScript 지원을 사용하면 기존 빌드 파이프라인으로 작업할 수 있고 Babel이 코드 타입을 검사하지 않기 때문에 JS 출력 시간이 더 빨라질 가능성이 높습니다. +Babel은 TypeScript를 지원하기 때문에, 기존 빌드 파이프라인으로 작업할 수 있고 Babel이 코드 타입을 검사하지 않기 때문에 JS 출력 시간이 더 빨라질 수 있습니다. -#### 타입 검사와 d.ts 파일 생성 +#### 타입 검사와 d.ts 파일 생성 (Type Checking and d.ts file generation) Babel 사용의 단점은 TS를 JS로 전환하는 동안 타입 검사를 할 수 없다는 점입니다. 즉, 에디터에서 타입 오류를 잡지 못하고 상용 코드에 포함될 수도 있단 뜻입니다. From 533de63710284314ee1d45aa59dc2cc97d724a64 Mon Sep 17 00:00:00 2001 From: Seohyun Yoon Date: Thu, 13 Aug 2020 20:06:11 +0900 Subject: [PATCH 5/6] =?UTF-8?q?2=EC=B0=A8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tutorials/babel-with-typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index f1fcd982..c0d72e72 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -14,7 +14,7 @@ oneline: How to create a hybrid Babel + TypeScript project 하지만, 사용할만한 휴로스틱은 다음과 같습니다: * 빌드 출력 결과와 소스 입력 파일이 거의 비슷한가요? `tsc`를 사용하세요. -* 잠재 산출 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링 (transpling)을 하고, `tsc`로 타입을 검사하세요. +* 여러 잠재적인 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링을 하고, `tsc`로 타입을 검사하세요. ## 트랜스파일링은 Babel, 타입은 `tsc` (Babel for transpiling, `tsc` for types) From f6512a4a53d9b1fbe79d9c7216dbd4e4ec0e97a3 Mon Sep 17 00:00:00 2001 From: Seohyun Yoon Date: Thu, 13 Aug 2020 20:06:48 +0900 Subject: [PATCH 6/6] =?UTF-8?q?3=EC=B0=A8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/tutorials/babel-with-typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index c0d72e72..4cfd6fd9 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -11,7 +11,7 @@ oneline: How to create a hybrid Babel + TypeScript project 많은 경우 그 대답은 프로젝트에 따라 _"~에 달려있다"_ 또는 _"누군가 여러분 대신 결정했을지도 모른다`_ 가 될 것입니다. 만약 [tsdx](https://www.npmjs.com/package/tsdx), [Angular](https://angular.io/), [NestJS](https://nestjs.com/)와 같은 기존 프레임워크 또는 [Getting Started](/docs/home)에 언급된 프레임워크를 사용하여 프로젝트를 만들고 있다면 결정은 여러분 손에 달려있습니다. -하지만, 사용할만한 휴로스틱은 다음과 같습니다: +하지만, 사용할만한 직관적인 방법은 다음과 같습니다: * 빌드 출력 결과와 소스 입력 파일이 거의 비슷한가요? `tsc`를 사용하세요. * 여러 잠재적인 결과물을 내는 빌드 파이프라인이 필요하신가요? `babel`로 트랜스파일링을 하고, `tsc`로 타입을 검사하세요.