-
Notifications
You must be signed in to change notification settings - Fork 143
Literal types issue115 #139
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.
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
Changes from 10 commits
01762ce
00f053a
5ff3137
47d1a86
aad57cb
c5e8f47
49c9acc
a357447
2b415e9
633dc4d
a08658f
9534499
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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. | ||||||
리터럴 타입은 collective 타입의 구체적인 하위 타입입니다. | ||||||
이것이 의미하는 바는 타입 시스템 안에서 `"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가 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 수정했습니다~ :) |
||||||
// 절대 변경되지 않음을 보장합니다. | ||||||
|
||||||
// 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)라 한다. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
[제안] There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 제안해주신 문장이 더 매끄럽네요. 반영했습니다 :) |
||||||
|
||||||
# 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. | ||||||
// 하지만 누군가는 타입을 무시하게된다면 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 수정했습니다~ |
||||||
// 이곳에 도달하게 될 수 있습니다. | ||||||
} | ||||||
} | ||||||
} | ||||||
|
@@ -55,41 +55,41 @@ 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: | ||||||
문자열 리터럴 타입은 중복 정의를 구별하는 것과 동일한 방법으로 사용될 수 있습니다: | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 사실 이 부분 고민을 했었는데 역시 |
||||||
|
||||||
```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; | ||||||
} | ||||||
|
||||||
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; | ||||||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수정했습니다 : )