타입스크립트 - 타입 검사 방식

객체 리터럴을 대입했는지, 변수를 대입했냐에 따라 타입 검사 방식이 달라짐

객체 리터럴?

사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법
중괄호{} 안에 프로퍼티를 정의함

객체 리터럴로 대입했을 때?

잉여 속성 검사가 실행됨
타입 선언에서 선언하지 않은 속성을 사용할 때 에러를 표시하는 것을 의미

interface Example {
  hello: string;
}

const example: Example = {
  hello: "hi",
  why: "에러난당"
  // Error!
  // Object literal may only specify known properties, and 'why' does not exist in type 'Example'.(2353)
};

변수를 대입

객체 간의 대입 가능성을 비교

interface Example {
  hello: string;
}
const obj3 = {
  hello: "hi",
  why: "이건 에러 안난당"
};
const example2: Example1 = obj3;

좁은 타입은 넓은 타입에 대입할 수 있지만, 넓은 타입은 좁은 타입에 대입할 수 없음

interface AA {
  name: string;
}
interface BB {
  name: string;
  age: number;
}
const aObj = {
  name: "좁은 타입"
};
const bObj = {
  name: "넓은 타입",
  age: 123
};
// 좁은 타입은 넓은 타입에 대입 가능
const aToA: AA = aObj;
const bToA: AA = bObj;

// 넓은 타입은 좁은 타입에 대입할 수 없음
// Property 'age' is missing in type '{ name: string; }' but required in type 'BB'
const atoB: BB = aObj;
const bToB: BB = bObj;

튜플과 배열

튜플은 배열보다 좁은 타입
튜플은 배열에 대입할 수 있고 배열은 튜플에 대입할 수 없음

// 튜플
let aaa: ["hi", "readonly"] = ["hi", "readonly"];

// 배열
let bbb: string[] = ["hi", "normal"];

// Error!
// Type 'string[]' is not assignable to type '["hi", "readonly"]'.
aaa = bbb;

bbb = aaa;

옵셔널 객체, 옵셔널이지 아닌 객체

옵셔널인 객체가 옵셔널이지 않은 객체보다 더 넓은 타입
옵셔널이지 않은 객체는 옵셔널인 객체에 대입할 수 있고, 옵셔널인 객체는 옵셔널이지 않는 객체에 대입할 수 없음

type Fruits = {
  a?: string;
  b?: string;
};
type Fruits2 = {
  a: string;
  b: string;
};

// 옵셔널인 객체
const orange: Fruits = {
  a: "hello"
};
// 옵셔널이지 않은 객체
const apple: Fruits2 = {
  a: "hello",
  b: "world"
};

const orange2: Fruits = apple;

// Error!
// 옵셔널 타입은 기존타입 | undefined 로 기존 타입보다는 넓은 타입이기때문에 오류가 발생함
const apple2: Fruits2 = orange;