몇 가지 유용한 TypeScript 스니펫

선택하다

인터페이스의 일부 속성을 기반으로 새 유형을 구성해야 하는 경우 항상 Pick 유틸리티 유형을 얻을 수 있습니다.

interface MyInterface {
  id: number;
  name: string;
  properties: string[];
}

type MyShortType = Pick<MyInterface, 'name' | 'id'>;

이제 MyShortType 는 name 에서 추출한 id 및 MyInterface 속성만 가집니다.

생략

Pick 와 같은 유용한 변환기 유형이 하나 더 있지만 Omit "다른 방향"으로 작동하고 지정된 인터페이스에서 속성을 제외합니다. 예를 살펴보겠습니다.

interface MyInterface {
  id: number;
  name: string;
  properties: string[];
}

type MyShortType = Omit<MyInterface, 'name' | 'id'>;

이번에 MyShortType 는 properties 속성만 가지고 있는데, 나머지는 MyInterface 에서 생략되었기 때문입니다.

열쇠

이것은 내가 가장 좋아하는 것입니다. getter 작성에 매우 유용합니다.

interface MyInterface {
  id: number;
  name: string;
  properties: string[];
}

const myObject: MyInterface = {
  id: 1,
  name: 'foo',
  properties: ['a', 'b', 'c']
};

function getValue(value: keyof MyInterface) {
  return myObject[value];
}

getValue('id'); // 1
getValue('count') // Throws compilation error: Argument of type '"count"' is not assignable to parameter of type '"id" | "name" | "properties"'.

기록

다음과 같이 일반 객체에 유형을 작성하려고 시도하면 엉망으로 보인다는 것을 알 수 있습니다.

const myTypedObject: {[key: string]: MyInterface} = {
  first: {...},
  second: {...},
  ...
}

ShinyRecord 유형을 사용하여 이를 달성하는 것이 더 좋습니다.

const myTypedObject: Record<string, MyInterface> = {
  first: {...},
  second: {...},
  ...
};

보기 흉한{[key: string]: ...} 구성보다 레코드를 사용하는 것이 조금 더 깔끔하지 않나요?

보너스: 옵셔널 체이닝

이것은 매우 유용한 기능입니다. 3.7에서 릴리스된 이후 TypeScript의 새로운 기능입니다. 거의 모든 React Component에는 다음과 같은 추악한 코드가 있습니다.

<React.Fragment>
  {apiResult && apiResult.data && apiResult.data.params && apiResult.data.params.showOnline && (<div>✅ Online</div>)}
</React.Fragment>

이제 그렇게 할 수 있습니다(모든 코딩 신 덕분에!):

<React.Fragment>
  {apiResult?.data?.params?.showOnline && (<div>✅ Online</div>)}
</React.Fragment>

🙃 이 짧은 글이 조금이나마 도움이 되었으면 합니다.