[개념정리] 코딩앙마 유튜브로 타입스크립트 입문하기 1

1. Typescript를 사용하는 이유

Typescript는 브라우저가 읽을 수 없기 때문에, 컴파일 시에는 Javascript로 변환하는 과정을 거친다. 그럼에도 불구하고 굳이 Typescript를 사용하고, 다시 Javascript를 거쳐 브라우저로 렌더링하는 프로세스로 작업하는건 왜그럴까? 개발자들은 왜 Javascript로 만족하지 않고, Typescript에 열광하는 걸까?

function add(num1, num2) {
  console.log(num1 + num2);
}

add(); // Nan
add(1); // Nan 
add(1, 2); // 3
add(3, 4, 5); // 7 (아니 12가 아니고?)
add('hello', 'world'); // 'helloworld'

Javascript로 위와 같은 함수를 선언하고, 각기 다른 매개변수를 넣어 테스트 해보면, 유효하지 않은 값을 반환하거나, 불필요한 매개변수가 포함되었을때도 Javascript를 작성할 때에는 눈치를 챌 수 없다. 정상적인 코드인 것처럼 보이고, 실행하는 순간 NaN을 반환하거나 매개변수를 사용하지도 않고 함수에 해당하는 매개변수 일부만 활용하고는 코드 실행 완료했다! 고 외치는 것이다. 아니 거 제대로 확인한 거 맞아?

function showItems(arr) {
  arr.forEach(item) => {
    console.log(item);
  });
}

showItems([1,2,3]); // 1 2 3 개별 값 반환
showItems(1,2,3); // Uncaught TypeError: arr.forEach is not a function

2번째 코드는 Array 인자를 받아 배열메소드 forEach()를 돌려야 하는 함수이다. 배열을 넣었을 경우 원했던 방식 대로 배열의 개별 인자를 반환해주지만, 배열이 아닌 값을 넣은 경우 이를 코드 실행 시 별도의 경고가 없었음에도 불구하고 코드를 실행시키면서 타입에러를 반환해버린다. 런타임 시에 오류를 반환하면, 문제없는 줄 알고 배포해버린 나는 어떡해🙄

JavaScript (동적언어) :

• 런타임 시 타입이 결정된다.
  (컴파일 시 별도의 경고가 없었다가 런타임 시에 오류를 반환하는 경우가 많다.)

Java, TypeScript (정적언어) :

• 컴파일 타임에 타입이 결정된다.
  (컴파일 시에 오류를 감지하여 배포 전 오류를 미연에 방지할 수 있다.)

위 2가지 예제를 TypeScript로 작성했을때를 보자.

function add(num1:number, num2:number) {
  console.log(num1 + num2);
}

//add(); // 에디터에서 빨간줄이 생긴다.
//add(1); // 에디터에서 빨간줄이 생긴다.
add(1, 2); // 3
//add(3, 4, 5); // 에디터에서 5 인자에 빨간줄이 생긴다.
//add('hello', 'world'); // 타입을 추가함에 따라 빨간줄이 생긴다.

function showItems(arr:number[]) {
  arr.forEach(item) => {
    console.log(item);
  });
}

showItems([1,2,3]); // 1 2 3 개별 값 반환
//showItems(1,2,3); // 배열이 아니므로 빨간 줄이 생긴다

2. TypeScript 기본 타입

//스트링, 타입 추론
let car:string = 'bmw';
let car = 'bmw'; //따옴표를 통해 타입추론이 가능하여, 타입 생략이 가능하다.

//넘버
let age:number = 30;
let isAdult:boolean = true;

//어레이 (숫자형 배열)
let a:number[] = [1,2,3];
let a2:Array<number> = [1,2,3] // 2가지 표기 모두 동일하다.

//튜플(Tuple)
let b:[string, number];
b = ['z',1]
// b = [1, 'z']

b[0].toLowerCase(); // 0번째 인자가 String이므로 가능
// b[1].toLowerCase(); // 1번째 인자는 Number이므로 불가

// void, never
//void
funtcion sayHello():void{
  console.log('hello') // 로그를 찍고 아무것도 반환하지 않으므로, void 타입
}
//never
function showError():never{
  throw new Error(); // 항상 에러를 반환하는 함수
}

function infLoop():never{
  while (true) {
    // do something.. // 영원히 끝나지않는 함수 타입에 사용
  }
}

// enum
enum Os {
  Window = 3,
  Ios, // Window를 3으로 지정 시 자동으로 4로 지정
  Android // Window를 3으로 지정 시 자동으로 5로 지정
}

// enum 2
enum Os {
  Window = 'win',
  Ios = 'ios',
  Android = 'and'
}

let myOs:Os;

myOs = Os.Window 
// Os`.` 하위에는 Os에 지정되어있는 Window, Ios, Android 3가지만 올 수 있게 된다.
// 특정값만 입력하도록 강제하고 싶을 때, 그 값들이 공통점이 있을 때 enum 타입을 사용한다.

// Null, undefined
let a:null = null;
let b:undefined = undefined;