전예홍 - 『Do it! 타입스크립트 프로그래밍』

『Do it! 타입스크립트 프로그래밍』 / 전예홍 / 2020

학습 기간: 2022.08.07 ~ 2022.10.11

 

 

0. 소기의 목적대로

이 책을 공부하게 된 계기는 TypeScript의 기본기를 다지기 위함이었다.

여러 TypeScript 책들 중에서도 이 책이 처음 발판을 딛기에 괜찮아 보였고, 이에 따라 학습을 시작했다.

그리고 그 결과는, 결론부터 말하자면, 이 책은 초반부는 쉬웠고 후반부는 어려웠다.

그러니 오늘의 블로깅 전략은, 소기의 목적을 그대로 따르고자 한다.

말하자면 TypeScript의 기본 용법을 정리하는 데에만 초점을 두겠다는 뜻이다.

반복기와 생성기, 함수 조합, ramda와 Monad 부분은 실제 써보지 못한 기술을 정리하자니 체감이 잘 안 되었기 때문에,

다음에 기회가 닿는다면 그때 또 따로 진득하게 정리해보기로 하자.

 

 

1. What is TypeScript?

3 종류의 JavaScript

• ES5 (ECMAScript 5): 웹 브라우저에서 동작하는 표준 JS
• ESNext: 2015년부터 매년 새로운 버전을 발표하는 '새로운 JS', ES2015와 같이 표기함
• TypeScript: ESNext에 타입 기능을 추가한 것, 또한 transpiler를 지니고 있음

 

transpile

• ESNext JS 코드는 Babel이라는 transpiler를 거치면 ES5 JS 코드로 변환됨
• 마찬가지로 TypeScript 코드는 TypeScript compiler(TSC)를 거쳐서 ES5 JS 코드로 변환됨

※ transpile: 어떤 언어로 쓰인 코드를 다른 언어로 된 코드로 바꿔주는 프로그램

 

 

2. ESNext 문법

destructuring assignment

let person = { name: "Loko", age: 28 };
let { name, age } = person;

let arr = [1, 2, 3, 4];
let head = [head, ...rest] = arr;

let a = 1, b = 2;
[a, b] = [b, a];

• 객체와 배열에 적용 가능
• 객체의 각 멤버를 손쉽게 얻어낼 수 있음
• 배열에서 첫번째 요소와 나머지 요소를 손쉽게 구분할 수 있음
• 값을 서로 교환하는 swap 가능

 

화살표 함수

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

 

class

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

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

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

• C++, JAVA와 같은 객체지향 프로그래밍을 지원하기 위해 클래스 기능 제공
• 캡슐화, 상속, 다형성 지원

 

module

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

• 코드를 여러 개의 파일로 분할해주는 기능
• 변수나 함수, 클래스 등에 export 키워드를 사용해서 내보내고, import 키워드를 사용해서 불러들임

 

 

3. TypeScript 고유 문법

type annotation & type inference

let n: number = 1;
let m = 2;

• 타입 주석을 붙여서 타입 명시를 할 수도 있고, 우항의 값을 분석해서 타입 추론을 할 수도 있음
• 타입 추론은 JS 코드와의 호환성을 보장하는 데에 큰 역할을 해줌

 

interface

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

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

 

tuple

let tuple: [boolean, number, string] = [true, 1, "OK"];

• 물리적으로는 배열과 같음
• 배열에 저장될 수 있는 아이템의 데이터 타입이 각자 다르다면 튜플

 

generic type

class Container<T> {
  constructor(public value: T) {}
}
let numberContainer: Container<number> = new Container<number>(1);
let stringContainer: Container<string> = new Conatainer<string>("Hello World");

• 제네릭 타입은 다양한 타입을 한꺼번에 취급할 수 있게 해줌

 

대수 타입

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

• 여러 자료형의 값을 동시에 가질 수 있음

 

 

4. tsconfig.json 옵션들 살펴보기

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "moduleResolution": "node",
    "outDir": "dist",
    "baseUrl": ".",
    "sourceMap": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "paths": { "*": ["node_modules/*"] }
  },
  "include": ["src/**/*"]
}

• module: 컴파일된 ES5 JS 코드의 동작 방식 설정, 웹 브라우저는 amd, Node.js는 commonjs 설정
• moduleResolution: module 값이 commonjs라면 node로, amd라면 classic으로 설정
• target: 트랜스파일할 JS 버전 (보통은 es5)
• baseUrl & outDir: 트랜스파일된 ES5 JS 파일을 저장할 디렉토리 설정
• paths: import 문에서 from 절을 해석할 때 찾아야 하는 디렉토리 설정
• esModuleInterop: JS 라이브러리 중 웹 브라우저에서의 동작만을 위해 만들어진 것들을 위해 설정
• sourceMap: .js.map 파일을 만들어서 디버깅할 수 있도록 해줌
• downlevelIteration: 생성기 구문을 사용하기 위해 설정
• noImplicitAny: false 지정시 타입을 지정하지 않더라도 문제로 인식하지 않게 됨
• include: 컴파일 대상 지정

 

 

5. 배열과 튜플

JS에서 배열은 객체다

• Array 클래스의 인스턴스이며, 클래스의 인스턴스는 곧 객체

 

for in 문

let names = ["Jack", "Jane", "Steve"];
for (let index in names) {
  const name = names[index];
  console.log(`[${index}]: ${name}`);
}

• 본래 객체에서 사용되지만 배열에서도 사용 가능

 

for of 문

for (let name of ["Jack", "Jane", "Steve"]) console.log(name);

 

전개 연산자와 함께 깊은 복사하기

const oArray = [1, 2, 3, 4];
const deepCopiedArray = [...oArray];
deepCopiedArray[0] = 0;
console.log(oArray, deepCopiedArray); // [ 1, 2, 3, 4 ] [ 0, 2, 3, 4 ]

 

tuple & alias

export type ResultType = [boolean, string];

import { ResultType } from "./ResultType";

export const doSomething = (): ResultType => {
  try {
    throw new Error("Some error occurs...");
  } catch (e) {
    return [false, e.message];
  }
};

• 보통 튜플을 사용할 때는 alias를 함께 활용해서 튜플의 의미를 명확하게 함