Vanilla JavaScript의 함정
값 비싼 자유
- JavaScript는 코드를 구성하는 방법에 제한이 없습니다.
- 이러한 자유 덕분에 코드를 훼손할 수 있습니다.
- JavaScript는 충돌 가능성을 먼저 확인하지 않고 코드를 실행하는 동적(dynamic) 타입 언어입니다.
- 런타임에서 코드가 실행되기 전에 충돌되는지 알 수 없습니다.
부족한 문서
- JavaScript 언어 사양(specification)에는 함수의 매개변수, 변수, 다른 구성 요소의 의미를 설명하는 표준화된 내용이 없습니다.
- JSDoc 표준을 사용하여 블록 주석으로 함수와 변수를 설명합니다.
- JSDoc 표준이란?
- 표준으로 형식화된 함수와 변수 코드 바로 위에 문서 주석을 작성하는 방식
- JSDoc의 문제점
- JSDoc 설명이 코드가 잘못되는 것을 막을 수 없습니다.
- 코드 리팩터링 중에 생긴 변경 사항에 의해 현재 유효하지 않은 JSDoc 주석을 찾기 어렵습니다.
- 복잡한 객체를 설명할 때 다루기 어렵고 장황합니다.
- JSDoc 표준이란?
/**
* Performs a painter painting a particular painting.
*
* @param {Painting} painter
* @param {String} painting
* @return {boolean} Whether the painter painted the painting.
*/
function paintPainting(painter, painting) {/* ...*/}부족한 개발자 도구
- JavaScript는 타입을 식별하는 내장된 방법을 제공하지 않습니다.
- 코드가 JSDoc에서 쉽게 분리되기 떄문에 코드베이스에 대한 대규모 변경을 자동화하거나 통찰력을 얻기 어렵습니다.
TypeScript
- TypeScript는 4가지로 설명됩니다.
- 프로그래밍 언어
- JavaScript의 모든 구문과 타입을 정의하고 사용하기 위한 새로운 TypeScript 고유 구문이 포함된 언어
- 타입 검사기(type checker)
- JavaScript와 TypeScript로 작성된 일련의 파일에서 생성된 모든 구성 요소(변수, 함수 등)을 이해하고, 잘못 구성된 부분을 알려주는 프로그램
- 컴파일러(tsc)
- 타임 검사기를 실행하고 문제를 보고한 후 이에 대응되는 JavaScript 코드를 생성하는 프로그램
- 언어서비스(ts server)
- 타입 검사기를 사용해 VS Code와 같은 편집기에 개발자에게 유용한 유틸리티 제공법을 알려주는 프로그램
- 프로그래밍 언어
TypeScript의 장점
제한된 자유
- TypeScript를 사용하여 매개변수와 변수에 제공되는 값의 타입을 지정할 수 있습니다.
- 함수의 매개변수 개수를 변경했을 경우, TypeScript가 잘못된 수의 인수를 사용하여 함수를 호출하는 것을 막아줍니다.
정확한 문서화
- TypeScript는 구문을 적용해 객체의 형태를 설명하고, 우수하고 강력한 시스템을 이용해 객체가 어떻게 보이는지 설명합니다.
// Painter에 3가지 속성이 존재하고, 2가지가 메서드인 것을 알 수 있습니다.
interface Painter {
finish(): boolean;
ownMaterials: Material[];
paint(painting: String, metarials: Meterial[]): boolean;
}
function paintPainting(painter: Painter, painting: String): boolean {/* ...*/ }더 강력한 개발자 도구
- VS Code와 같은 편집기는 TypeScript의 타입 검사기를 추가하여 작성한 코드에 대해 '자동완성'을 제안합니다.
로컬에서 TypeScript 실행하기
-
컴퓨터에 Node.js가 설치되어 있으면 TypeScript를 실행할 수 있습니다.
-
다음 명령어를 실행하여 TypeScript 최신 버전을 전역으로 설치합니다.
npm i -g typscript-
명령줄에서
tsc(TypeScript Compiler) 명령어로 TypeScript를 실행할 수 있습니다. -
--version플래그를 사용해 TypeScript 버젼을 알 수 있습니다.
tsc --version
Version 4.9- 다음 명령어를 실행해 신규
tsconfig.json구성 파일을 생성합니다.- tsconfig.json
- tsconfig.json은 TypeScript가 코드를 분석할 때 사용하는 설정이 담긴 파일입니다.
- TypeScript는 모든 구성 옵션에 대해 tsconfig.json을 참조할 수 있습니다.
- tsconfig.json
tsc --init- 다음 명령어를 실행해 index 파일을 컴파일합니다.
- TypeScript Compiler는 타입 오류와는 상관 없이 입력 파일로부터 JavaScript 파일을 생성합니다.
tsc index.tsTypeScript에 대한 오해
잘못된 코드 해결책
- TypeScript는 JavaScript 코드를 구조화하는 데 도움이 되지만, 타입 안전성 강화를 제외하고는 해당 구조가 어떻게 보여야 하는지에 대해서 강요하지 않습니다.
- TypeScript는 JavaScript에서 사용했던 아키텍쳐 패턴을 모두 지원합니다.
- TypeScript는 클래스나 함수 사용 여부와 같은 코드 스타일 의견을 강요하지 않습니다.
- TypeScript는 Angular, React 등 특정 애플리케이션 프레임워크와 연관되어 있지 않습니다.
JavaScript로의 확장
-
TypeScript의 설계 목표
- 현재와 미래 ECMAScript 제안에 맞춘다.
- 모든 JavaScript의 코드의 런타임 동작을 유지한다.
-
TypeScript는 JavaScript 작동 방식을 전혀 변경하지 않습니다.
-
TypeScript에는 JavaScript의 일반적인 사용 사례를 반영하기 위해 수년 전에 추가된 몇 가지 오래된 기능이 있습니다.
JavaScript보다 느림
-
TypeScript가 코드에 적용하는 유일한 변경 사항은 오래된 런타임 환경(예: 인터넷 익스플로러 11)을 지원하기 위해 이전 버전의 JavaScript 코드로 코드를 컴파일하도록 요청하는 경우입니다.
-
운영 프레임워크의 대다수는 TypeScript Compiler를 전혀 사용하지 않습니다.
- 트랜스파일(transpile)을 위한 별도의 도구로 사용하고, TypeScript는 타입 검사용으로만 사용합니다.
-
TypeScript는 코드를 빌드하는 데 시간이 좀 더 걸립니다.
- TypeScript 코드는 브라우저나 Node.js와 같은 환경에서 실행되기 전에 JavaScript로 컴파일되어야 합니다.
- 코드에서 발생할 수 있는 오류를 분석하는 느린 TypeScript 기능은 실행 가능한 애플리케이션 코드 파일을 생성하는 것과는 분리된 채로 수행됩니다.
진화가 끝남
- 웹 진화가 끝나지 않은 것처럼 TypeScript의 진화도 끝나지 않았습니다.
- 웹 커뮤니티는 TypeScript에 버그 스정과 기능 추가를 지속적으로 요청합니다.
