diff --git a/.all-contributorsrc b/.all-contributorsrc index 4123ed92..d6611dbf 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -261,6 +261,15 @@ "contributions": [ "translation" ] + }, + { + "login": "seohyun0120", + "name": "SeohyunYoon", + "avatar_url": "https://avatars3.githubusercontent.com/u/35247295?v=4", + "profile": "https://github.com/seohyun0120", + "contributions": [ + "translation" + ] } ], "contributorsPerLine": 8, diff --git a/README.md b/README.md index 27ad8447..4de809af 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # TypeScript-Handbook ν•œκΈ€ λ¬Έμ„œ [![Build Status](https://api.travis-ci.com/typescript-kr/typescript-kr.github.io.svg?branch=master)](https://travis-ci.com/github/typescript-kr/typescript-kr.github.io) -[![All Contributors](https://img.shields.io/badge/all_contributors-28-orange.svg?style=flat-square)](#contributors-) +[![All Contributors](https://img.shields.io/badge/all_contributors-29-orange.svg?style=flat-square)](#contributors-) [![Release Date](https://img.shields.io/github/release-date/typescript-kr/typescript-kr.github.io)](https://github.com/typescript-kr/typescript-kr.github.io/releases) [![Stars](https://img.shields.io/github/stars/typescript-kr/typescript-kr.github.io)](https://github.com/typescript-kr/typescript-kr.github.io/stargazers) @@ -63,6 +63,7 @@
Hyuntae EOM
🌍
Yunhoe, Ku
🌍
realgo
🌍 +
SeohyunYoon
🌍 diff --git a/pages/literal-types.md b/pages/literal-types.md index e99af150..a5ed89ee 100644 --- a/pages/literal-types.md +++ b/pages/literal-types.md @@ -5,35 +5,35 @@ permalink: /docs/handbook/literal-types.html oneline: Using literal types with TypeScript --- -A literal is a more concrete sub-type of a collective type. -What this means is that `"Hello World"` is a `string`, but a `string` is not `"Hello World"` inside the type system. +λ¦¬ν„°λŸ΄ νƒ€μž…μ€ 집합 νƒ€μž…μ˜ 보닀 ꡬ체적인 ν•˜μœ„ νƒ€μž…μž…λ‹ˆλ‹€. +이것이 μ˜λ―Έν•˜λŠ” λ°”λŠ” νƒ€μž… μ‹œμŠ€ν…œ μ•ˆμ—μ„œ `"Hello World"`λŠ” `string`μ΄μ§€λ§Œ, `string`은 `"Hello World"`κ°€ μ•„λ‹ˆλž€ κ²ƒμž…λ‹ˆλ‹€. -There are two sets of literal types available in TypeScript today, strings and numbers, by using literal types you can allow an exact value which a string or number must have. +μ˜€λŠ˜λ‚  TypeScriptμ—λŠ” λ¬Έμžμ—΄κ³Ό 숫자, 두 가지 λ¦¬ν„°λŸ΄ νƒ€μž…μ΄ μžˆλŠ”λ° 이λ₯Ό μ‚¬μš©ν•˜λ©΄ λ¬Έμžμ—΄μ΄λ‚˜ μˆ«μžμ— μ •ν™•ν•œ 값을 지정할 수 μžˆμŠ΅λ‹ˆλ‹€. -# Literal Narrowing +# λ¦¬ν„°λŸ΄ νƒ€μž… 쒁히기 (Literal Narrowing) -When you declare a variable via `var` or `let`, you are telling the compiler that there is the chance that this variable will change its contents. -In contrast, using `const` to declare a variable will inform TypeScript that this object will never change. +`var` λ˜λŠ” `let`으둜 λ³€μˆ˜λ₯Ό μ„ μ–Έν•  경우 이 λ³€μˆ˜μ˜ 값이 변경될 κ°€λŠ₯성이 μžˆμŒμ„ μ»΄νŒŒμΌλŸ¬μ—κ²Œ μ•Œλ¦½λ‹ˆλ‹€. +반면, `const`둜 λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ²Œ 되면 TypeScriptμ—κ²Œ 이 κ°μ²΄λŠ” μ ˆλŒ€ λ³€κ²½λ˜μ§€ μ•ŠμŒμ„ μ•Œλ¦½λ‹ˆλ‹€. -```ts twoslash -// We're making a guarantee that this variable -// helloWorld will never change, by using const. +```ts +// constλ₯Ό μ‚¬μš©ν•˜μ—¬ λ³€μˆ˜ helloWorldκ°€ +// μ ˆλŒ€ λ³€κ²½λ˜μ§€ μ•ŠμŒμ„ 보μž₯ν•©λ‹ˆλ‹€. -// So, TypeScript sets the type to be "Hello World" not string +// λ”°λΌμ„œ, TypeScriptλŠ” λ¬Έμžμ—΄μ΄ μ•„λ‹Œ "Hello World"둜 νƒ€μž…μ„ μ •ν•©λ‹ˆλ‹€. const helloWorld = "Hello World"; -// On the other hand, a let can change, and so the compiler declares it a string +// 반면, let은 변경될 수 μžˆμœΌλ―€λ‘œ μ»΄νŒŒμΌλŸ¬λŠ” λ¬Έμžμ—΄μ΄λΌκ³  μ„ μ–Έν•  κ²ƒμž…λ‹ˆλ‹€. let hiWorld = "Hi World"; ``` -The process of going from an infinite number of potential cases (there are an infinite number of possible string values) to a smaller, finite number of potential case (in `helloWorld`'s case: 1) is called narrowing. +λ¬΄ν•œν•œ 수의 잠재적 μΌ€μ΄μŠ€λ“€ (λ¬Έμžμ—΄ 값은 경우의 μˆ˜κ°€ λ¬΄ν•œλŒ€)을 μœ ν•œν•œ 수의 잠재적 μΌ€μ΄μŠ€ (`helloWorld`의 경우: 1개)둜 μ€„μ—¬λ‚˜κ°€λŠ” 것을 νƒ€μž… 쒁히기 (narrowing)라 ν•œλ‹€. -# String Literal Types +# λ¬Έμžμ—΄ λ¦¬ν„°λŸ΄ νƒ€μž… (String Literal Types) -In practice string literal types combine nicely with union types, type guards, and type aliases. -You can use these features together to get enum-like behavior with strings. +μ‹€μ œλ‘œ λ¬Έμžμ—΄ λ¦¬ν„°λŸ΄ νƒ€μž…μ€ μœ λ‹ˆμ–Έ νƒ€μž…, νƒ€μž… κ°€λ“œ 그리고 νƒ€μž… 별칭과 잘 κ²°ν•©λ©λ‹ˆλ‹€. +이런 κΈ°λŠ₯을 ν•¨κ»˜ μ‚¬μš©ν•˜μ—¬ λ¬Έμžμ—΄λ‘œ enumκ³Ό λΉ„μŠ·ν•œ ν˜•νƒœλ₯Ό κ°–μΆœ 수 μžˆμŠ΅λ‹ˆλ‹€. -```ts twoslash +```ts // @errors: 2345 type Easing = "ease-in" | "ease-out" | "ease-in-out"; @@ -44,8 +44,8 @@ class UIElement { } else if (easing === "ease-out") { } else if (easing === "ease-in-out") { } else { - // It's possible that someone could reach this - // by ignoring your types though. + // ν•˜μ§€λ§Œ λˆ„κ΅°κ°€κ°€ νƒ€μž…μ„ λ¬΄μ‹œν•˜κ²Œ λœλ‹€λ©΄ + // 이곳에 λ„λ‹¬ν•˜κ²Œ 될 수 μžˆμŠ΅λ‹ˆλ‹€. } } } @@ -55,28 +55,28 @@ button.animate(0, 0, "ease-in"); button.animate(0, 0, "uneasy"); ``` -You can pass any of the three allowed strings, but any other string will give the error +ν—ˆμš©λœ μ„Έ 개의 λ¬Έμžμ—΄μ΄ μ•„λ‹Œ λ‹€λ₯Έ λ¬Έμžμ—΄μ„ μ‚¬μš©ν•˜κ²Œ 되면 였λ₯˜κ°€ λ°œμƒν•©λ‹ˆλ‹€. ``` -Argument of type '"uneasy"' is not assignable to parameter of type '"ease-in" | "ease-out" | "ease-in-out"' +'"uneasy"' νƒ€μž…μ€ '"ease-in" | "ease-out" | "ease-in-out"' νƒ€μž…μ˜ 맀개 λ³€μˆ˜μ— ν• λ‹Ήν•  수 μ—†μŠ΅λ‹ˆλ‹€. ``` -String literal types can be used in the same way to distinguish overloads: +λ¬Έμžμ—΄ λ¦¬ν„°λŸ΄ νƒ€μž…μ€ μ˜€λ²„λ‘œλ“œλ₯Ό κ΅¬λ³„ν•˜λŠ” 것과 λ™μΌν•œ λ°©λ²•μœΌλ‘œ μ‚¬μš©λ  수 μžˆμŠ΅λ‹ˆλ‹€: ```ts function createElement(tagName: "img"): HTMLImageElement; function createElement(tagName: "input"): HTMLInputElement; -// ... more overloads ... +// ... 좔가적인 쀑볡 μ •μ˜λ“€ ... function createElement(tagName: string): Element { - // ... code goes here ... + // ... 여기에 둜직 μΆ”κ°€ ... } ``` -# Numeric Literal Types +# μˆ«μžν˜• λ¦¬ν„°λŸ΄ νƒ€μž… (Numeric Literal Types) -TypeScript also has numeric literal types, which act the same as the string literals above. +TypeScriptμ—λŠ” μœ„μ˜ λ¬Έμžμ—΄ λ¦¬ν„°λŸ΄κ³Ό 같은 역할을 ν•˜λŠ” μˆ«μžν˜• λ¦¬ν„°λŸ΄ νƒ€μž…λ„ μžˆμŠ΅λ‹ˆλ‹€. -```ts twoslash +```ts function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 { return (Math.floor(Math.random() * 6) + 1) as 1 | 2 | 3 | 4 | 5 | 6; } @@ -84,12 +84,12 @@ function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 { const result = rollDice(); ``` -A common case for their use is for describing config values: +μ΄λŠ” 주둜 섀정값을 μ„€λͺ…ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€: -```ts twoslash -/** Creates a map centered at loc/lat */ +```ts +/** loc/lat μ’Œν‘œμ— 지도λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. */ declare function setupMap(config: MapConfig): void; -// ---cut--- +// ---μƒλž΅--- interface MapConfig { lng: number; lat: number; diff --git a/pages/tutorials/babel-with-typescript.md b/pages/tutorials/babel-with-typescript.md index afb3dd6f..4cfd6fd9 100644 --- a/pages/tutorials/babel-with-typescript.md +++ b/pages/tutorials/babel-with-typescript.md @@ -5,44 +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 파일둜 λ³€ν™˜ν•˜λŠ” μ˜¬λ°”λ₯Έ 방법에 λŒ€ν•΄ κ³ λ―Όν•  수 μžˆμŠ΅λ‹ˆλ‹€. -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: +ν•˜μ§€λ§Œ, μ‚¬μš©ν• λ§Œν•œ 직관적인 방법은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€: -* 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` (Babel for transpiling, `tsc` for types) -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 νŒŒμΌμ„ μƒμ„±ν•œ ν›„, TypeScriptλ₯Ό μ‚¬μš©ν•˜μ—¬ νƒ€μž… 검사 및 `.d.ts` νŒŒμΌμ„ μƒμ„±ν•˜λŠ” 볡합 μ ‘κ·Ό λ°©μ‹μž…λ‹ˆλ‹€. -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 파일 생성 (Type Checking and d.ts file generation) -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 + // tscλ₯Ό μ‚¬μš©ν•΄ .js 파일이 μ•„λ‹Œ .d.ts 파일이 μƒμ„±λ˜μ—ˆλŠ”μ§€ ν™•μΈν•©λ‹ˆλ‹€. "declaration": true, "emitDeclarationOnly": true, - // Ensure that Babel can safely transpile files in the TypeScript project + // 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