TypeScript 유틸리티 유형: 가장 유용한 6가지

저는 거의 1년 동안 타이프스크립트로 작업해 왔으며 이 시간 동안 많은 것을 배우고 구현했습니다. 그 중에서 TypeScript에 대해 가장 좋아하는 것은 더 나은 코드를 작성할 수 있게 해주는 유틸리티 유형이므로 오늘은 더 나은 코드를 작성하는 데 도움이 되는 6가지 가장 유용한 유틸리티 유형에 대해 설명하겠습니다.

시작하겠습니다.

기록

유형keys의 속성 세트types로 개체 유형을 구성하려는 경우 레코드가 사용하기에 가장 적합한 유틸리티 유형입니다.

예시

사용자 정보를 저장할 개체 유형을 생성하려는 경우 여기에서 Record 유틸리티를 사용하여 동일한 작업을 수행할 수 있습니다.

// Our user ID will be a string
type UserID = string

// Defining our available user information types
type UserInfo = {
  name: string;
  email: string;
  avatarUrl: string;
}

const users: Record<UserID, UserInfo> = {
 "uuid1": { "name": "user1", "email": "[email protected]", "avatarUrl": "https://user1.com/avatar.png" },
 "uuid2": { "name": "user2", "email": "[email protected]", "avatarUrl": "https://user2.com/avatar.png" },
 "uuid3": { "name": "user3", "email": "[email protected]", "avatarUrl": "https://user3.com/avatar.png" }
 }

If you try to add any other type that does not exist in the UserInfo type, the typescript will give a compile error.

부분적

Partial 유틸리티 유형은 기존 유형을 사용하고 싶지만 모든 속성이 선택 사항이 되기를 원할 때 매우 유용합니다.

예시

사용자의 속성을 업데이트하려고 하고 필요한 모든 속성이 포함된 사용자 인터페이스가 이미 있지만 사용자 정보를 업데이트하기 위한 별도의 인터페이스를 만들고 싶지 않다고 가정합니다. 부분 유틸리티를 사용하면 모든 속성이 선택 사항인 유형을 동적으로 생성할 수 있습니다.

// User interface with all required properties
interface User{
 id:string;
 name: string;
 slug: string;
 group: string[];
 avatarUrl: string;
 about: string;
}

// Partial<User> generates a new type based on User with all the property
// keys being optional
const updateUser: Partial<User> = {
  about: 'I am a software engineer.'
}

필수의

필수 유틸리티 유형은 부분 유틸리티 유형과 정반대이며 기존 유형을 사용하려고 하지만 모든 속성을 필수로 지정하려는 경우에 매우 유용합니다.

예시

경우에 따라 원래 유형이 일부 속성을 선택 사항으로 정의하더라도 개체에 모든 필수 속성이 포함되도록 해야 할 수 있습니다.

// User type has lastName property as optional
type User = {
    firstName: string,
    lastName?: string
}

// You want to create a user with both firstName and lastName, so you can use User type with Required utility type to make all the properties as required.
const user1: Required<User> = {
    firstName: "John",
    lastName: "Doe"
}

생략

생략 유틸리티 유형은 다른 객체 유형에서 특정 속성을 생략하여 객체 유형을 만드는 데 사용할 수 있습니다.

예시

일부 속성 X, Y 및 Z를 가진 객체 유형 사용자가 있다고 가정해 보겠습니다. 속성 Z 없이 객체 유형을 생성하려는 경우 이 유틸리티 유형을 사용할 수 있습니다.

type Product = {
  X: string;
  Y: string;
  Z: string;
}

type ProductWithoutZ = Omit<Product, "Z">;

선택하다

Pick 유틸리티 유형을 사용하면 기존 유형에서 속성을 선택하여 새 유형을 만들 수 있습니다.
부모 구성 요소와 공통된 일부 속성이 있는 자식 구성 요소가 있는 경우 해당 속성을 선택하여 자식에 대한 유형을 만들 수 있습니다.

예시

type ParentType = {
  X: string;
  T: number;
  S: boolean;
}

type ChildType = Pick<ParentType, "X" | "S">

들어오지 못하게 하다

공용체 유형으로 작업할 때 모두가 아닌 특정 구성원에만 공용체 유형을 사용하려는 일반적인 시나리오입니다. 여기서 제외 유틸리티를 사용하여 동일한 결과를 얻을 수 있습니다.

예시

type ReactionUnion = '👍' | '👎' | '😄' |  '🎉' | '😕' | '❤️' | '👀' | '🚀'

// This is equivivalent to  '👍' | '👎' 
type OnlyThumbsUnion = Exclude<ReactionUnion , '😄' |  '🎉' | '😕' | '❤️' | '👀' | '🚀'>

요약

이 기사에서는 더 나은 TypeScript 코드를 작성하는 데 도움이 되는 6가지 TypeScript 유틸리티 유형에 대해 논의했습니다.
TypeScript에서 제공하는 더 많은 유틸리티 유형을 확인할 수 있습니다.
here .

이것이 이번 주제의 전부입니다. 읽어 주셔서 감사합니다.

나와 연결

|