TypeScript 4.1의 문자열 조작 유형

TypeScript는 최근에 "템플릿 리터럴 유형"을 도입했는데, 이는 기본적으로 리터럴 유형을 생성할 때 의미 체계와 같은 템플릿 문자열을 사용할 수 있게 해줍니다.

이 새로운 기능과 함께 상당히 유용한 새로운 유틸리티 유형인 문자열 조작 유형이 추가되었습니다.

템플릿 리터럴 유형

예를 들어:

type Foo = 'foo';
type Bar = 'bar';
type FooBar = `${Foo | Bar}`; // "foo" | "bar"

보시다시피 여기에서 새로운 점은 다른 문자열 리터럴 유형 내에서 다른 유형을 보간할 수 있다는 것입니다.

이것은 다른 문자열 유형을 기반으로 문자열을 유추할 수 있다는 의미이므로 매우 강력한 기능입니다.

몇 가지 가능한 사용 사례:

${keyof T}-changed "foo-changed"스타일 이벤트를 추론하기 위해

위와 같이 문자열 리터럴 유형의 조합을 열거함

문자열 리터럴 유형의 일부 유추

나는 이것에 대해 너무 많이 다루지 않을 것이지만 당신은 더 읽을 수 있습니다 here .

문자열 조작 유형

4가지 새로운 문자열 조작 유형이 있습니다.

대문자<T>

문자열 리터럴 유형을 대문자로 변환합니다.

type Foo = 'foo';
type UpperFoo = Uppercase<Foo>; // "FOO"

소문자<T>

문자열 리터럴 유형을 소문자로 변환합니다.

type FooBar = 'FOO, BAR';
type LowerFooBar = Lowercase<FooBar>; // "foo, bar"

대문자<T>

문자열 리터럴 유형을 첫 번째 문자를 대문자로 변환합니다.

type FooBar = 'foo bar';
type CapitalizedFooBar = Capitalize<FooBar>; // "Foo bar"

자본화하지 않음<T>

문자열 리터럴 유형을 첫 번째 문자를 소문자로 변환합니다.

type FooBar = 'Foo Bar';
type CapitalizedFooBar = Uncapitalize<FooBar>; // "foo Bar"

어떻게?

저처럼 이러한 유형이 어떻게 작동할 수 있는지 궁금하다면... 대답은 컴파일러 마술입니다.

일반적으로 TypeScript의 유틸리티 유형은 궁극적으로 사용자가 직접 작성할 수 있는 것으로 드릴다운합니다. 예를 들면 다음과 같습니다.

// Record is defined as follows inside TypeScript
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

// Before it existed, people were writing things like:
type Record = {[key: string]: any};

그러나 이번에는 이러한 새로운 유형이 컴파일러에 내장되어 우리가 (쉽게) 작성할 수 없습니다. 보시다시피:

// intrinsic is some special keyword the compiler
// understands, expected to never be used in userland code.
type Uppercase<S extends string> = intrinsic;

// under the hood, it uses this:
function applyStringMapping(symbol: Symbol, str: string) {
    switch (intrinsicTypeKinds.get(symbol.escapedName as string)) {
        case IntrinsicTypeKind.Uppercase: return str.toUpperCase();
        case IntrinsicTypeKind.Lowercase: return str.toLowerCase();
        case IntrinsicTypeKind.Capitalize: return str.charAt(0).toUpperCase() + str.slice(1);
        case IntrinsicTypeKind.Uncapitalize: return str.charAt(0).toLowerCase() + str.slice(1);
    }
    return str;
}

예

이것의 몇 가지 가능한 용도:

/*
 * Technically you could use this to require UPPERCASE
 * or lowercase...
 */
declare function foo<T extends string>(str: T extends Uppercase<T> ? T : never): void;

foo('ABCDEF'); // Works
foo('abcdef'); // Error

/*
 * Or you might want a method to return a transformed
 * version of a string...
 */
declare function toUpper<T extends string>(val: T): Uppercase<T>;

toUpper('foo' as string); // string
toUpper('foo'); // "FOO"

마무리

이러한 유형에 대해 자세히 알고 싶다면 여기를 참조하십시오.

https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

그들은 매우 멋지고 이 새로운 기능은 많은 가능성을 열어줍니다. 이전에 문자열로 약하게 입력되었던 것이 이제는 많은 경우에 강력하게 입력될 수 있습니다.

그들에게 가자!