Skip to content

Instantly share code, notes, and snippets.

@DublinCity
Last active July 11, 2022 00:43
Show Gist options
  • Save DublinCity/55e5177bbe57a156c5639bcaf885f538 to your computer and use it in GitHub Desktop.
Save DublinCity/55e5177bbe57a156c5639bcaf885f538 to your computer and use it in GitHub Desktop.
# Item2: 타입스크립트 설정

Item2: 타입스크립트 설정

타입스크립트의 설정은 어디서 소스파일을 찾을지, 어떤 종류의 출력을 생성할지 제어하는 내용뿐 아니라 언어자체의 핵심요소를 제어하는 설정도 있다.

타입스크립트의 설정을 관리하는 법

아래 코드와 같이 설정값을 컴파일 시에 넘길 수 있으나, 동료 개발자와 설정을 공유하기가 어렵다.

$ tsc --noImplicitAny program.ts

따라서 tsconfig.json 파일을 생성하고 해당 파일을 git으로 관리하여 설정을 공유해야 한다.

설정을 제대로 사용하려면

noImplicitAnystrictNullChecks 를 이해해야하고, 두 옵션을 반드시 켜야 한다.

1. noImplicitAny

타입스크립트는 any에 대해서 타입체크를 하지 않기 때문에, 타입스크립트의 이점을 활용하려면 반드시 켜야한다. 해당 설정이 켜지면, 아래 코드에서 에러가 발생되는데 any를 코드에 넣지 않았지만, a, b가 any 로 간주되어 타입체커에 걸리게 된다. 오류는 명시적으로 any 를 선언하거나 더 구체적인 타입을 사용하여 해결한다.

function add(a, b){
    // Parameter 'a' implicitly has an 'any' type.
    // Parameter 'b' implicitly has an 'any' type.
    return a+b
}

2. strictNullCheck

해당 설정을 켜지 않으면 nullundefined 가 모든 타입에 허용된다. 해당 설정이 켜지면, 아래 코드는 에러를 발생한다.

const x:number = null // Type 'null' is not assignable to type 'number'
const y:string = undefined // Type 'undefined' is not assignable to type 'string'

strictNullCheck 는 코드 작성을 어렵게 하지만, nullundefined의 프로퍼티에 접근하는 런타임 오류를 방지한다. 아래와 같이 nullundefined를 체크하는 코드가 추가로 필요할 수 있다.

const el = document.getElementById('status')
if(el) {
	el.textContent = 'Ready'
}

결론

  • 타입스크립트의 설정은 tsconfig.json 으로 관리하여야한다.
  • 설정에서 가장 중요한 두 옵션은 noImplicitAnystrictNullCheck 이다.
  • strict를 켜면 두 옵션뿐만아니라 모든 체크가 켜지고 대부분의 오류를 잡아낼 수 있다.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment