고급 타자 기교

이 문서에서는 TypeScript 응용 프로그램을 작성할 때 자주 발생하는 몇 가지 질문과 이를 피하는 방법을 보여 드리겠습니다.이 문장의 목적은 너에게 타자를 가르치는 것이 아니라, 네가 이 언어에 대해 어느 정도의 경험을 가지고 있다고 가정하는 것이다.
항목은 다음과 같습니다.

Type assertions trap

Mapping and filtering values with correct types

Using exhaustive checks

Extending enums

유형 선언 트랩
TypeScript는 컴파일링이 실행되지 않을 때 개발자의 오류를 발견하기 위한 형식 안전에 관한 것입니다.TypeScript에서는 변수에 값을 지정하고 유형을 지정하는 두 가지 방법이 있습니다.

유형 선언 -> TypeScript의 추정 유형 덮어쓰기

유형 선언-> 변수 선언 시 할당 유형

다음 인터페이스를 정의했다고 가정해 봅시다.

interface User {
    name: string;
    surname: string;
    address?: string;
}

새 사용자 객체를 정의했습니다.

// type declaration
const user1: User = {
    name: "Adele",
    surname: "Vance"
};

// type assertion
const user2 = {
     name: "Christie",
     surname: "Cline"
} as User;

두 경우 모두 IntelliSense와 TypeScript에서 경고를 받습니다.
일부 속성 입력 오류:

// type declaration
const user1: User = {
    namee: "Adele", // this will give a warning
    surname: "Vance"
};

// type assertion
const user2 = {
     namee: "Christie", // this will give a warning
     surname: "Cline"
} as User;

그러나 address를 선택할 수 있는 매개 변수에서 필수 매개 변수로 바꾸면 어떻게 됩니까?어떤 사람들은 TypeScript가 이 두 가지 상황에서 모두 경고를 보낼 것이라고 생각합니까?

Only Type Declaration will give a warning!

유형 단언을 사용할 때 TypeScript는 우리가 더 잘 알고 있으며, 우리를 믿어야 한다고 알려 준다.오류를 입력해야만 형식 단언이 실패하지만, 필요한 속성을 잊어버리면 경고하지 않습니다.strictNull 체크 옵션을 사용하면 필요한 속성에 null/undefined까지 지정할 수 있습니다!
맵 필터 결과를 입력하려고 시도할 때 자주 발생하는 오류입니다.

const randomStrings = ['Bob', 'Alice', 'Vance'];
const mockNames = randomStrings.map(value => ({name: value, surname: value})); // type is {name: string; surname: string}[]

// but we want to strongly type it so we get intellisense, so we try like this
const typedMockNames = randomStrings.map(value => ({name: value, surname: value} as User)); // type is User[]

우리가 주소를 필요로 할 때, 그것은 우리에게 경고하지 않을 것이다.유일한 유형 보안 솔루션은 유형 선언 또는 맵 함수를 사용하는 일반 매개변수입니다.

const randomStrings = ['Bob', 'Alice', 'Vance'];

const typedMockNames = randomStrings.map(value => {
     const user: User = { name: value, surname: value };
     return user;
}) // type is User[]

const typedMockNamesGeneric = randomStrings.map<User>(value => ({name: value, surname: value})) // type is User[]

Always try to use type declarations, and if you have to use type assertions be sure you know the implications when changing type definitions.

올바른 유형 매핑 및 필터 값 사용
집합을 사용할 때, 그것들을 일부 대상에 비추는 것은 흔히 볼 수 있는 용례이지만, 일부 값도 필터할 수 있다.
예를 들어, 사용자 이름과 해당 연령의 목록이 있습니다. 우리는 단지 특정 연령 이상의 사용자를 선별하여 그들의 사용자 이름을 수집하고 싶습니다.

interface User {
    name: string;
    age: number;
}

const users: User[] = [{name: 'Adele', age: 32}, {name: 'Brian', age: 70}];

const filteredUsers = users.map(user => {
    if (user.age > 60) {
        return undefined;
    }

    return {name: user.name};
}).filter(Boolean);

