<aside> ❓ 객체 리터럴이 아닌 변수를 대입할 때는 잉여 속성 검사가 진행되지 않음 변수를 대입할 때는 객체 간에 대입할 수 있는지 여부를 따져봐야 함 → 어떻게 확인하는지 알아보자.

</aside>

넓은 타입에 좁은 타입을 대입할 수 있다.

기본 예제

interface A {
	name: string;
}

interface B {
	name: string;
	age: number;
}

const objA = {
	name: 'eunji',
}

const objB = {
	name: 'minji',
	age: 28,
}

const objAToA: A = objA;
const objBtoA: A = objB;
const objAToB: B = objA; // 에러 발생 
const objBtoB: B = objB;

• 이 경우 objA 를 인터페이스 B 에 대입하는 경우만 에러가 생긴다.
• 이는 좁은 타입은 넓은 타입에 대입할 수 있지만, 넓은 타입을 좁은 타입에 대입할 수 없기 때문
  • 위의 경우 objA의 타입이 넓은 타입
  • 인터페이스 B가 좁은 타입
• 헷갈릴 수 있는데, 구체적일수록 코드가 많아지고 이는 좁은 타입을 의미한다고 생각해야 함
  • 즉, { name: string; } 이 더 넓은 타입
  • { name: string; age: number’ } 가 더 좁은 타입

집합 관계 예제

interface A {
	name: string;
}

interface B {
	age: number;
}

function test(): A | B {
	if (Math.random() > 0.5) {
		return { age: 28 };
	}
	return { name: 'eunji' };
}

• A | B 는 다음에 대입 가능할까?
  • A → 대입 불가 (더 좁음)
  • B → 대입 불가 (더 좁음)
  • A & B → 대입 불가 (더 좁음)

튜플/배열 예제

<aside> 📌 튜플은 배열보다 좁은 타입이다. (튜플은 배열에 대입할 수 있다.)

</aside>

let a: ['a', 'b'] = ['a', 'b'];
let b: string[] = ['a', 'b'];

a = b; // 에러 발생: b(배열)를 a(튜플)에 대입할 수 없음
b = a; // a를 b에 대입할 수 있음 

<aside> 📌 readonly 수식어가 붙은 배열이 일반 배열보다 더 넓은 타입이다.

</aside>

let a: readonly string[] = ['a', 'b'];
let b: string[] = ['a', 'b'];

a = b; // a에 b를 대입할 수 있음
b = a; // 에러 발생: a를 b에 대입할 수 없음 

<aside> 📌 readonly 수식어가 붙은 튜플과 일반 배열은 서로 대입할 수 없다. 단, 객체의 속성에 readonly 속성이 붙은 경우 서로 대입할 수 있다.

</aside>

let a: readonly ['a', 'b'] = ['a', 'b'];
let b: string[] = ['a', 'b'];

a = b; // 에러 발생: b를 a에 대입할 수 없음 
b = a; // 에러 발생: a를 b에 대입할 수 없음 

type Ex1 = {
	readonly a: string;
	readonly b: string;
}

type Ex2 = {
	a: string;
	b: string;
}

const obj1: Ex1 = {
	a: 'a',
	b: 'b',
}

const obj2: Ex2 = {
	a: 'aa',
	b: 'bb',
}

const ex1: Ex1 = obj2; // 대입 가능
const ex2: Ex2 = obj1; // 대입 가능