Skip to content

DTS 번역 #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 22, 2020
Merged

DTS 번역 #151

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9146215
DTS 번역 일부 완료 in #121
Aug 18, 2020
d9266ba
리뷰 내용에 맞추어서 수정 및 추가 번역 in #121
Aug 19, 2020
9c799ab
리뷰에 맞추어서 번역 수정 in #121
Aug 19, 2020
81c62d3
띄어쓰기 관련 번역 수정 in #121
Aug 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions pages/declaration-files/creating-dts-files-from-js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,83 +5,83 @@ permalink: /docs/handbook/declaration-files/dts-from-js.html
oneline: "How to add d.ts generation to JavaScript projects"
---

[With TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs),
TypeScript added support for generating .d.ts files from JavaScript using JSDoc syntax.
[TypeScript 3.7에서](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs),
TypeScript는 JSDoc 구문을 사용한 JavaScript에서 .d.ts 파일을 생성할 수 있게 되었습니다.

This set up means you can own the editor experience of TypeScript-powered editors without porting your project to TypeScript, or having to maintain .d.ts files in your codebase.
TypeScript supports most JSDoc tags, you can find [the reference here](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc).
즉 프로젝트를 TypeScript에 이식하거나(porting) 코드베이스에 .d.ts 파일을 유지하지 않고도 TypeScript 기반 편집기의 환경을 유지할 수 있습니다.
TypeScript는 대부분의 JSDoc 태그를 지원하며, [참조](https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html#supported-jsdoc)에서 찾을 수 있습니다.

## Setting up your Project to emit .d.ts files
## .d.ts 파일 생성을 위한 프로젝트 설정 (Setting up your Project to emit .d.ts files)

To add creation of .d.ts files in your project, you will need to do up-to four steps:
.d.ts 파일을 프로젝트에서 생성하려면, 다음과 같은 4단계를 거쳐야합니다:

* Add TypeScript to your dev dependencies
* Add a `tsconfig.json` to configure TypeScript
* Run the TypeScript compiler to generate the corresponding d.ts files for JS files
* (optional) Edit your package.json to reference the types
* 개발 의존성에 TypeScript 추가
* TypeScript 설정을 위해 `tsconfig.json` 추가
* JS 파일에 해당하는 d.ts 파일을 생성하기 위해 TypeScript 컴파일 실행
* (선택적으로) 타입을 참조하기 위한 package.json 수정

### Adding TypeScript
### TypeScript 추가 (Adding TypeScript)

You can learn how to do this in our [installation page](/download).
[설치 페이지](https://www.typescriptlang.org/download)에서 방법을 확인할 수 있습니다.

### TSConfig

The TSConfig is a json5 file which configures both your compiler flags, and declare where to find files.
In this case, you will want a file like the following:
TSConfig는 컴파일러 플래그를 구성하고 파일을 찾을 위치를 선언하는 json5 파일입니다.
위와 같은 경우, 다음과 같은 파일이 필요합니다:

```json5
{
// Change this to match your project
// 프로젝트에 알맞게 수정하세요.
include: ["src/**/*"],

compilerOptions: {
// Tells TypeScript to read JS files, as
// normally they are ignored as source files
// 일반적으로 소스 파일로 무시되기 때문에,
// TypeScript가 JS 파일을 읽도록 지시합니다.
allowJs: true,
// Generate d.ts files
// d.ts 파일을 생성시킵니다.
declaration: true,
// This compiler run should
// only output d.ts files
// 컴파일러 실행이 오직
// d.ts 파일만 출력하게 합니다.
emitDeclarationOnly: true,
// Types should go into this directory.
// Removing this would place the .d.ts files
// next to the .js files
// 타입은 이 디렉터리 안에 존재해야 합니다.
// 해당 설정을 제거하면,
// .d.ts 파일이 .js 파일 옆에 생성됩니다.
outDir: "dist",
},
}
```

You can learn more about the options in the [tsconfig reference](/reference).
An alternative to using a TSConfig file is the CLI, this is the same behavior as a CLI command.
[tsconfig 참조](/reference)에서 더 많은 옵션을 찾을 수 있습니다.
TSConfig 파일을 사용하는 대신 CLI를 사용할 수 있습니다.

```sh
npx typescript src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types
```

## Run the compiler
## 컴파일러 실행 (Run the compiler)

You can learn how to do this in our [installation page](/download).
You want to make sure these files are included in your package if you have the files in your project's `.gitignore`.
[설치 페이지](https://www.typescriptlang.org/download)에서 방법을 확인할 수 있습니다.
프로젝트의 `.gitignore`에 파일이 있을 때, 이러한 파일들이 패키지에 포함되어 있는지 확인합니다.

## Editing the package.json
## package.json 수정 (Editing the package.json)

TypeScript replicates the node resolution for modules in a `package.json`, with an additional step for finding .d.ts files.
Roughly, the resolution will first check the optional `"types"` field, then the `"main"` field, and finally will try `index.d.ts` in the root.
TypeScript는 .d.ts 파일을 찾기 위한 추가 단계와 함께 `package.json`의 모듈에 대한 노드 관계(node resolution)를 복제합니다.
대략적으로 먼저 선택적인 `"types"` 필드를 확인 후, 다음은 `"main"`, 마지막으로 루트에서 `index.d.ts`를 확인합니다.

| Package.json | Location of default .d.ts |
| Package.json | 기본 .d.ts의 위치 |
| :------------------------ | :----------------------------- |
| No "types" field | checks "main", then index.d.ts |
| "types" 필드 없음 | "main" 확인 후, index.d.ts 확인 |
| "types": "main.d.ts" | main.d.ts |
| "types": "./dist/main.js" | ./main/main.d.ts |

If absent, then "main" is used
type 필드가 없다면, "main"으로 넘어갑니다.

| Package.json | Location of default .d.ts |
| Package.json | 기본 .d.ts의 위치 |
| :----------------------- | :------------------------ |
| No "main" field | index.d.ts |
| "main" 필드 없음 | index.d.ts |
| "main":"index.js" | index.d.ts |
| "main":"./dist/index.js" | ./dist/index.d.ts |

## Tips
## 팁 (Tips)

If you'd like to write tests for your .d.ts files, try [tsd](https://github.com/SamVerschueren/tsd).
.d.ts의 테스트를 작성하고 싶다면, [tsd](https://github.com/SamVerschueren/tsd)를 사용해보세요.