사용하지 않는 유틸리티 유형 정리

나는 전방 엔지니어다.
이번에는 평소에 사용하지 않는 실용 프로그램형을 정리하고 싶습니다.같은 실용 프로그램형을 계속 사용했지만 찾아보니 많은 것들이 있었다.

실용 신형은?

유형은 Type Script를 사용하여 간단하게 변환할 수 있는 유형입니다.유틸리티형은 저번 보도에 설명된 Generics형을 사용했다.틀을 적절하게 바꾸는 편리한 도구라는 인상을 준다!

2 유틸리티

공식 문서에 기재된 유틸리티 유형을 정리합니다.

2-1 Partial<Type>

Partial<Type> 활성화type의 모든 속성.

type CustomerData = {
  name: string;
  age?: number;
  gender?: string;
  department?: string;
  isRetired: boolean;
};

type PartialCustomerData = Partial<CustomerData>;

이것PartialCustomerData은👇같다

type PartialCustomerData = {
  name?: string;
  age?: number;
  gender?: string;
  department?: string;
  isRetired?: boolean;
};

2-2 Required<Type>

Required<Type>는 type의 모든 속성을 갖추어야 한다.

type CustomerData = {
  name: string;
  age?: number;
  gender?: string;
  department?: string;
  isRetired: boolean;
};

type RequiredCustomerData = Required<CustomerData>;

이것RequiresCustomerData은👇같다

type RequiredCustomerData = {
  name: string;
  age: number;
  gender: string;
  department: string;
  isRetired: boolean;
};

2-3 Readonly<Type>

Readonly<Type> type의 모든 속성을 읽기 전용으로 설정합니다.업데이트가 안되네요.

type CustomerData = {
  name: string;
  age?: number;
  gender?: string;
  department?: string;
  isRetired: boolean;
};

type ReadonlyCustomerData = Readonly<CustomerData>;

👇속성을 업데이트할 수 없습니다.

const customerData: ReadonlyCustomerData = {
  name: "shinji",
  age: 28,
  gender: "male",
  department: " accounting",
  isRetired: false,
};

//読み取り専用プロパティであるため、'name' に代入することはできません。
customerData.name = "asuka";

2-4 Record<Keys, Type>

Reacord<keys,Type> 반환 속성 키는 keys이고 그 유형은 Type의 대상 유형이다.

type CustomerLists = Record<"shinji" | "asuka", CustomerData>;

