[항해 플러스 프론트엔드 7기] 사전 스터디 4주차 - TS

Jaehyun Ahn·7일 전

typescript 항해플러스프론트엔드

항해 플러스

목록 보기

6/7

정확한 선택적 프로퍼티 타입

: 컴파일러 플래그 --exactOptionalPropertyTypes을 사용하면 암시적으로 undefined를 허용하는 프로퍼티에 대한 undefined 할당이 더 이상 허용되지 않는다.

name?: string 대신 name : string | undefined와 같이 명시적으로 undefined를 허용해야한다.

Awaited 타입 및 Promise 개선

: Awaited<> 유틸리티 타입은 무한하게 중첩된 Promise에서 값을 추출한다.


type P1 = Awaited<string>; // string
type P2 = Awaited<Promise<string>>; // string
type P3 = Awaited<Promise<Promise<string>>>; // string

Import 문에 대한 type 키워드

: Import type가 아닌 import 문에서 type 키워드를 사용하여 하나로 결합하여 불러올 수 있다.

// 이전
import { something } from './file';
import type { SomeType } from './file';

// 새로운 방식
import { something, type SomeType } from './file';

const 단언

: 상수를 정의할 때 as const를 사용하여 리터럴 타입으로 정확하게 타입 지정을 할 수 있다. 또한 객체와 배열을 readonly로 만들어서 상수 객체의 변경을 방지한다.


// 이전 방식
const obj = { name: 'foo', value: 9, toggle: false }; // { name: string; value: number; toggle: boolean; }
// 값은 일반적으로 입력되므로 어떤 값이라도 지정할 수 있습니다.
obj.name = 'bar';

const tuple = ['name', 4, true]; // (string | number | boolean)[]
// 길이와 정확한 타입은 타입에서 확인할 수 없습니다. 모든 값은 어디에나 지정할 수 있습니다.
tuple[0] = 0;
tuple[3] = 0;

// 새로운 방식
const objNew = { name: 'foo', value: 9, toggle: false } as const; // { readonly name: "foo"; readonly value: 9; readonly toggle: false; }
// "foo"로 정의되어 있고 읽기 전용이므로 값을 할당할 수 없습니다.
objNew.name = 'bar'; // type error: Cannot assign to 'name' because it is a read-only property.

const tupleNew = ['name', 4, true] as const; // readonly ["name", 4, true]
// 이제 길이와 정확한 타입이 정의되었으며 리터럴로 정의되어 읽기 전용이므로 아무 것도 할당할 수 없습니다.
tupleNew[0] = 0; // type error: Cannot assign to '0' because it is a read-only property.
tupleNew[3] = 0; // type error: Index signature in type 'readonly ["name", 4, true]' only permits reading.

클래스 내 메서드에 대한 코드 스니펫 완성

: 클래스가 메서드 유형을 상속할 때 에디터에서 해당 메서드가 코드 스니펫으로 제안된다.

인덱싱된 액세스 추론 개선 사항

: 키로 타입을 직접 인덱싱할 때 같은 객체에 있는 경우, 타입이 더 정확해진다.


interface AllowedTypes {
  'number': number;
  'string': string;
  'boolean': boolean;
}

// Record는 허용된 타입 중에서 종류와 값 타입을 지정합니다
type UnionRecord<AllowedKeys extends keyof AllowedTypes> = { [Key in AllowedKeys]:
{
  kind: Key;
  value: AllowedTypes[Key];
  logValue: (value: AllowedTypes[Key]) => void;
}
}[AllowedKeys];

// logValue 함수는 Record 값만 허용합니다.
function processRecord<Key extends keyof AllowedTypes>(record: UnionRecord<Key>) {
  record.logValue(record.value);
}

processRecord({
  kind: 'string',
  value: 'hello!',
  // 암시적으로 string | number | boolean 타입을 갖는 데 사용되는 값입니다.
  // 이제 string으로만 올바르게 추론됩니다.
  logValue: value => {
    console.log(value.toUpperCase());
  }
});