타입스크립트 소개와 배경

🔹 타입스크립트란?

• 자바스크립트에 타입을 부여한 언어
  -> 자바스크립트의 확장된 언어
• 자바스크립트와 다르게 브라우저에서 실행하기 위해 파일을 변환해주어야 한다
  -> "컴파일(compile)" 이라고 한다.

🔹 왜 타입스크립트를 쓰면 좋은가?

1. 에러를 사전 방지
2. 코드 가이드 및 자동완성 하므로서 개발 생산성을 향상 시켜준다.

에러의 사전 방지

js

function sum(a,b){
  return a + b;
}
sum(10,20) // 30
sum(10,"20") // 1020

ts

function add(a: number, b:number) {
  return a + b 
}

add(10,"20") // 1020

sum(10,"20") 처럼 의도 하지 않은 코드의 동작을 ts를 통해 오류를 예방할수 있다.

코드 자동 완성과 가이드

• 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다.

ts

function add(a: number, b:number): number {
  return a + b;
}

let result = add(20, "20");

result.toLocaleString() // 자동완성으로 작성

result.을 입력 하면 아래와 같이 기능들을 보여준다.

🔹 자바스크립트를 타입스크립트처럼 코딩하는 방법

• js파일 상에서 ts처럼 사용 하고 싶을때 작성하는 문법

/**
 * 
 */

js를

function sum(a,b){
	return (a + b)
} 

sum(10, "20") // "1020";

ts처럼

// @ts-check

/**
 * 
 * @param {number} a 
 * @param {number} b 
 */

function sum(a, b) {
  return (a + b)
}

sum(10,'20')

• 함수명에 커서를 가져다 놓으면 ts에서 자동으로 설정한 기능들을 보여준다.
  

• // @ts-check 를 상단에 사용해 주면 ts와 같이 오류를 찾아내 준다.
  

참고
타입스크립트 원문
타입스크립트 핸드북
캡틴판교_타입스크립트 입문