Typescript (타입추론, Best Common Type, Typescript Language Server, 타입단언)

타입추론

타입스크립트가 타입 추론을 해나가는 과정

const num = 10 // 초기화 할때 num이 number로 추론되어진다.

이외 함수의 반환값, 인자의 기본값등을 설정할 때도, 타입추론이 일어난다,

 

그럼 기본적인거 말고 바로 심화적인 인터페이스와 제네릭을 이용한 복잡한 구조에서의 타입 추론을 한번 봐 보자,

코드레벨에서 확인해보면 DepatureTime의 제네릭 형태에서 따라 Time의 time값의 추론도 이루어진다는 걸 알 수 있다,

interface Time<T> {
  time: T; // 시간값 숫자 혹은 문자
  kind: string
}

interface DepatureTime<K> extends Time<K> {
  address: string;
  cost: K // 비용 숫자 혹은 문자
}

var ticketTime: DepatureTime<string> = {
  time: '2days',
  address: 'Busan',
  cost: '100,000,000',
  kind: 'jejuairplane'
}

var ticketTime2: DepatureTime<number> = {
  time: 48,
  address: 'Busan',
  cost: 100000000,
  kind: 'jejuairplane'
}

Best Common Type

결국 이것도 타입추론에 들어가는 요소라고 보는데,

말 그대로 가장 적절한 타입 변수를 초기화 할때 무엇이 들어갔냐에 따라 제일 적절한 타입을 추론해준다.

 

 

Typescript Language Server

타입추론으로 자동완성이나 코드레벨에서 추론을 할때 어떻게 가능한가 보면,

이미 VSCode에 타입스크립트 언어 서버가 내장되어 있기 때문에 위의 타입추론들이 가능해지는것이다.

 

자세한 내용의 밑의 공식문서를 참조

code.visualstudio.com/docs/languages/typescript

TypeScript Programming with Visual Studio Code

타입단언

개발자가 타입스크립트보다 타입을 더 확실하게 알 수 있을때, 사용하는 친구

let a; // let a:any

a = 10;
a = 'abc'

let b = a // let b:any;
/* 하지만 여기서 개발자라면 b가 문자라는것을 알 수 있 다.*/

/* 타입 박아버리기 */
let c = a as number // let c:number 

 

자주 사용되는 곳이  DOM API를 조작할 때 많이 사용 

var div = document.querySelector('div'); // div가 있다는 보장이 없기 때문에 innerText에 바로 접근할 수 없다.
// div.innerText
var div2 = document.querySelector('div') as HTMLDivElement; // 개발자가 타입스크립트보다 타입을 더 잘 알수 있을때 타입단언!
div2.innerText

innerText API를 부를때 에러

타입가드

타입스크립트는 두개 이상의 타입을 합쳐서 유니온 타입(합집합)을 만들 수 있는데 예를 들면

type SI = {
  뻥튀기: string;
  수수료: string;
  악덕사장: string;
};

type Free = {
  뻥튀기: string;
  수수료: string;
  에이전시: string;
};

type 끔찍한혼종 = SI | Free;

이렇게되면 끔찍한혼종은 뻥튀기, 수수료, 악덕사장, 에이전시라는 요소(타입)들을 가지게 되지만,

모든 요소들을 정의해서 넣어도 객체에 보장되는 타입은 공통된 속성인 뻥튀기와 수수료 밖에 없다.(이하의 사진 참조) 

이러한 유니온 타입의 인자를 처리할 때 정확히 어떤 타입인지 검사해야 할 경우가 있는데 이것을 타입 가드라고 한다.

 

타입가드를 위한 isFree 함수를 선언해 어떤 객체인지 판별할 수 있는 함수를 만든다.

그렇게 되면 객체에는 이하의 사진처럼 해당 객체타입의 요소가 추론되는걸 볼 수 있다.

 

타입호환

 

존나 귀찮군