반응형
타입 추론
타입을 일일이 정하면서 하면 생산성이 떨어질 수 있다. 그래서 자바스크립트처럼 평범하게 코드를 작성해도 타입이 자동으로 추론하여 정해지는 기능이 있다.
let v1 = 123;
let v2 = 'abc';
v1 = 'a'; //오류. 숫자 타입이 들어와야함
v2 = 456; // 오류. 문자열 타입이 들어와야함
위의 코드처럼 자바스크립트처럼 평범하게 작성하여도 타입스크립트에서는 v1과 v2에 들어간 값에 대해 타입을 자동으로 추론하여 타입을 지정할 수 있다.
const v1 = 123;
const v2 = 'abc'
let v3: typeof v1 = 234; //v3 타입 오류.
대신 let과 달리 값의 변화에 엄격한 const는 타입이 123 및 'abc' 그 자체가 되며 typeof로 v1을 타입을 추출하여 v3에 지정해주었는데 234와 123은 타입이 맞지 않아 오류가 등장한다.
const arr1 = [10, 20, 30];
const [n1, n2, n3] = arr1;
arr1.push('a'); //타입 오류. 숫자 타입이 들어가야함.
const obj = { id: 'abcd', age: 123, language: 'korean' };
const { id, age, language } = obj;
console.log(id === age); //타입 오류. id는 문자열, age는 숫자열 타입이므로 서로 다른 타입이다.
- 위의 코드처럼 비구조와 배열 및 객체로 표현한 자바스크립트 언어에서도 타입이 자동으로 추론되어 타입이 정해진 것을 결과로 확인할 수 있다.
- n1, n2, n3에는 arr1 배열에 들어가 있는 숫자 타입에 인하여 arr1은 number[]으로 숫자 타입 배열이 추론되었고 obj 객체에 들어가 있는 값들의 각각의 타입에 따라 id, age, language에 타입이 차례대로 추론되었다.
interface Person {
name: string;
age: number;
}
interface Korean extends Person {
liveInSeoul: boolean;
}
interface Japanese extends Person {
liveInTokyo: boolean;
}
const p1: Person = { name: 'jin', age: 25 };
const p2: Korean = { name: 'jin', age: 25, liveInSeoul: true };
const p3: Japanese = { name: 'jin', age: 26, liveInTokyo: false };
const arr1 = [p1, p2, p3];
const arr2 = [p2, p3];
- arr1은 p2와 p3가 동시에 p1인 Person에 할당이 가능하므로 합쳐지는 의미로 삭제되고 타입이 Person[] 만이 남게 된다.
- arr2는 p2와 p3 밖에 없고 둘이 서로 다른 타입을 가지고 있어 할당 관계가 아니므로 union 구조로 Korean | Japanese 로 타입이 정해진다.
function func1(a = 'abc', b = 10){ //a에 숫자도 들어가게 하고 싶다면 a: number | string = 'abc'
return `${a} ${b}`
}
func1(3, 6); //첫번째 인자 타입 오류. 문자열이 들어가야함.
const v1: number = func1('a', 1); //반환값 타입 오류. 문자열이 들어가야함.
function func2(value: number) {
if(value < 10) {
return value;
}else {
return `${value} is too big`;
}
}
- 위의 코드처럼 함수에서도 추론이 가능하다. func1 인자에 'abc'라는 문자열 타입, 10이라는 숫자열 타입 그리고 반환 값에 리터럴 문자를 쓴 `${a} ${b}`이다.
- 즉 추론하면 첫 번째 인자에는 문자열 타입, 두번 째 인자에는 숫자열 타입 반환값은 문자열이어야 하는 타입 정의가 이루어진다.
- func2 함수 또한 인자 타입 숫자열, 반환 타입은 숫자열 | 문자열로 보면된다.
반응형
'프로그래밍 개발 > Typescript' 카테고리의 다른 글
Typescript 타입 가드 (0) | 2021.05.11 |
---|---|
Typescript 조건부 타입 (0) | 2021.05.10 |
Typescript 맵드 타입(mapped type) (0) | 2021.05.10 |
Typescript 재네릭 (0) | 2021.05.07 |
Typescript 타입 호환성 (0) | 2021.05.07 |
댓글