TypeScript

enum과 tree shaking

1. 개요 TypeScript에서 enum은 tree shaking이 되지 않는다는 이슈가 있었다. 이것이 정확히 어떤 것인지 살펴보도록 하자. 2. 미리 알아두어야 하는 개념 2.1. Bundling (번들링) 여러 개의 코드를 하나로 묶고 압축까지 하는 과정을 의미한다. 한 개의 웹 프로젝트를 제작하기 위해서는 여러 개의 JavaScript 파일을 작성하기 마련인데, 프로젝트를 배포할 때 클라이언트에게 여러 개의 JavaScript 파일을 제공하는 것은 매우 비효율적이다. 따라서 작성한 코드를 한데 묶어 전송하는 것이 바람직하다. 또한 옛날과는 다르게 모던 웹 개발에서는 JavaScript 파일 내에 html 요소도 넣고 있으며(Ex. JSX), CSS도 포함시키고 있다(CSS in JS). 따라서 ..

TypeScript 도입을 위한 tsconfig.json

1. 배경 약 1년 전에 작성했던 JavaScript 코드를 리뉴얼 하는 과정에서 새롭게 TypeScript를 도입하기로 하였다. TypeScript를 도입할 경우, 변수 및 함수에 타입추론을 할 수 있기 때문에 타입에 맞는 메서드를 에디터에 의해 제안받을 수 있어 편리하며, 잘못된 타입을 사용했을 경우 경고가 뜨기 때문에 실수에서 비롯한 버그를 미연에 방지할 수 있기 때문이다. 지금 생각해 보면 타입을 헷갈려 올바르지 않은 내장 메서드를 사용했거나, 혹은 변수명을 잘못 지어 발생한 버그를 해결하는데 많은 시간을 보낸 것을 생각하면 충분히 도입할만한 가치가 있다고 생각하였다. 2. 방법 아래의 명령을 입력하여 기본적인 환경을 도입한다. npm i -D typescript npx tsc --init tsc..

extends vs implements

1. extends 상속 받을 부모의 클래스를 명시하기 위해 사용한다. 상속의 특성상 자식은 부모의 (private가 아닌) 프로퍼티 및 메서드에 접근할 수 있기 때문에, 다형성을 사용하지 않는다면 자식은 부모가 소유한 프로퍼티나 메서드를 다시 작성할 필요가 없다. 아래 코드를 보면 Cat 클래스는 Animal 클래스의 프로퍼티와 메서드를 상속받고 있다. (extends로 연결되었기 때문) 따라서 Cat 클래스는 Animal 클래스의 public한 프로퍼티와 메서드에 접근할 수 있고, 이에 따라서 20~22번째 코드가 실행 가능하다. class Animal { public type: string; constructor() { this.type = "animal"; } public move() { cons..