組み込みの文字列操作型
Uppercase、Lowercase、Capitalize、Uncapitalizeを使います。
「組み込みの文字列操作型」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
組み込み文字列変換型
TypeScript には、4つの組み込み文字列操作型があります。Uppercase、Lowercase、Capitalize、Uncapitalizeです。これらはコンパイル時に文字列リテラル型を変換するため、実行時のコストはありません。
Uppercase
Uppercase<S>は、文字列リテラル型のすべての文字を大文字に変換します。リテラル'hello'は、型'HELLO'になります。
type Loud = Uppercase<"hello"> // "HELLO"
const x: Loud = "HELLO"
console.log(x)Lowercase
Lowercase<S>はその逆で、すべての文字を小文字に変換します。'HELLO'は'hello'になります。
type Quiet = Lowercase<"HELLO"> // "hello"
const x: Quiet = "hello"
console.log(x)Capitalize
Capitalize<S>は最初の文字だけを大文字にし、残りの文字はそのままにします。'name'は'Name'になります。
type Title = Capitalize<"name"> // "Name"
const x: Title = "Name"
console.log(x)Uncapitalize
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を付けるテンプレートを使うと、nameフィールド用のgetterのようなgetter名を組み立てられます。
type Field = "name" | "age"
// template: get + Capitalize<Field> => "getName" | "getAge"
const g: "getName" | "getAge" = "getName"
console.log(g)Mapped Typeでのキー名の構築
Mapped Typeのキーの再マッピングでは、組み込み型を使って変換後のプロパティ名を生成できます。たとえば、各プロパティを先頭大文字のhandlerキーに変換できます。
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"
実用的な用途
組み込み型を使うと、定数名、イベントキー、getter名やsetter名を導出したり、リテラル型が付いた設定キーの大文字・小文字を正規化したりできます。これらはすべてコンパイラによってチェックされます。
type Action = "add" | "remove"
type ActionType = Uppercase<Action> // "ADD" | "REMOVE"
const a: ActionType = "ADD"
console.log(a)クイックチェック
組み込み文字列型についての理解度を確認しましょう。
まとめ
組み込み型のUppercase、Lowercase、Capitalize、Uncapitalizeは、コンパイル時に文字列リテラル型を変換します。ユニオンの各メンバーにも適用され、テンプレートリテラル型やMapped Typeと組み合わせて、キー名やhandler名を構築できます。これらには実行時の動作はありません。実行時の変換には実際の文字列メソッドを使い、組み込み型は静的型を形作るために使います。
よくある質問
「組み込みの文字列操作型」レッスンは無料ですか？
はい。「組み込みの文字列操作型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「組み込みの文字列操作型」で何を学びますか？
Uppercase、Lowercase、Capitalize、Uncapitalizeを使います。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「組み込みの文字列操作型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。