[이펙티브 타입스크립트 완독하기] 1. 타입스크립트 알아보기 (2)

전인혁·2022년 11월 7일
0
post-thumbnail

≪이펙티브 타입스크립트≫ (댄 밴더캄 지음, 장원호 옮김, 인사이트, 2021)

1장. 타입스크립트 알아보기 (아이템1 ~ 아이템 5)

1장에서는 타입스크립트의 전체적인 내용을 이해하는데 도움이 되는 내용을 다룹니다.

  • 타입스크립트란?
  • 자바스크립트와의 관계
  • 타입스크립트의 타임에 관해
  • 덕 타이핑 가능여부
  • 기타 등등.

아이템2. 타입스크립트 설정 이해하기

function add(a,b){
  return a+b
}
add(10, null)

위 코드는, 오류없이 타입 체커를 통과할 수 있을까요?

설정이 어떻게 되어있는지 모른다면 대답할 수 없다 !
타입스크립트 컴파일러는 정말 수~많~은 설정을 가지고 있어서, 설정마다 결과가 다르기 때문입니다.

타입스크립트를 설정하는 방법?

  1. 커맨드 라인을 이용합니다.
$tsc --noImplicitAny program.ts
  1. (권장) 타입스크립트 설정파일을 이용합니다 tsconfig.json
// 타입스크립트 설정 파일(tsconfig.json) 생성
$tsc --init

어떠한 설정을 할 수 있나요?

  • 어디서 소스파일을 찾을지
  • 어떤 종류의 출력을 생성할지
  • 그 외

noImplicitAny와 strictNullChecks

영향력있는 설정들이다.

// 설정 예시
{
	"compilerOptions" : {
    	"noImplicitAny" : true,
        "strictNullChecks" : false
    }
}

noImplicitAny

  • 이름 그대로 해석하면, 암시적 Any를 사용하지 않겠다는 뜻.
  • 변수들이 미리 정의된 타입을 가져야 하는지에 대한 설정입니다.
// noImplicitAny 해제 시 (암시적 Any를 사용할 때)
function add(a,b){
  	return a+b;
}

위 예시에서, add 부분에 마우스를 올려보면 추론된 타입을 볼 수 있는데,
a와 b와 리턴값 모두 any 타입으로 추론됩니다.

만약, noImplicitAny 옵션이 true 상태라면, 위 코드는 에러가 발생할 것입니다.
-> 암시적 any가 적용되지 않기에, a,b와 리턴값의 타입이 지정되지 않았기 때문이다 !

any는 타입 체커는 존재의 의미를 잃게합니다.
그러므로 가급적, noImplicitAny 설정은 true로 두는 것이 좋습니다.

Tip !
타입스크립트를 처음 공부한다면, noImplicitAny 설정을 활성화하고, 모든 변수에 타입을 지정하도록 연습하는 것이 좋습니다.

그런데, 타입을 지정하면 어떤 점이 좋아요?

  • 가장 큰 장점 중 하나는, 오류를 발견하기 쉽다는 점 *
  • 코드의 가독성이 좋아집니다.
  • 개발자의 생산성이 향상됩니다.

안 쓸 이유가 없겠죠?

strictNullChecks

  • null과 undefined가 모든 타입에서 허용되는지 확인하는 설정입니다.
  • 이름그대로 null(또는 undefined)를 엄격하게 확인할 것을 결정하는 설정입니다.
const x : number = null

위 코드는 strictNullChecks가 해제되어있을 때에는 유효한 코드입니다.
엄격하게 검사하지 않기 때문이죠.

반대로 strictNullChecks가 설정되어 있다면 어떨까요?

null은 number 타입이 아닌, 별도의 기본 자료형이기에
엄격하게 생각하면, number 타입인 x로의 할당이 허용될 수 없습니다.

(strictNullChecks가 활성화 되어있을 때,) x에 null을 할당하고 싶다면,
x의 타입에 null을 추가(유니언 타입, Union type)해주어야 합니다.

const x : number | null = null

strictNullChecks는 null & undefined에 관한 오류를 잡는데에는 훌륭하지만, 초심자에게 있어 코드작성을 어렵게합니다.

가급적 strictNullChecks를 설정하는 것이 좋지만, 꼭 필요한 경우가 아니라면 필수는 아닙니다.

대신 undefined는 객체가 아닙니다. 라는 에러가 자주 등장할테니... 판단은 알아서?!

위 두가지 외에도 정말 많은 설정이 있지만, 이들보다 중요한 설정은 없다고 할 수 있습니다 !

요약

타입스크립트 컴파일러는 언어의 핵심 요소에 영향을 미치는 설정들을 가지고 있습니다.

설정할 때에는, 커맨드 라인보다는 tsconfig.json을 이용하자 !

noImplicitAny는 가급적 설정(true)하기 !

"undefined는 객체가 아닙니다"라는 에러를 보기 싫다면, strictNullChecks를 설정하기 !

엄격한 체크를 원한다면, strict 설정을 고려하기

profile
Front-end Developer

0개의 댓글