1. 타입 스크립트란?

자바스크립트에 타입을 부여한 언어를 의미 합니다. ( 자바스크립트의 확장된 언어 )
타입스크립트는 자바스크립트와 다르게 브라우저에서 실행하기 위해서는 파일을 한번 변환 해주어야 합니다. (컴파일 과정)

타입 스크립트를 쓰면 좋은 점!

비동기를 통해 데이터를 받아 왔을 때 직접 데이터의 구조를 보거나 화면으로 표시해봐야 알 수 있습니다. ( 오류 유발 )

1. 타입 스크립트의 첫 번째 장점 : 에러를 사전에 방지할 수 있다!

자바스크립트
JSDoc : Javasript 소스코드 파일에 주석을 달기위해 사용되는 마크업언어입니다. JSDoc에 포함하는 주석을 사용하여 코드를 작성하고 인터페이스를 설명하는 문서를 생성할 수 있습니다.

var user = {};

/**
 * @typedef {object} Address
 * @property {string} street
 * @property {string} city
 */

/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {Address} address
 */

/**
 * @returns {Promise<User>}
 */
function fetchUser() {
  return axios.get(url);
}

fetchUser().then(function(response){
  // .을 찍으면 제공되는 속성을 볼 수 있어서 오타가 날 확률이 줄어 든다.
  response.address
})

자바스크립트의 데이터들에게 타입이 정해져 있을 때 장점은 아래와 같습니다.
브라우저로 넘어가서 실행하고 확인하기 전에 코드 상에서 바로 속성이 있는지 살펴볼 수 있다.
항상 브라우저로 실행해서 에러를 받아와서 확인할 필요가 없어집니다. ( 에러를 사전에 방지 )
이 부분을 편하게 사용할 수 있는 것이 타입 스크립트라는 것입니다.

또 다른 예제

기존의 js확장자로 파일 생성 및 일반 함수 구현

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

sum(10, '20') //결과값: 1020

타입 스크립트 변환 파일( sample.ts ), 확장자 ts 로 생성

function sum(a: number, b: number): number { //반환해주는 타입도 설정이 가능합니다.
    return a + b;
}
sum(10, 20); //타입스크립트의 추론: 반환값까지 알아서 추론해서 number로 설정 (반환해주는 타입을 설정하지 않을 때)

sum(10, '20'); //정해진 타입이 들어오지 않으면 코드상에서 오류를 확인할 수 있습니다.

2. 타입 스크립트의 두 번째 장점 : 코드의 자동완성!

해당 타입의 제공하는 API들을 자동완성시켜주고 빠르게 활용할 수 있습니다.
만약에 타입을 정해주지 않으면 직접 개발자가 모든 것을 입력해줘야 합니다. ( 이 때 오탈자 발생 확률 증가 )

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

var result = add(10, 20);
result. //result는 number로 인식하여 .을 찍으면 number에서 제공하는 API를 전부다 활용할 수 있고 자동완성이 생겨서 바로바로 활용할 수 있다.

자바스크립트로 타입스크립트 흉내내기

// @ts-check

/**
 * @param {number} a 첫번째 숫자 (인자 이름 옆에 텍스트 입력시 사용방법도 프리뷰에 보여줄 수 있다.)
 * @param {number} b 두번째 숫자
 */

//마우스로 sum함수를 보게 되면 타입이 프리뷰로 보여지게 됩니다.
function sum(a, b){
    return a + b;
}

//하지만 타입스크립트 파일 처럼 잘못되었다는 오류를 알려주지는 않습니다. 이 부분도 타입 스크립트 효과를 주기 위해서는 상단에 @ts-check을 주석으로 추가하면 가능합니다. 
sum(10, '20');