내장 문자열 조작 타입
Uppercase, Lowercase, Capitalize, Uncapitalize를 사용합니다.
내장 문자열 조작 타입은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
내장 문자열 변환기
TypeScript에는 네 가지 내장 문자열 조작 타입인 Uppercase, Lowercase, Capitalize, Uncapitalize가 제공됩니다. 이 타입들은 런타임 비용 없이 컴파일 시 문자열 리터럴 타입을 변환합니다.
대문자 변환
Uppercase<S>는 문자열 리터럴 타입의 모든 문자를 대문자로 변환합니다. 리터럴 'hello'는 'HELLO' 타입이 됩니다.
type Loud = Uppercase<"hello"> // "HELLO"
const x: Loud = "HELLO"
console.log(x)소문자 변환
Lowercase<S>는 반대로 모든 문자를 소문자로 변환합니다. 'HELLO'는 'hello'가 됩니다.
type Quiet = Lowercase<"HELLO"> // "hello"
const x: Quiet = "hello"
console.log(x)첫 글자 대문자 변환
Capitalize<S>는 첫 번째 문자만 대문자로 바꾸고 나머지는 그대로 둡니다. 'name'은 'Name'이 됩니다.
type Title = Capitalize<"name"> // "Name"
const x: Title = "Name"
console.log(x)첫 글자 소문자 변환
Uncapitalize<S>는 첫 번째 문자만 소문자로 바꿉니다. 'Name'은 'name'이 되므로 PascalCase 키를 camelCase로 변환할 때 유용합니다.
type Camel = Uncapitalize<"Name"> // "name"
const x: Camel = "name"
console.log(x)유니온 변환하기
유니온에 내장 타입을 적용하면 각 구성 요소가 변환됩니다. 'a' | 'b'에 Uppercase를 적용하면 'A' | 'B'가 됩니다.
type Keys = "id" | "name"
type Upper = Uppercase<Keys> // "ID" | "NAME"
const k: Upper = "ID"
console.log(k)템플릿 리터럴과 결합하기
내장 타입은 템플릿 리터럴 타입 안에서 사용할 때 가장 강력합니다. 필드의 Capitalize 앞에 get을 붙이는 템플릿을 사용하면 이름 필드용 값 가져오기 함수와 같은 getter 이름을 만들 수 있습니다.
type Field = "name" | "age"
// template: get + Capitalize<Field> => "getName" | "getAge"
const g: "getName" | "getAge" = "getName"
console.log(g)매핑된 타입에서 키 이름 만들기
매핑된 타입의 키 재지정 부분에서 내장 타입을 사용하면 변환된 속성 이름을 만들 수 있습니다. 예를 들어 각 속성을 첫 글자가 대문자인 처리기 키로 바꿀 수 있습니다.
type Events = "click" | "drag"
// { [E in Events as on + Capitalize<E>]: () => void }
// produces keys onClick and onDrag
const handlers: { onClick: () => void } = { onClick: () => {} }
console.log(typeof handlers.onClick)내장 타입 연결하기
내장 타입을 중첩하면 변환을 조합할 수 있습니다. 예를 들어 대문자로 바꾸면 충돌할 수 있으므로, 문자열의 대소문자를 정규화할 때는 Lowercase에 Capitalize를 적용하는 조합을 흔히 사용합니다.
type Normalized = Capitalize<Lowercase<"hELLO">> // "Hello"
const x: Normalized = "Hello"
console.log(x)컴파일 시에만 사용
이 타입들은 런타임에 존재하지 않습니다. 실제 문자열 값을 변환하려면 여전히 toUpperCase() 같은 메서드를 호출해야 하며, 내장 타입은 정적 타입의 형태만 지정합니다.
function shout<S extends string>(s: S): Uppercase<S> {
return s.toUpperCase() as Uppercase<S>
}
console.log(shout("hi")) // HI, typed as "HI"
실용적인 활용
내장 타입을 사용하면 상수 이름, 이벤트 키, 값 가져오기 및 설정하기 함수 이름을 파생하고 리터럴 타입으로 지정된 구성 키의 대소문자를 정규화할 수 있습니다. 이 모든 과정은 컴파일러가 확인합니다.
type Action = "add" | "remove"
type ActionType = Uppercase<Action> // "ADD" | "REMOVE"
const a: ActionType = "ADD"
console.log(a)빠른 확인
내장 문자열 타입에 대한 이해도를 확인해 보세요.
복습
Uppercase, Lowercase, Capitalize, Uncapitalize 내장 타입은 컴파일 시 문자열 리터럴 타입을 변환합니다. 유니온 전체에 분배되며 템플릿 리터럴 타입 및 매핑된 타입과 조합해 키와 처리기 이름을 만들 수 있습니다. 런타임 동작은 없으므로 런타임 변환에는 실제 문자열 메서드를 사용하고, 이 타입들은 정적 타입의 형태를 지정합니다.
자주 묻는 질문
“내장 문자열 조작 타입” 강의는 무료인가요?
네 — “내장 문자열 조작 타입” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“내장 문자열 조작 타입”에서 뭘 배우나요?
Uppercase, Lowercase, Capitalize, Uncapitalize를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“내장 문자열 조작 타입” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 템플릿 리터럴 타입 기초
- 구조화된 문자열 모델링
- 문자열 유니언과 자동 완성
- 내장 문자열 조작 타입