Typescript의 Javascript 타입검사

[farmeter]

개요

--checkJs를 사용해 .js 파일에서도 Typescript처럼 타입 검사 및 오류 확인이 가능합니다.

JSDoc 타입

.js 파일에서는, 흔히 .ts 파일처럼 타입을 추론해볼 수 있습니다.

$tsc --allowJs --checkJs --outDir dist jsdoc.js

/** @type {number} */
var x;

x = 0;      // 성공
x = false;  // 오류: 불리언(boolean)에는 숫자를 할당할 수 없음

클래스 프로퍼티

• ES2015에는 클래스에 프로퍼티를 선언할 수 있는 수단이 없습니다.
  • 프로퍼티는 객체 리터럴과 같이 동적으로 할당됩니다.
• .js 파일에서, 컴파일러는 클래스 본문 내부에서 할당된 프로퍼티로부터 프로퍼티들을 추론합니다.
• 생성자가 정의되어 있지 않거나 undefined나 null이 아닐 경우, 프로퍼티의 타입은 생성자에서 주어진 타입과 동일합니다.

class C {
    constructor() {
        this.constructorOnly = 0
        this.constructorUnknown = undefined
    }
    method() {
        this.constructorOnly = false // 오류, constructorOnly는 Number 타입임
        this.constructorUnknown = "plunkbat" // 성공, constructorUnknown의 타입은 string | undefined
        this.methodOnly = 'ok'  // 성공, 그러나 methodOnly는 undefined 타입 또한 허용됨
    }
}

class C {
    constructor() {
        /** @type {number | undefined} */
        this.prop = undefined;
        /** @type {number | undefined} */
        this.count;
    }
}

let c = new C();
c.prop = 0;          // 성공
c.count = "string";  // 오류: string 은 number|undefined에 할당할 수 없음

객체 리터럴

• .ts 파일에서, 변수 선언을 초기화하는 객체 리터럴은 선언에 해당 타입을 부여합니다.
  • 원본 리터럴에 명시되어 있지 않은 새 멤버는 추가될 수 없습니다.
• 이 규칙은 .js 파일에선 완화됩니다
  • 객체 리터럴은 원본에 정의되지 않은 새로운 프로퍼티를 조회하고 추가하는 것이 허용되는 확장 가능한 타입을 갖습니다.
• JsDoc를 이용, @type를 통해 검증 가능합니다.

var obj = { a: 1 };
obj.b = 2;  // 허용됨

/** @type {{a: number}} */
var obj = { a: 1 };
obj.b = 2;  // 오류, {a: number}타입엔 b 프로퍼티가 없음

함수 매개변수

• ES2015 이전의 JavaScript는 선택적인 매개변수를 지정할 방법이 없었습니다.
  • .js 파일에선 모든 함수의 매개변수는 선택적인 것으로 간주됩니다.
• 따라서 선언된 매개변수보다 적은 인수로 호출하는 것이 허용됩니다.
  • 그러나 너무 많은 인수를 넣어 호출하면 오류를 일으킨다는 것에 유의하세요.

function bar(a, b) {
    console.log(a + " " + b);
}

bar(1);       // 성공, 두 번째 인수는 선택 사항임
bar(1, 2);
bar(1, 2, 3); // 오류, 인수의 갯수가 너무 많음

• JSDoc @param을 사용하여 이 규칙에서 예외를 만들 수 있습니다.

  
  /**
  * @param {string} [somebody] - 누군가의 이름
  */
  function sayHello(somebody) {
  if (!somebody) {
      somebody = 'John Doe';
  }
  console.log('Hello ' + somebody);
  }

sayHello();

```javascript
/** @param {...number} args */
function sum(/* numbers */) {
    var total = 0
    for (var i = 0; i < arguments.length; i++) {
      total += arguments[i]
    }
    return total
}

지원되는 JSDoc 예제

• JSDoc의 지정되지 않은 타입 인수는 기본적으로 `any입니다.

  
  /** @type{Array} */
  var x = [];

x.push(1); // 성공 x.push("string"); // 성공, x는 Array 타입임

/* @type{Array.} / var y = [];

y.push(1); // 성공 y.push("string"); // 오류, string을 number 타입에 할당할 수 없음

### `@type`
```javascript
/**
 * @type {(string | boolean)}
 */
var sb;
//유니언 타입에는 괄호가 선택 사항이라는 점에 유의하세요.

/**
 * @type {string | boolean}
 */
var sb;

/** @type {number[]} */
var ns;
/** @type {Array.<number>} */
var nds;
/** @type {Array<number>} */
var nas;
/** @type {{ a: string, b: number }} */
var var9;

/** @type {Function} */
var fn7;
/**
 * @type {*} - 어떠한 타입이든 될 수 있음
 */
var star;
/**
 * @type {?} - 식별되지 않은 타입 ('any'와 같음)
 */
var question;

Type Cast

/**
 * @type {number | string}
 */
var numberOrString = Math.random() < 0.5 ? "hello" : 100;
var typeAssertedNumber = /** @type {number} */ (numberOrString)

@param and @returns

// 매개변수는 다양한 형태의 구문으로 선언될 수 있음
/**
 * @param {string}  p1 - 문자열 매개변수
 * @param {string=} p2 - 선택적 문자열 매개변수
 * @param {string} [p3] - 또다른 선택적 매개변수 (JSDoc 구문)
 * @param {string} [p4="test"] - 기본값을 가진 선택적 매개변수
 * @return {string} 결과
 */
function stringsStringStrings(p1, p2, p3, p4){
  // TODO
}

@template

@template 를 통해 제네릭 타입을 선언할 수 있습니다.

/**
 * @template T
 * @param {T} x - 리턴 타입까지 사용되는 제네릭 매개변수
 * @return {T}
 */
function id(x){ return x }

요약

1. .js 도 checkJs 옵션을 이용하여 타입 검사가 가능합니다.
2. JSDoc를 이용하여 타입을 지정할 수 있습니다.
3. 다른 이유가 없다면, .ts를 사용하세요.

[farmeter]

https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html