TIL 48 | 타입스크립트의 타입 시스템

CHAEIN·2021년 8월 20일
0

TypeScript

목록 보기
2/2
post-thumbnail

타입스크립트의 타입 시스템

  • 타입을 명시적으로 지정할 수 있다.
  • 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론한다.

타입은 해당 변수가 할 수 있는 일을 결정한다.

기존의 자바스크립트는 함수 사용법에 대한 오해를 야기할 수 있다.

// 이 함수의 작성자는 의도적으로 NaN리턴을 의도하지 않았다면 매개변수 a가 number 타입이라는 가정 하에 함수를 작성했다.
function f2(a) {
  return a * 38;
}

// 이러한 상황에서 함수 사용자가 사용법을 제대로 숙지하지 못한채 문자열을 인자로 넣어주면 의도하지 않은 오류가 발생한다.
console.log(f2("Mark")); // NaN

타입스크립트를 사용하더라도 명시적으로 작성하지 않고 추론에 의지하면 에러 방지에 한계가 생긴다.

function t3(a) {
  return a * 38;
}
// 위처럼 파라미터 a의 타입을 명시적으로 지정하지 않는 경우 a는 any로, 리턴값은 number로 추론된다.(NaN도 number의 일종이다.)

console.log(f3("Mark") + 5); // NaN

위와 같은 상황에선 noImplicitAny 옵션을 겨면 타입을 명시적으로 지정하지 않은 경우, 타입스크립트가 추론 중 'any'라고 판단하게 되면 컴파일 에러를 발생시켜 명시적으로 지정하도록 유도한다.

// strict 모드,  noImplicitAny 옵션 ON
function t3(a) {
  return a * 38; // error T37006: Parameter 'a' implicitly has an 'any' type.
}

// 사용자의 코드를 실행할 수 없습니다. 컴파일이 정상적으로 마무리 될 수 있도록 수정해야 합니다.
console.log(f3("Mark") + 5); // 이 코드는 사용할 수 없다.

따라서 모든 변수의 타입은 명시적으로 지정해주는 것이 바람직하다.

function f4(a: number) {
  // 파라미터의 타입은 명시적으로 지정했다.
  if (a > 0) {
    return a * 38; // 리턴 타입은 명시적으로 지정되지 않아 number로 추론된다.
  }
}

console.log(f4(-5) + 5); // NaN

위 경우 파라미터는 조건에 충족하지 않아 f4 함수는 undefined를 리턴한다. 기본적으로 undefined는 모든 타입의 subtype으로 존재하기 때문에 number타입에 어긋나지 않는다고 판단돼 컴파일 에러 없이 코드가 작동한다. 이러한 상황을 방지하기 위해 strictNullChecks옵션을 켜면 모든 타입에 자동으로 포함되어있는 null과 undefined를 제거해준다.

function f4(a: number) {
  if (a > 0) {
    return a * 38; // 명시적으로 지정하지 않은 리턴 타입은 number, undefined로 추론된다.
  }
}

console.log(f4(-5) + 5); // error : Object is possibly 'undefined'

함수의 재사용성, 범용성을 높이기 위해선 파라미터 뿐만 아니라 리턴 타입도 명시적으로 지정해주는 것이 좋다. 이때 noImplicitReturns옵션을 켜면 함수 내에서 모든 코드가 값을 리턴하지 않을 때 컴파일 에러를 발생시킨다.

function f4(a: number) {
  if (a > 0) {
    return a * 38; // 파라미터가 a보다 작을 때 undefined를 리턴하기 때문에 이때 에러가 발생한다.
  }
}
// error: Not all code paths return a value

0개의 댓글