Portfolio

타입스크입트의 타입이 값의 집합임을 이해하기

[진욱] 집합의 원소를 타입이 될 수 있는 값이라고 생각하는게 좋을 것 같다. (집합의 원소를 객체의 속성으로 생각하면 안된다)

[동호] (예제 하나를 언급하며) 이걸 맞추면 어느정도 이해 된 것


interface Creature {
	name: string;
	birth: number;
	gender: "M" | "F";
};

interface Person {
	name: string;
	birth: number;
	gender: "M" | "F";
	nationality: string;
};

위 예제에서 Person이 Creature의 하위 집합임을 이해하면 좋다. 결국 결론은 객체의 속성을 늘릴수록 ‘제약조건’이 추가된다고 생각해보자.

[재희] 이걸 보면 도움이 될 듯.. 함수에서 a.b로 타입 narrowing 해줬는데 왜 에러가 나는지부터 생각해보면 좋을거 같다


type A = {a: string}
type B = {b: string}

type C = keyof(A | B) // never

type D = {a:number, b: string}

type E = keyof(A | D)

type F = {a: number, b: undefined}

type G = keyof(A | F)

function gett(a: A|B){
  if(a.b) {
    console.log(a.b)
  }
}

[효리] 타입 단언말고 더 있나요? (에러 해결법이)

[재희] 타입단언 또는 위 코드의 F처럼 하는 게 있다.

아래 코드의 (1) 에서 Cylinder는 타입으로 쓰였나 값으로 쓰였나


class Cylinder {
  radius = 1;
  height = 1;
}

function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) { // --- (1)
    shape; // 정상. 타입은 Cylinder  // --- (2)
		shape.radius; // 정상. 타입은 number  // --- (3)
  }
}

[효리] (1)은 값 (2), (3)은 타입? instanceof 자체가 자바스크립트 문법이니까 뒤에는 값공간이다. 블록 안에서는 타입을 이용해 읽어들인다.(타입추론 말씀하신듯)

[태호] Cylinder가 만약 interface였으면 instanceof에서 에러가 날 것. class가 값과 타입으로 모두 쓰일 수 있어서 instanceof 뒤에서 타입으로 쓰이는것 같다.

[진욱] 값 공간이면서 타입 공간인 것 같다. (런타임 에서도 동작하고 타입스크립트의 타입 추론도 해준다)

아래에서 shape의 타입이 ‘{}’가 되는 이유가 무엇인가?


interface Cylinder {
  radius: number;
  height: number;
}

const Cylinder = (radius: number, height: number) => ({radius, height})

function calculateVolume(shape: unknown) {
  if (shape instanceof Cylinder) {
    shape.radius;
    // ~~~~~~ Property 'radius' does not exist on type '{}'
  }
}

우선 Cylinder는 타입으로도 선언이 되어있고 함수로도 선언이 되어있는 상태

[동호] shape.radius와 같은 문법을 써서 {}로 추론해 주는 것 같다.

→ 값이면 빈 객체로 간주된다.

[진욱] Cylinder가 함수라서 {}로 추론해 주는 것 같다.

typeof 클래스? 클래스의 인스턴스 타입?

[효리] typeof 클래스, InstanceType<typeof 클래스> 등을 어느 상황에서 사용하는 것인지 궁금하다.

→ 멘토님에게 여쭤보기로 결정

공통된 속성 체크 관련


type WeakType = {
  some?: string;
  thing?: number;
  prop?: boolean;
};

const opts = { tHing: 12 };
const o: WeakType = opts;
// Type '{ tHing: number; }' has no properties in common with type 'WeakType

[효리] 오타 때문이 아닌가

[재희] 임시변수에 할당을 했기 때문에 오류가 없어야 하는데..(구조적 타이핑 관점에서) 약한 타입 에서만 공통된 속성 체크 때문에 오류가 발생한다.

할당 가능 검사와 잉여 속성 체크는 별도의 과정이다?

[효리] 별도의 과정이라는 말이 모호하다

[동호] 객체 리터럴을 통해서 할당하는 경우 개발자의 실수를 잡아주거나 편의를 위해 별도로 체크를 해주는것이 아닌가 (예를 들면 오타를 낼 가능성이 있다 → 구조적 타이핑 관점에서는 오타도 허용이 되니까 하신 말씀인듯)

[동호] 잉여 속성 체크 라는 말 대신 ‘엄격한 객체 리터럴 체크’라고 생각하는게 이해가 편하다.