[Understanding TypeScript] Section 1. 시작하기

이 글은 udemy의 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강좌를 바탕으로 정리한 내용입니다

 

1. 환영

pass

 

2. TypeScript란 무엇이며 왜 사용해야 하는가? 

타입스크립트는 자바스크립트의 superset 입니다. 새로 만들어진 언어가 아닌 자바스크립트 언어를 사용해 새로운 기능과 장점을 추가하는 언어입니다. 코드를 실행하여 타입스크립트 코드를 JS로 컴파일하는 강력한 컴파일러입니다. 타입을 추가하여 브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 미리 확인할 수 있습니다. 개발 중 런타임 에러로 발생하는 에러를 초기에 수정할 수 있습니다.

 

단점) 브라우저와 같은 자바스크립트 환경에서 실행할 수 없습니다. node.js도 마찬가지입니다. 

 

3. 학습 커뮤니티

pass

 

4. Node.js 다운로드

typescriptlang.org 에서 download를 클릭하여 설치 방법 확인 가능합니다.  / npm 도구는 node.js 패키지의 일부입니다.  아래 설치한 것은  타입스크립트 코드를 이해하여 자바스크립트로 변환하기 위해 알아야 하는 컴파일러입니다. tsc 명령어 사용이 가능해집니다. 

➜  ~ yarn global add typescript
yarn global v1.22.11
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

 

기본 JS 파일

const button = document.querySelector("button");
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
  return num1 + num2;
}

button.addEventListener("click", function () {
  console.log(add(input1.value, input2.value));
});

 

느낌표를 추가함으로써 요소를 얻을 것임을 ts에게 알려줄 수 있습니다. 

button → 'button' is possibly 'null' 
→ const button = document.querySelector("button")!;

 

항상 input 요소이기 때문에 형 변환이라는 HTMLInputElement 를 사용할 수 있음을 알려주면 됩니다. 

Property 'value' does not exist on type 'HTMLElement'
 → const input1 = document.getElementById("num1")! as HTMLInputElement;

 

가장 큰 기능은 타입을 추가할 수 있다는 것입니다. 

function add(num1: number, num2: number) {
  return num1 + num2;
}

 

컴파일을 실행해본 결과는 다음과 같습니다. js 파일이 생기고 에러난 부분을 확인할 수 있습니다.

➜  first-project tsc using-ts.ts 
using-ts.ts:10:19 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

10   console.log(add(input1.value, input2.value));
                     ~~~~~~~~~~~~


Found 1 error in using-ts.ts:10

 

해당 부분을 수정하고 다시 컴파일을 해봅니다. 에러 없이 실행됩니다. 이후 생성된 JS를 확인해보면 TS에서 추가했던 부분들이 다 사라지고 Pure JS만 남아있는 걸 볼 수 있습니다. 

button.addEventListener("click", function () {
  console.log(add(+input1.value, +input2.value));
});

 

5. TypeScript Avantages - Overview

- Types

- Next-gen JavaScript Features (compiled down for older Browers)

- Non-JavaSCript Features like Interfaces or Generics

- Meta-Programming Features like Decorators

- Rich Configuration Options

- Modern Tooling that helps even in non-TypeScript Projects

 

6. 강의개요

1. TypeScript Basics

2. Compiler & Configuration Deep Dive

3. Working with Next-gen JS code

4. Classess & Interfaces

5. Advenced Types & TypeScript Features

6. Generics (고급기능)

7. Decorators

8. Time to Practice - Full Project

9. Working with Namespaces & Modules 

10. Webpack & TypeScript / 웹팩은 근래 프론트엔드 웹 개발에서 사용하는 구축도구로, TS와 함께 사용하면 더 나은 프로젝트 설정이 가능함

11. Third-Party Libraries & TypeScript 

12. React + TypeScript & NodeJS + TypeScript

 

7. 강의 최대 활용하는 법

- Watch the Videos!

- Code Along

- Practice

- Debug & Search

- Ask & Answer

 

8. 코드 편집기/IDE 설정하기

 

9. 강의 프로젝트 설정

tsc app.ts

위 명령어를 js 파일이 생성됩니다. 코드에서 무언가를 변경할 때마다 수동으로 다시 컴파일 해야 합니다.  자동으로 이 과정을 실행하기 위해 npm을 설치합니다. 

 

npm install --save-dev lite-server

--save-dev를 입력하여 이를 개발 전용 종속성으로 표시합니다. 이는 개발 도중 도움이 될 도구임을 뜻합니다. lite-server는 package.json 파일 옆에 항상 index.html 파일을 제공하는 간단한 개발 서버입니다. 

 

{
  "name": "understanding-ts",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server" // add
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.6.1"
  }
}