TypeScript 1일차_타입스크립트 개발환경 구성

# TypeScript

## 개발환경 구성

• https://github.com/joshua1988/learn-typescript 

GitHub - joshua1988/learn-typescript

• Chrome
• Visual Studio Code
• Node.js LTS 버전 (v10.x 이상)
• Git

리포지토리 클론 및 VSCode로 폴더 열기

• 위 깃헙 접속하여 Clone, 원하는 폴더 위치에서 터미널 오픈(윈도우의 경우 cmd) 아래와 같이 입력하여 Clone 진행

C:\study>git clone https://github.com/joshua1988/learn-typescript.git

• VS Code 실행 후 Clone 해온 폴더 드래그 앤 드랍으로 실행.

VS Code 플러그인 설치 및 구성

• 왼쪽 플러그인(확장) 클릭하여 아래 플러그인 설치 진행.
• 색 테마 : Night Owl
• 파일 아이콘 테마 : Material Icon Theme
• 문법 검사 : ESLint, TSLint
• 실습 환경 보조 : Live Server
• 기타 : Prettier, Project Manager, Auto Close Tag, GitLens, Atom Keymap, Jetbrains IDE Keymap 등

강의 교안

• https://joshua1988.github.io/ts/

타입스크립트 핸드북

## 타입스크립트

• 자바스크립트에 타입을 부여한 언어.
• 자바스크립트와 다르게 블라우저에서 실행하기 위해 파일을 한번 변환해줘야 한다. (컴파일)

## 타입스크립트 사용 이유.

에러의 사전 방지

/**
 * @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.cit;		// 에러 사전 방지.
})

코드 자동 완성 가이드.

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

sum(10, 20);    // 30
sum(10, '20');  // 1020

• 아래와 같이 입력 타입, 반환 타입 설정 가능.
• 타입에 맞지 않는 값이 들어오는 경우 코드상에서 에러 표시 됨.
• 타입에 따라 제공되는 api 자동완성 기능 사용 가능.

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

var result = add(10, 20);
//add(10, '20');  // 정해진 타입이 아닌 경우, 코드상에서 에러 표시.

result.toLocaleString();    // 제공되는 타입에 따른 api 사용 가능.

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

// @ts-check

/**
 * @param {number} a 첫 번째 숫자
 * @param {number} b 두 번째 숫자
*/
function sum(a, b) {
    return a + b;
}

sum(10, 20);
sum(10, '20');  // @ts-check 설정 시 ts 사용하는 것 같은 효과 제공.