사용filter(Boolean)은 조건에 부합되지 않는 모든 값을 삭제하는 데 자주 사용되는 방법이지만 문제filteredUsers 변수의 유형은 ({name: string} | undefined)[]입니다.또한 Filter 함수가 항상falsy값을 삭제하기 때문에, 우리는 그 유형이 영원히 포함되지 않을 것이라고 확신할 수 있습니다. undefined우리는 유형 단언을 사용해서 이 문제를 복구하려고 시도할 수 있지만, 우리는 이미
앞의 예는 이 방법을 사용할 때 발생할 수 있는 문제를 설명하였다.
더 좋은 해결 방안은 사용자 정의 형식 보호 함수를 정의하는 것입니다. 이 함수는falsy 값 (예: Boolean 을 필터하지만 형식 보안을 제공합니다.

function isDefined<T>(value: T | undefined) value is T {
    return value !== undefined;
}

이제 예제를 사용isDefined 함수로 변경하면 TypeScript가 올바른 유형을 추정합니다.

const filteredUsers = users.map(user => {
    if (user.age > 60) {
        return undefined;
    }

    return {name: user.name};
}).filter(isDefined); // type is now {name: string}[]

상세한 검사를 사용하다
TypeScript의 가장 큰 특징은 discriminated unions입니다.TypeScript는 문자 필드를 사용하여 객체 유형의 범위를 좁힐 수 있습니다.이것은 복잡한 시스템을 만들 때 규칙을 설정하는 좋은 방법이다.그것들은 TypeScript가 컴파일할 때 개발자에게 새로운 기능을 추가할 때 실행할 수 있는 모든 곳을 경고할 수 있도록 한다.
우리는 간단한 계산기 응용 프로그램이 하나 있는데, 이것은 조작의 유형을 정의하고, 제공하는 매개 변수가 유효한지 검사하는 함수가 하나 있다. (현실 세계의 응용 프로그램은 보통 여러 파일에 분산된 함수가 여러 개 있다.)

interface Operation {
    type: 'add'; // our literal type used to create a discriminated union
    calculate: (args: number[]) => number;
}

function isOperationValid(operation: Operation, arguments: number[]) {
    switch(operation.type) {
        case "add":
            return true;
    }
}

그리고 계산기에서 제법 연산을 지원하기로 결정했기 때문에 우리는 Operation 유형을 제법 연산을 포함하는 것으로 변경할 것이다.

interface Operation {
    type: 'add' | 'division'; // expanded type to include the new operation
    calculate: (args: number[]) => number;
}

만약 TypeScript가 새로운 조작 유형을 처리할 때 우리가 실행해야 할 함수가 있다는 것을 경고할 수 있다면 다행이다.TypeScript는 매우 훌륭하기 때문에 상세한 검사를 통해 이를 실현할 수 있다.
그것들의 사용은 매우 간단하다. 우리는 switch/case 문장에 기본 조건을 추가하면 된다.

// helper function for doing exhaustive check
function exhaustiveCheck(value: never): never {
    throw new Error('Invalid type');
}

function logOperation(operation: Operation) {
    switch(operation.type) {
        case "add":
            logOperation(operation);
        default:
            exhaustiveCheck(operation.type); // we will get an error here that operation.type cannot be assigned to never
    }
}

division 함수에서 logOperation의 사례를 처리할 때 경고 알림이 사라집니다.빈도 검사는 if 문장에 사용할 수 있으며 마지막 줄로 추가하기만 하면 됩니다.

function logOperation(operation: Operation) {
    if (operation.type === 'add') {
        // do something
        return;
    }

    exhaustiveCheck(operation.type); // the same error as before
}

확장 열거
만약 C#에서 왔다면 Description 속성을 매거진에 추가할 수 있다는 것을 알고 사용자에게 표시할 수 있습니다.TypeScript는 namespace merging라는 기능을 사용하여 비슷한 일을 할 수 있습니다.
다음 코드를 사용하여 간단한 함수getLabel를 추가할 수 있습니다.

enum PrincipalType {
    User,
    Admin,
    Group
}

namespace PrincipalType {
    export function getLabel(p: PrincipalType) {
        switch(p) {
            case PrincipalType.Admin:
                return "Administrator";
            case PrincipalType.User:
                return "User";
            case PrincipalType.Group:
                return "Security Group";
        }
    }
}

PrincipalType.getLabel(PrincipalType.Admin); // "Administrator"

결론
본문에서, 나는 당신에게 타자 스크립트 문제와 그것을 어떻게 해결하는지 보여 드렸습니다.TypeScript는 매우 좋은 도구이지만, 그 어떠한 도구와 마찬가지로 정확하게 사용하는 것이 중요하다.나는 이 예들이 너에게 도움이 되기를 희망하며, 네가 중학교 때부터 뭔가를 배울 수 있기를 바란다.다음까지!