[TypeScript] TypeScript 시작하기

이 글은 udemy의 Typescript 강의를 보고 정리한 글입니다!

강의 링크: https://www.udemy.com/course/best-typescript-21/
소스 코드: https://github.com/Mirim-Study/Typescript

 

섹션 1: TypeScript 시작하기 (1 ~ 9)

What Is TypeScript?

자바스크립트의 슈퍼셋

여기서 슈퍼셋이란? 컴퓨터 과학에서 슈퍼셋이란 특정한 언어의 모든 기능을 포함하면서, 다른 기능까지 포함하도록 향상 또는 확장된 것을 의미한다고 한다.

 

즉, 타입스크립트는 새로운 언어가 아니라 자바스크립트를 기반으로 새로운 기능과 장점을 추가한 언어이다.

자바스크립트 코드를 더 쉽고 강력하게 작성할 수 있게 해 준다.

 

코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러이다.

타입스크립트 컴파일러는 보다 나은 구문과 작업을 보다 쉽게 수행할 수 있게 해 줄 방법을 제공하여 복잡한 자바스크립트 스니펫으로 더 멋지고 쉬운 방법으로 컴파일할 수 있게 해 준다.

 

스니펫이란? 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어이다. 사용자가 루틴 편집 조작 중 반복 타이핑을 회피할 수 있게 도와준다.

 

단점

브라우저와 같은 자바스크립트 환경에서 실행할 수 없다. + Node.js

 

장점

개발 중에 런타임 에러로 인해 발생하는 에러를 초기 개발 과정에서 발견하고 수정할 수 있도록 추가적인 오류 검사를 제공

 

Why TypeScript?

두 숫자를 더하는 간단한 자바스크립트 함수로 예를 들어본다.

 

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

console.log(add('2', '3'));

 

두 숫자를 더하는 함수라고 한다면, 우리는 결과값을 5라고 예상하지만 자바스크립트에서는 문자열의 더하기는 문자열을 이어 붙이는 것이어서 매개변수에 문자열을 넣음으로써 결과값이 23이 나온 것이다.

 

이렇게 자바스크립트에서는 기술적인 에러가 아니어서 런타임 에러가 발생하지 않지만,

논리적 실수로 원치 않는 결과값이 나오게 되는 것이다.

 

설치

타입스크립트 설치 전에 아래에 있는 이전 글을 통해 Node.js를 먼저 설치한 후,

cmd창에 아래 명령어를 사용해서 간편하게 설치 가능하다!

Node.js 설치

npm install -g typescript

 

TypeScript 맛보기

const input1 = document.getElementById("num1")! as HTMLInputElement;const

1. !(느낌표) : 컴파일러에게 이 변수는 null이 아니라고 알려주는 것이다.

2. as HTMLInputElement : 변수를 HTMLInputElement로 형 변환을 하는 것이다. 

 

tsc 파일명.ts

cmd에서 위 명령어를 이용하면 타입스크립트 파일을 자바스크립트 파일로 컴파일할 수 있다.

소스코드: 

 

TypeScript OverView

1. 타입(Type)

작동 방식에 대해 훨씬 더 명시적이어야 하며 예상치 못한 많은 에러를 피할 수 있다.

IDE를 사용할 수 있어서 타입의 지원을 통해 더 나은 자동 완성 기능을 제공하고 코드를 컴파일하기도 전에 에러를 보여준다.

2. 특정 차세대 JavaScript 기능(이전 브라우저용으로 컴파일됨) (Next-gen JavaScript Features (compiled down for older Browsers))

타입스크립트 파일에서 작성하고 사용하면 자바스크립트 코드로 컴파일되어 구형 브라우저에서도 작동할 수 있다. 바닐라 자바스크립트로도 이와 같은 작업을 가능하게 해주는 바벨이라는 도구도 있다. 

 

3. 인터페이스와 제네릭 기능 (Non-JavaScript Features like Interfaces or Generics)

자바스크립트와 비교할 수 없는 기능들이지만 개발 과정에서 에러를 보다 명확히 하며 더 많은 에러를 제거할 수 있도록 돕는 기능이다.

4. 데코레이터와 같은 메타프로그래밍 기능 (Meta-Programming Features like Decoratars)

전체 모듈을 지닌 데코레이터와 같은 특정 메타 프로그래밍 기능을 제공한다. 

5. 다양한 구성 옵션 (Rich Configuration Options)

컴파일러와 구성 방법에 대해 다루는 전체 모듈이 있다. 요구 사항에 맞게 미세하게 조정하여 더 엄격하거나 느슨하게 만들고 원하는 대로 동작하도록 할 수 있다. 

6. 비전형 스크립트 프로젝트에서도 도움이 되는 최신 툴링. (Modern Tooling that helps even in non-TypeScript Projects.)

사용하는 IDE(vscode)는 타입스크립트를 명시적으로 사용하지 않고도 내부에서 일부 타입의 확인할 수 있다.

 

TypeScript Project Setting

소스코드: 

1. '.gitignore'

git에 프로젝트를 올릴 때, 파일의 크기도 크고 굳이 올릴 필요가 없는 파일을 명시하는 파일

 

2. defer

<script src="app.js" defer></script>

defer 속성을 사용하면 브라우저가 HTML 코드가 처리하면서 동시에 자바스크립트 파일도 실행하겠다는 속성이다.

 

3. lite-sever

Node.js 기반의 경량 웹서버이다.

타입스크립트 파일을 컴파일해준 후 자바스크립트 파일을 다시 불러와야 브라우저에 반영이 된다.하지만 이 라이브러리를 사용하면, 자바스크립트 파일의 수정사항을 자동으로 브라우저에 반영해준다. 

 

설치 및 실행

npm init
npm install --save-dev lite-server

package.json
"start": "lite-server" 추가하기

...
  "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "lite-server"
   },
...

npm start

npm start를 한 이후로는 타입스크립트 파일을 컴파일하면 브라우저가 자바스크립트 파일의 수정사항을 브라우저에 자동으로 반영해준다.