const customerlists: CustomerLists = {
  shinji: {
    name: "shinji",
    age: 28,
    gender: "male",
    department: "accounting",
    isRetired: false,
  },
  asuka: {
    name: "asuka",
    age: 28,
    gender: "female",
    department: "sales",
    isRetired: false,
  },

CustomerLists의 유형은👇이렇게

type CustomerLists = {
    shinji: CustomerData;
    asuka: CustomerData;
}

2-5 Pick<Type, Keys>

Pick<Type,Keys> 유형Type에서 Keys에 지정된 키를 포함하는 대상 유형을 되돌려줍니다.

type CustomerData = {
  name: string;
  age?: number;
  gender?: string;
  department?: string;
  isRetired: boolean;
};

type CustomerNameLists = Pick<CustomerData,"name">

CustomerNameLists의 유형은👇이렇게

type CustomerNameLists = {
    name: string;
}

2-6 Omit<Type, Keys>

Omit<Type,Keys>는 유형Type에서 Keys에 지정된 키 이외의 대상 유형을 되돌려줍니다.

type CustomerData = {
  name: string;
  age?: number;
  gender?: string;
  department?: string;
  isRetired: boolean;
};

type CustomerNameLists = Omit<
  CustomerData,
  "age" | "gender" | "department" | "isRetired"
>;

CustomerNameLists의 유형은👇이렇게

type CustomerNameLists = {
    name: string;
}

2-7 Exclude<UnionType, ExcludedMembers>

Exclude<UnionType, ExcludedMembers>는 UNION형UnionType에서 지정한 유형을 제외한 UNION형을 되돌려줍니다.

type JobGrade = "S" | "A" | "B" | "C" | "D";
type SuperJobGrade = Exclude<JobGrade, "B" | "C" | "D">;

ExcludedMembers의 유형은👇이렇게

type SuperJobGrade = "S" | "A"

2-8 Extract<Type, Union>

SuperJobGrade UNION형Extract<Type, Union>에서 추출Type 지정된 유형의 UNION형을 반환합니다.

type JobGrade = "S" | "A" | "B" | "C" | "D";
type SuperJobGrade = Extract<JobGrade, "S" | "A">;

Union의 유형은👇이렇게

type SuperJobGrade = "S" | "A"

SuperJobGrade는 두 연합형의 공통 부분을 추출하는 데 쓰인다.

2-9 NonNullable<Type>

Extract<Type, Union>NonNullable<Type>에서 Type와null로 되돌아오는 유형.

type T1 = string | boolean | null | undefined;
type NonNullableT1 = NonNullable<T1>;

undefiend의 유형은👇이렇게

type NonNullableT1 = string | boolean

2-10 Parameters<Type>

NonNullableT1는 함수 형식Parameters<Type>의 매개 변수를 원조 형식으로 추출한 형식으로 되돌려줍니다.

type T1 = Parameters<
  (arg1: string, arg2: boolean, arg3?: number) => void
>;

Type예👇같다

type T1 = [arg1: string, arg2: boolean, arg3?: number | undefined]

2-11 ConstructorParameters<Type>

T1 구조기 함수형ConstructorParameters<Type>의 매개 변수를 원조형으로 추출한 형식으로 되돌려줍니다.

class Customer {
  name: string;
  age: number;
  isRetired: boolean;
  constructor(name: string, age: number, isRetired: boolean) {
    this.name = name;
    this.age = age;
    this.isRetired = isRetired;
  }
}

type ConstructorParametersCustomer = ConstructorParameters<typeof Customer>;

Type예👇같다

type ConstructorParametersCustomer = [name: string, age: number, isRetired: boolean]

2-12 ReturnType<Type>

ConstructorParametersCustomer 추출 함수 형식ReturnType<Type>의 반환값 형식.

type T1 = ReturnType<() => string | number>;

Type예👇같다

type T1 = string | number

2-13 InstanceType<Type>

T1 구조기에서 생성된 실례 유형을 되돌려줍니다.

class Customer {
  name: string;
  age: number;
  isRetired: boolean;
  constructor(name: string, age: number, isRetired: boolean) {
    this.name = name;
    this.age = age;
    this.isRetired = isRetired;
  }
}

type T1 = InstanceType<typeof Customer>;

InstanceType<Type>예👇같다

type T1 = Customer

2-14 ThisParameterType<Type>

T1this 매개 변수 유형을 얻을 수 있습니다.

type T1 = ThisParameterType<
  (this: { name: string; age: number }, arg: string) => void
>;

ThisParameterType<Type>예👇이렇게

type T1 = {
    name: string;
    age: number;
}

참고로 2-10에 소개된 T1에서this 파라미터의 유형을 얻을 수 없습니다.

type T2 = Parameters<
  (this: { name: string; age: number }, arg: string) => void
>;

Parameters<Type>예👇이렇게

type T2 = [arg: string]

2-15 OmitThisParameter<Type>

T2this 매개 변수 형식을 제거하는 함수 형식을 얻을 수 있습니다.

type T1 = OmitThisParameter<
  (this: { name: string; age: number }, arg: string) => void
>;

OmitThisParameter<Type>예👇이렇게

type T1 = (arg: string) => void

2-16 ThisType<Type>

T1object 내의 ThisType<Type> 유형을 this로 정의합니다.

const obj: ThisType<{ name: string; age: number }> = {
  info() {
    console.log(this.name, this.age);
  },
};

Type내obj👇이렇게

this: {
    name: string;
    age: number;
}

2-17 Uppercase<StringType>

문자열의 모든 상수 형식을 되돌려줍니다.

type name = Uppercase<"Shinji">;
//type name = "SHINJI" となる

2-18 Lowercase<StringType>

문자열의 모든 작은 문자 형식을 되돌려줍니다.

type name = Lowercase<"SHINJI">;
//type name = "shinji"となる

2-19 Capitalize<StringType>

문자열의 상수 형식을 되돌려줍니다. 첫 번째 문자를 대문자로 변환합니다.

type name = Capitalize<"shinji">;
//type name = "Shinji"となる

2-20 Uncapitalize<StringType>

문자열의 작은 문자 형식을 되돌려줍니다.

type name = Uncapitalize<"SHINJI">;
//type name = "sHINJI"となる

3 마지막

this,Partial,Required,Readonly,Record,Pick 등은 모두 평소에 사용하지만 다른 것은 익숙하지 않다.
특히Omit 휘감긴 실용 프로그램형은 사용처를 상상하기 어려워 OSS 사용법을 찾아보거나 type-challenges 등을 통해 이해를 깊게 해보고 싶다!

4 참조

Documentation - Utility Types
실용 신제품 | Type Script 시작 서바이벌 Type Type Script
Type Script 4.1에 비밀리에 추가된 intrinsic 키워드 및 string mapped types
타입 스크립트의'형'을 배우고 싶은 당신에게.type-challeenges의 여러분. - Qita.