타이프스크립트의 마사지 유형(1부)

TLDR;

TypeScript에서는 다양한 방법으로 유형 정보를 검색할 수 있습니다. 유형 컨텍스트에서 다음을 사용할 수 있습니다.

typeof - 값 또는 속성 유형 참조: typeof "some string" is string ; typeof 1는 number 등

keyof - 객체가 주어지면 키의 합집합으로 축소됩니다. type keys = keyof { name: "Bobi", age: 29 } 다음 유형으로 확인됩니다. type keys = "name" | "age"

인덱싱된 액세스 - 주어진 type Person = { name: "Bobi" } 및 type PersonName = Person["name"] , PersonName는 string로 확인됩니다.

TypeScript는 유형 재사용성 측면에서 훌륭합니다. 유형이 정의되면 다양한 비즈니스 논리 요구 사항에 맞게 "마사지"될 수 있습니다.

다음은 하나의 간단한 예입니다.

type Person = { name: string, age: number };

const person: Person = { name: "Bobi", age: 29 };

const updateName = (p: Person, name: string) => {
    p.name = name;
}

updateName(person, "John"); // { name: "John", age: 29 }

updateName 함수는 사람( Person )과 string 형식의 이름을 받습니다.

모두 훌륭하지만 사용자가 빈( null ) 이름을 가질 수 있다는 새로운 요구 사항이 있다고 상상해보십시오.

우리는하다:

type Person = { name: string | null, age: number };

이제 name에서 updateName 인수의 유형도 다음과 같이 업데이트해야 합니다.

const updateName = (person: Person, name: string | null) => {
    person.name = name;
}

name 유형의 Person 속성에 대해 인덱싱된 유형 액세스를 사용하는 경우 이 이동을 건너뛸 수 있습니다. 보여드리겠습니다.

const updateName = (person: Person, name: Person["name"]) => {
    person.name = name;
}

이 유형 정의가 있으면 typescript는 name 유형을 사용하여 Person.name 인수에 대한 유형을 자체적으로 해결할 만큼 충분히 똑똑합니다. 물론 이것은 string | null 새로운 가상 요구 사항으로 업데이트한 후입니다.

이것이 인덱싱된 유형 액세스의 힘입니다.

유형

TypeScript의 또 다른 편리한 키워드는 typeof 입니다.

const names = ["John", "Mary"];

const emojify = (name: string) => {
    return `${name} 🤘`;
}

const process = (items: typeof names, processor: typeof emojify) => {
    return items.map(processor);
}

console.log(process(names, emojify)) // ["John 🤘", "Mary 🤘"]

process 함수에 주의하십시오. It's items 인수는 이름과 유형이 같은 모든 것인데, 이는 string[] 입니다. 그리고 processor 인수는 emojify 와 같은 유형을 가진 모든 것입니다. 이 예에서는 (string) => string 입니다.

컴파일러에게 "이봐, 컴파일러, 그 변수( type x = typeof y )의 유형이 무엇이든 간에, 이 변수를 이 ( y ) 변수의 유형으로 사용하십시오"라고 말하고 싶을 때 x를 사용합니다.

열쇠의

첫 번째 부분에서 다룰 마지막 도구는 keyof 입니다.

그것은 아주 자명합니다. 보여드리겠습니다.

type Subscriber = { id: number, email: string, topic: number };

type SubscriberProp = keyof subscriber; // "number" | email" | "topic"

우리의 SubscriptionDetail는 Subscriber 유형의 키로 해결됩니다. 그래서 우리는 type SubscriberDetail = "email" | "topic" 를 얻습니다.

다음과 같은 방식으로 무언가가 필요할 때 편리합니다.

const getProp = (subscriber: Subscriber, prop: SubscriberProp) => {
    return subscriber[prop]
}

파트 2는 오븐에 있으며 곧 제공됩니다.

Hans Vivek에 Unsplash의 사진