TypeScript 매핑 및 조건 유형을 사용하여 어셈블리를 올바르게 처리

최초 발표deepu.tech.
너는 아마 TypeScript를 들어 본 적이 있을 것이다. 만약 그렇지 않다면, 너는 반드시 가서 보아야 한다.너는 누군가가 유형의 안전성이 얼마나 좋다고 주장하는 것을 들어 본 적이 있을 것이다.
타자 원고가 아주 좋다.코드 전송을 싫어하는 사람으로서 만약 필요하다면, 나는 틀림없이 TypeScript로 완성할 것이다.TypeScript에 대해 이미 많은 이야기를 했는데, 나는 정말 추가할 새로운 것이 없다.그러나 나는 유형이 안전하다고 믿는다. 당신의 코드가 도처에 유형 정의가 있는 것은 아니다.그렇다면, 우리는 어떻게 유형 보안 코드를 작성하여 도처에서 유형 성명을 함부로 버릴 필요가 없습니까?
유형 추정과 고급 기능(예를 들어 파생 유형과 동적 유형)이 답입니다.우리가 사용하는 편집기와 IDE는 충분히 지능적이어서 추정 유형이 있는 코드를 우아하게 처리할 수 있으며, 우리가 항상 유형을 직관적으로 볼 필요가 없다.(물론 추정 유형에 마우스를 걸면 유형이 표시됩니다.
TypeScript는 유형 추정에 매우 적합합니다.경험에 따르면, 변수의 유형을 설명하지 않고 시작할 수 있으며, 컴파일러가 그것을 추정하는지 확인할 수 있습니다.VSCode와 같은 현대 편집기를 사용하면 바로 볼 수 있습니다.따라서 tsconfig를 엄격한 모드로 설정합니다.그리고 컴파일러가 불평할 때 형식을 설명하기 시작한다.
그 밖에 TypeScript 2.1과 2.8은 일련의 멋진 검색 유형을 도입했다.이제 교차 유형, 병렬 유형, 색인 유형, 맵 유형, 조건 유형 등 다양한 기술을 사용하여 동적 추정 유형을 사용할 수 있습니다.

색인 유형

색인 유형을 사용하면 keyof T (인덱스 유형 조회 연산자) 및 T[K] (인덱스 액세스 연산자) 동적 검사 인터페이스나 유형의 속성과 유형을 사용할 수 있습니다.아래의 인터페이스를 예로 들자.

interface Person {
    name: string;
    age: number;
    address: string;
    sayHi: (msg: string) => string;
}

keyof T 연산자는 유형T의 모든 키 이름의 병합 유형을 가져오기 때문에 keyof Person 유형을 얻게 됩니다.'name' | 'age' | 'address' | sayHi' 연산자는 제공된 키 유형을 가져옵니다.T[K]은Person['name'], string은Person[*keyof* Person]을 초래할 것이다.

매핑 유형

맵 유형이 무엇인지 봅시다.가령 우리가 한 사람을 위해 다음과 같은 인터페이스를 제공했다고 가정하자.

interface Person {
    name: string;
    age: number;
    address: string;
    sayHi: (msg: string) => string;
}

현재 모든 프로젝트에서 어떤 인터페이스를 변경하는 것은 거의 항상 흔히 볼 수 있는 요구이다.예를 들어, 버전만 읽는 사람이 필요하다고 가정하면 다음과 같다.

interface ReadonlyPerson {
    readonly name: string;
    readonly age: number;
    readonly address: string;
    readonly sayHi: (msg: string) => string;
}

이 경우 Person 인터페이스를 복사하고 수동으로 동기화해야 합니다.이것이 바로 맵 유형이 도움이 될 곳이기 때문에 내장 맵 유형string | number | ((msg: string) => string)을 사용하여 이를 실현합시다.

type ReadonlyPerson = Readonly<Person>;

Readonly 유형에 마우스를 놓으면 다음과 같은 추정 유형을 볼 수 있습니다.
VSCode의 추정 유형 뷰
이거 멋있다, 그렇지?현재 우리는 기존 유형에서 유형을 만들 수 있으며, 그것들의 동기화를 걱정할 필요가 없다.그것은 어떻게 일을 합니까? ReadonlyPerson 무엇을 합니까?맵 유형을 봅시다.

type Readonly<T> = {
    readonly [K in keyof T]: T[K];
};

TypeScript의 Readonly<Person> 연산자는 여기서 이 기술을 실현합니다.기존 유형의 모든 선언을 새 유형에 매핑합니다.in 연산자는 맵에 우리 유형의 키를 제공합니다.우리 자신의 맵 유형을 구축합시다.
만약 우리가 읽기 전용 Person 인터페이스를 필요로 한다면, 그 중의 모든 필드는null일 수도 있다.우리는 이 때문에 다음과 같은 맵 유형을 구축할 수 있다.

type ReadonlyNullablePerson = {
    readonly [P in keyof Person]: Person[P] | null;
};

아래와 같이 추정하다

모든 인터페이스와 함께 사용할 수 있도록 범용으로 설정합시다.

type ReadonlyNullable<T> = {
    readonly [K in keyof T]: T[K] | null;
};

type ReadonlyNullablePerson = ReadonlyNullable<Person>;

TypeScript는 keyof, Readonly<T>, Partial<T> 및 Pick<T, K extends keyof T> 내장 매핑 유형을 포함합니다.선택과 기록은 다음과 같이 사용할 수 있습니다. 편집기에서 그것들을 검사해서 그것들이 생성한 유형을 보십시오.

type PersonMinimal = Pick<Person, "name" | "age">;

type RecordedPerson = Record<"name" | "address", string>;

모든 다른 용례에 대해 맵 형식을 만들 수 있습니다.

조건 유형

A conditional type selects one of two possible types based on a condition expressed as a type relationship test.

예를 하나 봅시다.

type Foo<T, U> = T extends U ? string : boolean;

interface Me {}
interface You extends Person {}

type FooBool = Foo<Me, Person>; // will result in boolean
type FooString = Foo<You, Person>; // will result in string

Record<K extends string, T> 동적 추정의 유형은 Foo<T, U> 또는 string 이며, 이것은 첫 번째 범용 확장에 달려 있다.
조건 유형과 맵 유형을 혼합하여 Person에서 비함수 속성만 포함하는 새로운 유형을 추정하는 방법을 보여 줍니다.

type NonFunctionPropNames<T> = {
    [K in keyof T]: T[K] extends Function ? never : K;
}[keyof T];

type NonFunctionProps<T> = Pick<T, NonFunctionPropNames<T>>;

type PersonProps = NonFunctionProps<Person>;

/* Produces the below type
    type PersonProps = {
        name: string;
        age: number;
        address: string;
    }
    */

우리는 우선 인터페이스에서 모든 비함수 속성 이름을 얻는다.그런 다음 Pick-mapped 유형을 사용하여 인터페이스에서 이러한 유형을 선택하여 새 인터페이스를 만듭니다.
TypeScript는 다음과 같은 기본 조건 유형을 제공합니다.

boolean - Exclude<T, U> 에 할당할 수 있는 유형을 T 에서 제외합니다.

U - Extract<T, U>에서 할당할 수 있는 유형을 추출합니다.

T - U 및 NonNullable<T> 를 null 에서 제외합니다.

undefined - 함수 유형의 반환 유형을 가져옵니다.

T - 구조 함수 함수 유형의 인스턴스 유형을 가져옵니다.

우리 는 그것 을 사용 에 투입하자

이러한 고급 유형을 조합하면 더욱 강해집니다.이것은 React에서 실제 응용되는 것을 보여 줍니다.

ES6의 React 성분 및 Redux 환원제

ES6로 작성된 감속기가 포함된 간단한 React 구성 요소를 살펴보겠습니다.색인 좀 봐.다음 코드 샌드박스의 jsx:
보시다시피 우리는 도구 유형 라이브러리를 사용하여 구성 요소 도구를 정의합니다.이것은 가장 효과적인 방법이 아니다. 왜냐하면 그것은 개발 과정에서 상당한 비용을 포함하기 때문이다.어쨌든, 그것은 모든 종류의 안전을 제공하지 않는다.

TypeScript에서 React 구성 요소 및 Redux reducer

이제 이 간단한 예시를 유형이 안전하도록 TypeScript로 바꾸겠습니다.색인 좀 봐.다음 코드 샌드박스의 tsx:
보시다시피 코드는 현재 더욱 안전하다.PropTypes 라이브러리와 모든 유형의 추측이 없어도 훨씬 지루합니다.

고급 유형을 사용하여 TypeScript에서 구성 요소 및 Redux reducer 반응

이제 우리가 배운 고급 유형을 응용하여 이 예시가 그리 지루하지 않고 심지어 더욱 안전하도록 하자.색인 좀 봐.다음 코드 샌드박스의 tsx:
보시다시피, 우리는 ReturnType<T> 및 InstanceType<T> 맵 및 기타 일부 유형의 추정 기술을 사용하여 더욱 안전하지만 상세하지 않은 구성 요소 버전을 작성합니다.

결론

React with TypeScript를 사용하고 있다면 반드시 적용해야 할 기술입니다.React의 유형 시스템을 고려하고 있는 경우 TypeScript만 확인하면 됩니다.그것은 훌륭한 특성, 훌륭한 도구, 우수한 IDE/Editor 지원과 좋은 지역 사회를 가지고 있다.
저는 Devoxx 2018을 위해 TypeScript에 관한 강연을 했습니다. 마음에 들면 여기서 동영상과 슬라이드를 볼 수 있습니다.

---

TypeScript와 React가 포함된 훌륭한 스택을 사용하여 전체 스택 개발을 하는 것에 대해 알고 싶으면 Amazon과Packt에 실린 책 "JHipster를 사용하여 전체 스택 개발을 진행합니다"를 참조하십시오.

지프스터를 좋아한다면 Github에 별을 주는 것을 잊지 마라

당신이 이 문장을 좋아한다면 좋아하거나 평론하세요

너는 나를 따라갈 수 있어

2018년 11월 19일, 원재Medium