[Typescript] Section 01. 타입스크립트 소개와 배경

1. 타입스크립트란?

• 타입스크립트는 자바스크립트에 타입을 부여한 언어
• 자바스크립트의 확장된 언어
• 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 javascript 파일로 변환하는 과정을 거쳐야 됨. 이러한 변환 과정을 우리는 컴파일(complile) 이라 함

2. 타입스크립트에서 컴파일 이란

• ts파일을 js파일로 변환하는 과정

3. 왜 타입스크립트를 쓰면 좋은가요?

• 에러의 사전 방지
• 코드 가이드 및 자동 완성(개발 생산성 향상)

4. 자바스크립트에 타입이 있을 때의 첫 번째 장점

• 타입스크립트가 없을 때는 jsDoc을 이용해 타입을 설정했었는데  코드에 종속성이 생겨 관리하기가 힘들어짐

💡 jsDoc와 Typescript 차이점
- jsdoc은 자바스크립트에 바로 적용할 수 있다.

- 타입스크립트는 코드 내에 직접 타입을 선언하고 후에 컴파일러가 타입 관련 코드를 삭제하여 자바스크립트로 변환하고 실행을 진행한다면, jsdoc은 주석 내부에 특정한 형식으로 타입을 선언한다.

 - jsdoc은 주석이기 때문에 타입에러가 난다고 해서 타입스크립트처럼 트랜스파일중에 에러를 뱉어내는 것이 아니고, 그냥 타입 힌팅과 코드 인텔리전스만 정상적으로 작동하지 않는다.

/**
 * @typedef {Object} Address
 * @property {string} street
 * @property {string} suite
 * @property {string} city
 * @property {string} zipcode
 * */

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

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

getUser().then(function (response) {
  username.innerText = response.name;
  email.innerText = response.email;
  address.innerText = user.address.street;
});

5. 자바스크립트에 타입이 있을 때의 두 번째 장점

//math.ts

function sum(a: number, b: number): number {
  return a + b;
}
const test1 = sum(10, 20);
// sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

console.log(test1);

//math.js

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

const test1 = sum(10, 20); // 30
const test2 = sum("10", "20"); // 1020

console.log(test1, test2);

 

• 자바스크립트인 경우에는 타입이 없기 때문에 개발자가 의도하지 않은 결괏값이 나올 수 있지만 타입이 있는 경우 런타임 에러가 발생하기 전에 개발자에게 타입에러를 알려줌