Typescript

[Typescript] 타입 호환

joy_lee 2022. 8. 29. 21:11

타입 호환

타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미한다. 내부 구조와 타입을 확인한다.

 

인터페이스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 타입 호환 - 인터페이스
interface Developer {
  name: string;
  skill: string;
}
interface Person {
  name: string;
}
 
let developer: Developer = {
  name"dev",
  skill: "typescript"
}
let person: Person = {
  name"person"
}
 
// developer = person; // 에러 생성 구조적으로 작은 타입을 큰 타입에 할당할 수 없다.
person = developer; // 에러 안뜸
cs

 

Developer형식인 developer와 Person형식인 person을 만든다.

Person 은 name만 가지고 있고, Developer는 name과 skill을 가진다.

구조적으로 작은 객체(Person타입)는 구조적으로 큰 객체(Developer타입)에 할당할 수 없지만 반대는 가능하다.

(developer에서는 skill이 필수적인데 person에는 skill이 존재하지 않아서 불가능함)

구조적으로 큰 타입 ← 구조적으로 작은 타입 : 할당 불가(타입호환 불가)

구조적으로 작은 타입 ← 구조적으로 큰 타입 : 할당 가능(타입호환 가능)

 

 

클래스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 타입 호환 - 클래스
interface
 Developer {
  name: string;
  skill: string;
}
 
class Person {
  name: string = '';
}
 
var developer: Developer;
var person: Person;
 
// developer = new Person; // 에러 생성 - 구조적으로 작은 객체를 큰 객체에 할당할 수 없다.
person = developer; // 에러 안뜸
cs

 

클래스의 경우에도 내부적으로 존재하고 있는 속성과 속성의 타입을 비교해 호환될 수 있는 타입인지 확인한다.

인터페이스와 동일한 방식을 따른다.

 

 

 

함수

 

1
2
3
4
5
6
7
8
9
10
11
12
13
// 타입 호환 - 함수
var add = function(a: number) {
  // ...
}
 
var sum = function(a: number, b: number) {
  // ...
}
 
// sum이 add보다 구조적으로 크다.
// add = sum; // error
sum = add; // 호환가능
 
cs

함수의 경우는 위의 인터페이스나 클래스의 경우와 다르다.

sum은 인자를 두 개 받을 수 있고, add는 한 개만 받을 수 있다. add에 sum을 할당하면 add를 통해서는 인자를 하나밖에 받지 못하므로 sum에서 요구하는 두 번째 인자를 넘겨줄 수 없다. 그러므로 함수의 경우에는 구조적으로 작은 함수를 큰 함수에 할당할 수 있다.

구조적으로 작은 함수 ← 구조적으로 큰 함수 : 할당 불가(타입 호환 불가)

구조적으로 큰 함수 ← 구조적으로 작은 함수 : 할당 가능(타입 호환 가능)

 

 

 

제네릭

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 타입 호환 - 제네릭
interface Empty<T> {
  // ...
}
var empty1: Empty<string>;
var empty2: Empty<number>;
empty1 = empty2; // 가능
empty2 = empty1; // 가능
 
interface NotEmpty<T> {
  data: T;
}
var notEmpty1: NotEmpty<string>;
var notEmpty2: NotEmpty<number>;
// notEmpty1 = notEmpty2; // error 구조적 차이가 생겨서 서로 호환 안됨
// notEmpty2 = notEmpty1; // error
cs

제네릭의 경우, 비어있는 Empty의 경우, 제네릭으로 어떤 타입을 넣어줘도 호환이 가능하다.

제네릭에 의해 내부의 값이 바뀌는 NotEmpty<T>는 제네릭으로 다른 형식을 넣어주면 호환할 수 없다.

 

 

강의

https://inf.run/htNe

 

타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의

타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관

www.inflearn.com