본문 바로가기
프로그래밍 개발/Typescript

Typescript 타입 추론

by Jinseok Kim 2021. 5. 11.
반응형

타입 추론

 

타입을 일일이 정하면서 하면 생산성이 떨어질 수 있다. 그래서 자바스크립트처럼 평범하게 코드를 작성해도 타입이 자동으로 추론하여 정해지는 기능이 있다.

 

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

댓글