Jae Front-end Study

01-1 타입스크립트란 무엇인가?

세 종류의 자바스크립트

• 웹 브라우저에서 동작하는 표준 자바스크립트 ES5(ECMAScript 5)
• 2015년부터 매년 새로운 버전을 발표하는 ESNext(ES6 이후의 버전)
• ESNext에 타입(type) 기능을 추가한 타입스크립트(TypeScript)

자바스크립트(동적 언어): 런타임에 타입 결정, 오류 발견

타입스크립트, 자바(정적 언어): 컴파일 타임에 타입 결정, 오류 발견

타입스크립트는 누가 만들었나?

타입스크립트는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어로 2012년 말 처음 발표됐다.

구글의 Anglar.js 팀이 앵귤러 버전 2를 타입스크립트로 만들면서 널리 알려졌고, 앵귤러뿐만 아니라 리액트나 뷰 프레임워크에서도 타입스크립트를 사용해 개발되고 있다.

자바스크립트에 타입 기능이 있으면 좋은 이유

여러 사람이 협력해 하나의 제품을 개발하기 때문에 다른 개발자가 만들어 놓은 코드를 이용하려고 했을 때 오류가 발생했다면, 오류의 원인이 무엇인지 찾기가 어렵다. 타입스크립트 컴파일러는 문제의 원인이 어디에 있는지 친절하게 알려주기 때문에 코드를 좀 더 수월하게 작성할 수 있다. 따라서 많은 개발자들이 대규모 소프트웨어를 만들 때 타입스크립트를 선호하게 되었다.

• 타입스크립트 소스 코드

타입스크립트를 사용 시, 소스 코드를 실행하기 전에 오류를 알려줘 개발할 때 시간이 오래 걸리더라도 오류 검출이나 유지보수에 용이하다.

아래 사진처럼 컴파일하기 전에 어디에 오류가 있는지 알려준다.

• 자바스크립트 소스 코드

타입스크립트와 달리 자바스크립트는 오류 없이 소스 코드를 실행하기 때문에 NaN과 같은 원하지 않는 결과가 나오거나, 컴파일 시 TypeError를 알려준다.

이렇게 되면 오류 검출에 많은 시간을 소요하게 되기 때문에 타입스크립트를 사용하는 것이다.

트랜스파일

트랜스파일러(transpiler)란, 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 바꿔주는 프로그램을 의미한다. (컴파일과 동일한 뜻으로 사용)

즉, 우리가 사용하는 웹 브라우저는 타입스크립트를 이해하지 못하기 때문에 트랜스파일러를 이용해서 타입스크립트를 자바스크립트로 변환해주어야 한다.

ESNext 자바스크립트 소스코드는 바벨이라는 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환된다.

타입스크립트 소스코드는 TSC(TypeScript Compiler)라는 트랜스파일러를 통해 ES5 자바스크립트 코드로 변환된다.

01-2 타입스크립트의 주요 문법 살펴보기

ESNext의 주요 문법 살펴보기

타입스크립트는 ESNext 문법을 지원하기 때문에 타입스크립트를 다루기 위해서는 ESNext 문법을 알아야만 한다.

1. 비구조화 할당

객체와 배열에 비구조화 할당을 적용할 수 있다.

// 객체
let person = { name: 'Jane', age: 22 }
let { name, age } = person // name = 'Jane', age = 22

// 배열
let array = [1, 2, 3, 4]
let [head, ...rest] = array // head = 1, rest = [2, 3, 4]

2. 화살표 함수

function 키워드 대신에 화살표(=>)로 함수를 선언할 수 있다.

function add(a, b) { return a + b }
const add = (a, b) => a + b

3. 클래스

객체지향 프로그래밍을 지원한다.

캡슐화, 상속, 다형성

4. 모듈

모듈을 사용하면 코드를 여러 개의 파일로 분할해서 작성할 수 있다.

변수, 함수, 클래스 등에 export 키워드를 사용해 모듈로 만들면 다른 파일에서도 사용할 수 있고, 모듈을 사용하고 싶을 때는 import 키워드를 사용한다.

5. 생성기

yield 문은 반복자를 의미하는 반복기를 생성할 때 사용한다.

반복기는 독립적으로 존재하지 않고 반복기 제공자(생성기)를 통해 얻는다.

6. Promise와 async/await 구문

비동기 콜백 함수를 상대적으로 쉽게 구현할 목적으로 만들어졌다.

타입스크립트 고유의 문법 살펴보기

1. 타입 주석과 타입 추론

변수 뒤의 콜론과 타입 이름을 "타입 주석" 이라고 한다.

변수의 타입 부분이 생략되면 대입 연산자의 오른쪽 값을 분석해 왼쪽 변수의 타입을 결정하는 것을 "타입 추론" 이라고 한다.

let n: number = 1

2. 인터페이스

interface Person {
    name: string,
    age?: number
}

let person: Person = { name: "Jane" }

3. 튜플

배열에 저장되는 아이템의 데이터 타입이 모두 같으면 배열, 다르면 "튜플"이다.

let array: number[] = [1, 2, 3]
let tuple: [boolean, number, string] = [true, 1, 'ok']

4. 제네릭 타입

여러 가지 타입을 대상으로 동작할 수 있는 코드를 "제네릭 타입" 이라고 한다.

5. 대수 타입

대수 타입이란, 다른 자료형의 값을 가지는 자료형을 의미한다.

대수 타입에는 합집합 타입(&), 교집합 타입(|) 2가지가 있다.

type NumberOrString = number | string
type AnimalAndPerson = Animal & Person

01-3 타입스크립트 개발 환경 만들기

타입스크립트의 개발 환경은 nodejs 개발 환경과 동일하다. (타입스크립트는 nodejs 환경에서만 동작한다. = node가 설치되어 있어야 한다.)

nodejs와 웹 브라우저, 에디터만 있으면 개발할 수 있다.

타입스크립트 컴파일러 설치

npm: nodejs 패키지 관리자

// 1. 타입스크립트 컴파일러 설치
npm i -g typescript

// 1-1. 설치된 타입스크립트 컴파일러 버전 확인
tsc --version 또는 tsc -v

// 2. 타입스크립트 코드를 ES5로 변환하고, 실행까지 시키는 패키지 설치
npm i -g ts-node

// 2-1. 설치된 ts-node 버전 확인
ts-node --version 또는 ts-node -v

tsc hello.ts 명령어를 실행하면 타입스크립트 소스가 tsc에 의해 트랜스파일 되어 hello.js 파일이 생성됐다.

참고자료

Do it! 타입스크립트 프로그래밍