diff --git a/docs/ko/reference/built-in/Capitalize.md b/docs/ko/reference/built-in/Capitalize.md index 1b3ec85..121a644 100644 --- a/docs/ko/reference/built-in/Capitalize.md +++ b/docs/ko/reference/built-in/Capitalize.md @@ -1 +1,70 @@ -# Capitalize +# Capitalize\ + +:::info +`Capitalize\`은 TypeScript 2.8 이상에서 사용할 수 있는 내장 유틸리티 타입이에요. 자세한 내용은 [타입스크립트 핸드북](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html#uppercasestringtype)과 [릴리즈 노트](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/)를 참고해주세요. +::: + +## 개요 + +`Capitalize` 유틸리티 타입은 문자열 리터럴 타입의 첫 글자를 대문자로 표시하고 나머지 문자는 변경하지 않아요. + +## 구문 + +```ts +type Capitalize = S extends `${infer F}${infer Rest}` ? `${UpperCase}${Rest}` : S; +``` + +- **StringType (S)**: 첫 글자를 대문자로 바꿀 문자열이에요. + +## 예제 + +#### 예제 #1 + +```ts +type LowercaseGreeting = 'hello, world'; +type Greeting = Capitalize; // 'Hello, world' +``` + +#### 예제 #2 + +```ts +type FormEventNames = 'submit' | 'reset' | 'change' | 'input' | 'focus' | 'blur' | 'invalid'; +type CapitalizedFormEventNames = Capitalize; // 'Submit' | 'Reset' | 'Change' | 'Input' | 'Focus' | 'Blur' | 'Invalid' +type FormHandlerNames = `on${CapitalizedFormEventNames}`; // 'onSubmit' | 'onReset' | 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onInvalid' +type FormHandlers = { + [FormHandlerName in FormHandlerNames]: (event: Event) => void; +}; +``` + +#### 예제 #3 + +```ts +interface UserStoreState { + id: number; + name: string; + age: number; +} + +// 프로퍼티명을 setter 함수명으로 변환하는 타입이에요. +// 예를 들어, 'name'이 주어졌을 때, `setName`으로 변환해요. +type ConvertToSetter = `set${Capitalize}`; + +// 상태를 기반로 setter 함수 타입을 생성해요. +// StoreState의 각 프로퍼티에 대해 setter 함수 타입을 생성해요. +type StoreSetters = { + [K in keyof StoreState as ConvertToSetter]: (value: StoreState[K]) => void; +}; + +// 상태와 setter를 하나의 타입으로 결합해요. +type UserStore = UserStoreState & StoreSetters; + +// 결과 타입: +// type UserStore = { +// id: number; +// name: string; +// age: number; +// setId: (value: number) => void; +// setName: (value: string) => void; +// setAge: (value: number) => void; +// } +``` diff --git a/docs/reference/built-in/Capitalize.md b/docs/reference/built-in/Capitalize.md index 1b3ec85..5898ce9 100644 --- a/docs/reference/built-in/Capitalize.md +++ b/docs/reference/built-in/Capitalize.md @@ -1 +1,70 @@ -# Capitalize +# Capitalize\ + +:::info +The `Capitalize` utility type is available starting from TypeScript version 4.1. For more information see in [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html#uppercasestringtype), [Release Note](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/) +::: + +## Overview + +The `Capitalize` utility type capitalizes the first letter of a string literal type while keeping the remaining characters unchanged. + +## Syntax + +```ts +type Capitalize = S extends `${inter F}${inter Rest}` ? `${Uppercase}${Rest}` : S; +``` + +- **StringType (S)**: The string that you want to convert the first character to an uppercase equivalent. + +## Examples + +#### Example #1 + +```ts +type LowercaseGreeting = 'hello, world'; +type Greeting = Capitalize; // 'Hello, world' +``` + +#### Example #2 + +```ts +type FormEventNames = 'submit' | 'reset' | 'change' | 'input' | 'focus' | 'blur' | 'invalid'; +type CapitalizedFormEventNames = Capitalize; // 'Submit' | 'Reset' | 'Change' | 'Input' | 'Focus' | 'Blur' | 'Invalid' +type FormHandlerNames = `on${CapitalizedFormEventNames}`; // 'onSubmit' | 'onReset' | 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'onInvalid' +type FormHandlers = { + [FormHandlerName in FormHandlerNames]: (event: Event) => void; +}; +``` + +#### Example #3 + +```ts +interface UserStoreState { + id: number; + name: string; + age: number; +} + +// Type to convert a property name to a setter function name. +// For example, given 'name', it converts it to 'setName'. +type ConvertToSetter = `set${Capitalize}`; + +// Create a type for store setters based on the state. +// For each property in StoreState, generate a setter function. +type StoreSetters = { + [K in keyof StoreState as ConvertToSetter>]: (value: StoreState[K]) => void; +}; + +// Combine the state and its setter into a single type. +type UserStore = UserStoreState & StoreSetters; + +// Resulting type: +// type UserStore = { +// id: number; +// name: string; +// age: number; +// setId: (value: number) => void; +// setName: (value: string) => void; +// setAge: (value: number) => void; +// } +```