Typescript 타입 호환성

타입 호환성

 

• 타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것이다. 타입 호환성을 위해서는 컴파일 타입에 호환되지 않는 타입을 찾아내어야 한다.
• 예를 들어 어떤 변수가 다른 변수에 할당 가능하기 위해서는 해당 변수의 타입이 다른쪽 변수의 타입에 할당 가능해야하는데 할당 가능의 판단 조건은 값의 집합을 생각하면 쉽다.
• 즉 어느 변수 타입이 들어갈 수 있는 값이 작으면 들어갈 수 있는 값이 자신보다 많은 변수 타입에 할당될 수 있다.

 

function func1(a: number, b: number | string){
    const v1: number | string = a;
    const v2: number = b; // 오류 할당 x
}
function func2(a: 1 | 2){
    const v1: 1 | 3 = a; // 오류 할당 x
    const v2: 1 | 2| 3 = a;
}

• 위의 코드는 타입 호환성에 대한 간단한 예인데 func1의 함수를 보면 v1의 타입의 값의 집합이 a보다 더 크기 때문에 값의 집합이 작은 a는 v1에 할당이 가능하다고 판단하고 있다.
• 하지만 b는 v2보다 값의 집합이 크기 때문에 할당할 수가 없어 오류가 등장한다.

 

 

 

 

인터페이스 A가 인터페이스 B에 할당할 수 있는 조건

 

1. B에 있는 모든 필수 속성 이름이 A에도 존재한다.

2. 같은 이름 속성에 대해 A 속성은 B 속성에 할당 가능해야 한다. 

interface Person {
    name: string;
    age: number;
}
interface Product {
    name: string;
    age: number;
}

const person: Person = { name: 'jin', age: 26};
const product: Product = person; //할당 가능

타입 이름이 서로 다르지만 타입 내부 구조가 같은 할당이 가능하다. 하지만 만약 Person 타입의 age를 지우게 되면 곧바로 할당 불가능하는 오류가 등장할 것이다.

 

 

interface Person {
    name: string;
 
}
interface Product {
    name: string;
    age: number;
}

const obj = { name: 'jin', age: '23', city: 'seoul'};
let person: Person = obj;
let product: Product = obj; //할당 오류

product = person //할당 오류
person = product

• 더 심화된 응용해보자면 Product 타입은 obj을 할당하지 못하는데 그 이유로 obj 객체의 age가 문자열이기 때문에 할당이 되지 않았다. 즉 타입 조건이 많을 수록 할당에 더 까다롭다는 소리이다.
• 그래서 들어 갈 수 있는 값의 집합이 작은 product에 값의 집합이 큰 person은 할당되지 않게 되었다.

 

 

interface Person {
    name: string;
    age?: number;
 
}
interface Product {
    name: string;
    age: number;
}

const obj = { name: 'jin' };
let person: Person = obj;
let product: Product = obj; //할당 오류

• 위 코드는 obj 객체 자체가 product의 더 많은 타입 조건에 부족하여 obj가 할당하지 못하는 경우이다.
• product에는 age 타입 조건이 있지만 obj에서는 age가 정의되어 있지 않다. 하지만 person에는 선택 속성이 있으므로 age가 정의되지 않아도 되어 할당이 가능하다.
• 즉 Person이 값을 입력할 수 있는 타입의 값의 크기가 더 크다고 볼 수 있다.

 

 

 

 

 

함수 타입 A가 함수 타입 B로 할당 가능하기 위한 조건

 

1. A의 매개변수 개수가 B의 매개변수 개수보다 적어야 한다.

2. 같은 위치의 매개변수에 대해 B의 매개변수가 A의 매개변수로 할당 가능해야 한다.

3. A의 반환값은 B의 반환값으로 할당 가능해야 한다.

 

type F1 = (a: number, b: string) => string;
type F2 = (a: number, b: string | number) => string;
type F3 = (a: number) => string;
type F4 = (a: number, b: string) => number | string;
let f1: F1 = (a, b) => `${a} ${b.length}`;
let f2: F2 = (a, b) => `${a} ${b}`;
let f3: F3 = (a) => `${a}`;
let f4: F4 = (a) => (a < 10 ? a : 'too big');

f1 = f3
f3 = f1 //할당 오류

f1 = f2
f2 = f1 //할당 오류

f4 = f3
f3 = f4 //할당 오류