타입스크립트를 쓰는 이유는 타입을 추론받기 위해서이다.

타입스크립트는 코드가 어떤 원시값인지 판단을 한다. (String,number,boolean 등)

추론

타입스크립트는 기본적으로 코드에서 변수를 선언하거나 할당할때 추론이 일어난다.

let 혹은 const 등 선언할때 선언된 값으로 추론을 기본으로 한다.

let x = 3; //number 로 기본 추론이 일어난다. 

또한 함수를 선언하고 파라미터에 기본값을 넣으면 추론이 일어난다.

function sum(a=1,b=2){
Return a+b } 
//a,b는 number 라고 추론한다. 

배열안에 여러 타입이 정의된 경우 추론은 유니온 타입으로 정의된다.

단언 type assertion

타입스크립트에서 추론하는 값보다 개발자가 변수 타입을 잘알고 있을때 원하는 타입을 강제로 부여한다.

as 구문으로 사용하는데 (type assertion)의 약자 인것 같다.
왜 as를 사용하나 했는데 여기서 의문이 풀렸다.

주로 DOM Api 를 조작할때 가장 많이 사용한다고 한다.  (querySelector, getElementById 등등)

let a;
a = "20";
a = 10;
let b = a;
// ts에서 a는 any로 추론하기 때문에 b도 any라고 ts는 추론한다.
// 그러나 개발자는 b가 10
// 즉, number임을 알기 때문에 b에 number를 강제로 assertion 한다

let b = a as number;
 
div 에 container라는 class가 없을 수도 있기 때문에 아래와 같이 방어하기 위해 코드를 짜게 된다. 
let div = document.querySelector(".container");
if (div) {
  div.innerText = "...";
}

여기서 단언을 해서 무조건 contatiner class가 있다고 확신한다면 개발자는 아래와 같이 코드를 짜면 된다.

let div = document.querySelector(".container") as HTMLDivElement;

div.innerText = "...";

타입 가드

함수의 파라미터로 유니온 타입이 지정되는 경우 타입이 2개 이상임으로 공통되는 속성만 사용이 가능하다.

interface Dev {
  name: string;
  skill: string;
}
interface Person {
  name: string;
  age: number;
}

function introduce(): Dev | Person {
  return { name: "d", age: 33, skill: "c" };
}
const tony = introduce(); // Dev | Person 으로 공통된 속성만 사용가능. 즉, tony.skill 불가

// skill을 빼고 싶다면? -> type assertion으로 사용 가능
if ((tony as Dev).skill) {
  console.log((tony as Dev).skill);
} else if ((tony as Person).age) {
  console.log((tony as Person).age);
}
// 너무 assertion을 많이 씀으로 타입 가드 함수를 만든다.

// 타입 가드 정의
// target is Dev -> 넘겨 받은 파라미터가 해당 타입인지를 확인
function isDev(target: Dev | Person): target is Dev {
  // skill이 있다면 Dev이다
  return (target as Dev).skill !== undefined;
}
if (isDev(tony)) {
  // name, skill 사용 가능
  console.log(tony.skill);
} else {
  // name, age 사용 가능
  console.log(tony.age);
}

출처
기억보다 기록을 페이지 정리된 내용을 보고 정리하였습니다.

예시 등도 가져와서 몇개는 변화해서 활용하였습니다.