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

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

세 종류의 자바스크립트

• 웹 브라우저 표준인 ES5
• 2015년부터 매년 새로운 버전을 발표하고 있는 ESNext
• ESNext에 타입 기능을 추가한 타입스크립트

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

타입스크립트는 MS가 개발한 언어로 자바스크립트에 타입 기능을 추가한 것으로 C# 언어를 창시한 아네르스 하일스베르가 핵심 개발자로 참여

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

타입의 안전성을 확보하고, 문제의 원인이 어디에 있는지 파악하기 쉬움

대규모 프로젝트에 적합

// JS
function makePerson(name, age) {}

// TS
function makePerson(name: string, age: number) {}

트랜스파일

트랜스파일러: 어떤 프로그래밍 언어로 작성된 소스코드를 또 다른 프로그래밍 언어로 변환해주는 프로그램

• ESNext --> 바벨(Babel) --> ES5 JS 코드
• TS --> TSC(TypeScript compiler) --> ES5 JS 코드

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

ESNext의 주요 문법

(1) 비구조화 할당

// 객체
let person = { name: "Jane", age: 22 };
let { name, age } = person;
console.log("name: " + name + " age: " + age);

// 배열
let array = [1, 2, 3, 4];
let [head, ...rest] = array; // head: 배열의 첫번째 요소, ...rest: 나머지 요소
console.log("head: " + head + " rest: " + rest);

// swap
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log("a: " + a + " b: " + b);

(2) 화살표 함수

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

const add = (a, b) => a + b;

(3) 클래스

객체지향 프로그래밍을 위해 클래스 개념을 지원한다

abstract class Animal {
  constructor(public name?: string, public age?: number) {}
  abstract say(): string;
}

class Cat extends Animal {
  say() {
    return "야옹";
  }
}

class Dog extends Animal {
  say() {
    return "멍멍";
  }
}

let animals: Animal[] = [new Cat("야옹이", 2), new Dog("멍멍이", 3)];
let sounds = animals.map((a) => a.say());

(4) 모듈

코드를 여러 개 파일로 분할해서 작성할 수 있도록 모듈 기능을 지원(import/export)

import * as fs from "fs";
export function writeFile(filePath: string, content: any) {
  fs.writeFile(filePath, content, (err) => {
    err && console.log("error", err);
  });
}

(5) 생성기

yield: '반복자'를 의미하는 반복기(iterator)를 생성할때 사용

반복기는 독립적으로 존재하지 않고 반복기 제공자(iterable)를 통해 제공받음

yield문을 이용해 반복기를 만들어 내는 반복기 제공자를 '생성기(generator)'라 명칭

// 생성기는 function 키워드에 별표(*)를 결합한 function*과 yield 키워드를 이용해 생성
function* gen() {
  yield* [1, 2];
}
for (let value of gen()) {
  console.log(value); // 1, 2
}

(6) Promise와 async/await 구문

비동기 콜백 함수 구현에서 기존 ES5의 콜백지옥을 해결하기 위해 Pormise를 지원

async function get() {
  let values = [];
  values.push(await Promise.resolve(1));
  values.push(await Promise.resolve(2));
  values.push(await Promise.resolve(3));
  return values;
}

get().then((values) => console.log(values)); // [1, 2, 3]

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

(1) 타입 주석과 타입 추론

let n: number = 1; // 타입 주석
let m = 2; // 타입 추론

(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, 2, "ok"]; // 튜플

(4) 제네릭 타입

class Container<T> {
  constructor(public value: T) {}
}

let numberContainer: Container<number> = new Container<number>(1);
let stringContainer: Container<string> = new Container<string>("1");

(5) 대수 타입

다른 자료형의 값을 가지는 자료형

type NumberOrString = number | string; // 합집합 타입
type AnimalAndPerson = Animal & Person; // 교집합 타입

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

1. Visual Stuido Code & Node.JS 설치
2. tsc(타입스크립트) 컴파일러 설치 npm i -g typescript
3. JS 코드로 변환 및 실행까지 한번에 해주는 ts-node 설치 npm i -g ts-node

---

출처: 전예홍 저, 『Do it! 타입스크립트 프로그래밍』, 이지스퍼블리싱(2020)

---