TypeScript란?

자바스크립트 대체 언어의 하나로써 자바스크립트의 상위확장이다.
TypeScript는 Microsoft에서 2012년 발표한 오픈소스로
정적 타이핑을 지원하며 ES6의 클래스, 모듈 등과 ES7의 Decorator 등을 지원

JavaScript와 차이

JavaScript

let hello = 'hello'
console.log(typeof hello) // string

위와 같은 hello라는 변수를 선언할 때 JavaScript는
동적으로 변수의 Type을 추론한다.

아래와 같이 다른 Type의 값을 넣었을 때 JavaScript에서는 잘 작동한다.

hello = 4
console.log(typeof hello) // number

하지만 TypeScript에서는 아래와 같이 변수 선언을 할때
정적으로 타입을 지정해 사용할 수 있다.

TypeScript

let hello: string = 'hello'
console.log(typeof hello) // string

JavaScript에서 사용했던 것과 같이 변수에 다른 타입 데이터를
저장하려고 하면 오류가 발생한다.

// hello = 4; 사용 불가

이는 해당 변수를 사용할 때 사용자가 입력한 값이 유효한지 검사할 때
변수의 Type이 맞는지 검사하는 조건문을 줄여줄 수 있게된다.

함수에서의 TypeScript

아래와 같이 함수의 Parameter의 타입을 정할 수 있다.
지정한 Type과 다른 Type의 값이 들어온다면 실행되지 않을 것이다.

const plus = (a: number, b: number) => a + b
console.log(plus(1, 2)) // 3

// console.log(plus("NotWork", 2));

또한 반환값의 Type도 지정할 수 있다.

const greet = (name: string, age: number): string => {
  return `Hello ${name} you are ${age} years old`
}
console.log(greet('Minsu', 21))
// Hello Minsu you are 21 years old

위의 함수는 Parameter로 string하나와 number하나를 받고
string을 반환하도록 명시되어있는 함수다.

// const greet = (name: string, age: number): string => {
//   console.log(`Hello ${name} you are ${age} years old`);
// };

이전의 함수를 string을 반환하지 않고 위와 같이 사용한다면 에러가 발생한다.
TypeScript의 정적 타이핑은 개발자들이 쉽게 할 수 있는 실수를 줄여줄 것이다.