강력한 형식의 JavaScript 솔루션

JavaScript는 약한 유형의(또는 동적으로 유형이 지정된) 언어입니다. 즉, 변수 유형이 정의되지 않습니다.

x = 5; // 5
x = x + 'A'; // '5A'

위 코드에서 변수 x는 처음에는 숫자 값이고 그 다음에는 현재 값에 따라 유형이 완전히 결정됩니다.

약한 타이핑의 장점은 매우 유연하고 매우 간결한 코드를 작성할 수 있다는 것입니다. 그러나 대규모 프로젝트의 경우 강력한 유형 지정이 시스템의 복잡성을 줄이고 컴파일 타임에 유형 오류를 감지하며 프로그래머의 부담을 줄일 수 있으므로 더 유리합니다.

누군가 JavaScript를 강력한 형식의 언어로 만들려고 노력해 왔습니다. 강력한 타이핑이 공식적으로 지원될 때까지 이 문서에서는 현재 사용할 수 있는 세 가지 솔루션을 소개합니다.

1. TypeScript

TypeScript는 Microsoft가 2012년에 출시한 프로그래밍 언어입니다. JavaScript의 상위 집합으로 JavaScript로 컴파일하여 실행할 수 있습니다. 가장 큰 특징은 강력한 타이핑과 ES6 클래스를 지원한다는 점이다.

먼저 TypeScript를 설치하세요.

$ npm install -g typescript

그런 다음 변수 유형을 지정합니다.

// greet.ts
function greet(person: string) {
  console.log("Hello, " + person);
}
greet([0, 1, 2]);

위는 Greeting.ts 파일의 코드입니다. 접미사 ts는 TypeScript 코드임을 나타냅니다. Greeting 함수의 매개변수는 문자열로 선언되지만, 호출되면 배열이 전달됩니다.

tsc 명령을 사용하여 ts 파일을 js 파일로 컴파일하면 유형 불일치 오류가 발생합니다.

$ tsc greeter.ts
greet.ts(5,9): error TS2345: Argument of type 'number[]'   
is not assignable to parameter of type 'string'.

2. Flowcheck

Flowcheck는 변수 유형이 런타임에 올바른지 확인할 수 있는 경량 유형 어설션 라이브러리입니다.

먼저 Flowcheck를 설치하세요.

$ npm install -g flowcheck

그런 다음 변수 유형을 선언하는 스크립트를 작성합니다.

function sum(a: number, b: number) {
  return a + b;
}
sum('hello','world')

다음으로, 다음 명령을 사용하여 스크립트를 일반 JavaScript 파일로 변환합니다.

$ browserify -t flowcheck -t [reactify --strip-types] \
input.js -o output.js

변환된 파일은 다음과 같습니다.

var _f = require("flowcheck/assert");
function sum(a, b) {
    _f.check(arguments, _f.arguments([_f.number, _f.number]));
  return a + b;
}

보시다시피 코드에 어설션 라이브러리가 삽입되어 있습니다. 각 함수가 실행되기 전에 어설션이 실행되고 유형이 일치하지 않으면 오류가 보고됩니다.

$ node output.js
// throw new TypeError(message);
            ^
TypeError: 
Expected an instance of number got "hello",   
context: arguments / [number, number] / 0
Expected an instance of number got "world",  
context: arguments / [number, number] / 1

3. Flow

Flow는 React의 소스코드를 확인하기 위해 Facebook이 2014년에 출시한 타입 검사 도구입니다.

설치 명령어는 다음과 같습니다.

$ npm install --global flow-bin

설치에 실패한 경우(저의 경우) 소스 코드에서 직접 컴파일해야 합니다.

Flow를 사용하는 방법은 다양하지만 몇 가지 예만 들어보겠습니다. 앞서 소개한 두 가지 도구는 선언된 유형이 있는 변수만 확인할 수 있는 반면, Flow는 변수 유형을 추론할 수 있습니다.

// hello.js
/* @flow */
function foo(x) {
  return x*10;
}
foo("Hello, world!");

위는 hello.js 파일입니다. 파일의 첫 번째 줄은 변수 유형을 확인하기 위해 Flow를 사용해야 함을 나타내는 주석입니다.

$ flow check
hello.js:7:5,19: string
This type is incompatible with
/hello.js:4:10,13: number

flow check 명령을 실행하면 오류 메시지가 나타납니다. foo 함수의 예상 매개변수는 숫자 값이지만 실제로는 문자열입니다.

Flow는 변수 유형 선언도 지원합니다.

/* @flow */
function foo(x: string, y: number): string {
  return x.length * y;
}
foo("Hello", 42);

또 다른 흥미로운 기능은 Flow가 유형 주석을 유형 선언으로 변환할 수 있다는 것입니다.

// annotation.js
/**
  @param {number} x
  @return {number}
 */
function square(x) {
  return x * x;
}
square(5);

flow port 명령을 실행하면 다음과 같은 결과가 나옵니다.

$ flow port annotation.js
function square(x: number) : number {
   return x * x;
 }

Flow에 대한 자세한 소개는 "Facebook의 JavaScript용 유형 검사기인 Flow 탐색"을 참조하세요.