내장형 유틸리티

13219 단어 TypeScripttech

개시하다

Typescript에 쓴 글을 읽을 때 これなんや？의 실용 프로그램 유형을 자주 떠올려 자신의 비망록으로 보도한다.

이른바 삽입식 실용 프로그램형


​type Fig = "one" | "two" | "three";
type FigMap = { [k in Fig]: number };
const figMap: FigMap = {
  one: 1,
  two: 2,
  three: 3,
};
};
이전 글(유형 연산자)의 코드.
이 지도형이지만 아래에 이렇게 써도 같은 결과가 나올 것이다.
​type Fig = "one" | "two" | "three";
type FigMap = Record<Fig, number>;
const figMap: FigMap = {
  one: 1,
  two: 2,
  three: 3,
};
{ [k in Fig]: number }가 Record<Fig, number>로 교체되었습니다.이 판넬리에 기재된 Record<>을 사용하면 TypeScript이 제공하는 실용 프로그램형이다.
이외에도 많은 실용 프로그램형이 있는데, 여기서 흔히 볼 수 있는 실용 프로그램형을 소개한다.

Partial


type Partial...T-T의 모든 속성을 생략(|undefined)할 수 있는 새 유형 반환
​type Person = {
  name: string;
  age: number;
};

type PartialPerson = Partial<Person>;

Required


type Required/유형 T의 모든 속성을 새로운 유형으로 반환해야 합니다
type Person = {
  name: string;
  age: number;
};

type ReqPerson = Required<Person>;

Readonly


type Readonly...T형 속성을 모두 읽기 전용으로 되돌려주는 새 유형
​type Person = {
  name: string;
  age: number;
}

type ReadPerson = Readonly<Person>;

또한 속성 일부를 읽기 전용으로 설정하려면 다음과 같습니다.
​type Person = {
  readonly name: string;
  age: number;
};

Pick


type Pick...T(객체형)에서 K가 지정한 키의 속성만 추출
​type Person = {
  name: string;
  age: number;
  gender: "male" | "female";
};

type PickName = Pick<Person, "name">;

또 2개 이상의 속성을 추출하고 싶을 때| 연결한다.
​type Person = {
  name: string;
  age: number;
  gender: "male" | "female";
};

type PkNameGender = Pick<Person, "name"|"gender">;

Omit


Ommit...T에서 K가 지정한 키의 속성 생략
​type Person = {
  name: string;
  age: number;
  gender: "male" | "female";
};

type OmittedPerson = Omit<Person, "age">;

Extract


T에서 U 요소만 뽑아요.
​type Fuga = "AAA" | "BBB" | "CCC";
type FugaAB = Extract<Fuga, "AAA" | "BBB">;

Exclude


T에서 U 요소 제거
​type Fuga = "AAA" | "BBB" | "CCC";
type FugaAB = Exclude<Fuga, "CCC">;
구축(deps-dev):bump-react와react-dom
TailwindCSS에서 맞춤형으로 제작된 부드러운 안내서

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage