TypeScript 설정에 필수로 작성 해야 하는것

TypeScript 프로젝트를 진행할때 ts.config 어떻게 설정해놓으셨나요?

지금까지 CRA 또는 Next에서 설정해준 기본값 그대로 진행하셨나요?

 

저는 처음에 기본값 설정 그대로 진행했었는데요

처음 기본값으로 넣고 진행해본 이후에 후회했습니다.

 

"공식 문서 꼼꼼하게 더 읽어보고 프로젝트열껄..." 하고 말이죠

 

물론 TypeScript를 아주 잘 알고, 아주 잘 사용하고 계시는 분들이 많으시지만,

 

저는 잘모르고 시작했었습니다.

어떤 설정을 줘야하고 어떻게 시작해야하는지요.

 

그래서 오늘은 제가 후회했던 첫 기본 설정에 대해 말씀드리려고 합니다.

TypeScript를 사용하기 시작하신지 얼마 안되셨거나,

이제 사용해보실 생각이라면 도움이 더 될것 같습니다.

 

일단 기본으로 설정해주는 ts.config설정을 먼저 보여드리겠습니다.

CRA가 만들어주는 기본적인 ts.config.json 파일

 

 

그리고 오늘 제가 말씀드릴 설정은 noImplicitAny, strictNullChecks 설정입니다.

 

먼저 noImplicitAny 플래그부터 설명 드리겠습니다.

 

---

NoImplicitAny

TypeScript 에서는 타입 추론으로 대부분의 경우에서

타입을 명시적으로 선언하지 않아도,

 

TypeScript가 알아서 타입을 추론해 어떤 타입인지 알맞는 타입으로 선언이 됩니다.

 

하지만 몇몇의 경우에 TypeScript가 값의 타입을 추론하지 않고 any로 간주합니다.

 

JavaScript 관점으로 보았을때 모든 변수는 any 타입이기 때문에 큰 문제는 아닙니다.

 

그래도 저는 TypeScript 타입체크를 엄격하게 활성화해서 암묵적 any를 허용해주고 싶지 않습니다.

( 저뿐만 아니라 TypeScript를 사용하는 많은 프로그래머들이 원하는 것일겁니다. )

 

엄격하게 TypeScript 검사기를 사용하고 싶은 프로그래머 입장에서는 허용해주고 싶지 않고

암묵적인 any를 허용해주게 된다면 TypeScript를 사용하는 이유가 무색해집니다.

 

이런 경우에 noImplicitAny 플래그를 활성화하면 타입 추론이 되지 않고

any로 암묵적으로 추론되는 변수에 대하여 오류를 발생시킵니다.

 

TypeScript로 프로젝트를 시작하는 경우에는 대부분 true 설정으로 시작합니다.

 

TypeScript로 프로젝트를 시작한다면 noImplicitAny 설정을 꼭 켜주는게 좋겠습니다.

 

{
  "compilerOptions": {
	"noImplicitAny": true,
	// ...
  },
  "include": ...,
  "exclude": ...,
}

 

 

---

strictNullChecks

Null과 undefined의 처리를 잘한다면 정말 좋지만

생각보다 해당 부분을 놓치는 경우가 많습니다.

 

const test: string = undefined;
const test2: string = null

 

위와 같은 코드를 쓰게되는 경우도 있습니다.

strictNullChecks 설정을 사용하면 위 코드가 에러 표시가 됩니다.

 

{
  "compilerOptions": {
	"strictNullChecks": true,
	// ...
  },
  "include": ...,
  "exclude": ...,
}

 

strictNullChecks 플래그는 null과 undefined를 보다 명시적으로 처리하며,

 

null 과 undefined 처리를 잘 했는지 걱정하는것을 하지 않게 해줍니다.

 

하지만 null, undefined를 사용해야 하는 경우도 있습니다.

 

그럴때는 undefined를 사용하는것을 추천드립니다.

 

null이 아니라 undefined를 사용하는것을 추천한다고 말하는 이유는

제 다른글에서 설명을 적어 두었습니다.

 

https://waterworkcode.tistory.com/entry/Null-vs-Undefind

Null vs Undefind

 

읽어보시면 왜 undefined를 사용하는것을 추천하는지 바로 이해가 가실겁니다.

물론 저보다 똑똑한 여러분들은 이미 다 알고계시겠지만요!

 

---

그래서...

 

이것으로 오늘 말씀드리려고 한 

noImplicitAny, strictNullChecks 설정에 대해 모두 이야기해봤습니다.

 

TypeScript를 처음 사용하시거나, 아직 잘 모르시는 입장에서는,

직접 사용해보는것이 아니라면 대체 무엇인지 눈으로 보고 한번에 알기 어려우실 겁니다.

 

저도 그랬으니까요!

 

그래서 지금 진행하고 계신 프로젝트, 또는 다음 프로젝트에서 

해당 설정을 켜고 프로젝트를 진행해 보시는것을 추천드립니다.

 

우리는 혼자 코드를 작성하고 프로젝트를 진행하는것이 아니라,

다른 개발자들과 협업하고 그들과 서로 이해할 수 있는 코드를 작성해야하며

 

TypeScript의 의도처럼 유연함을 조금 덜어내고 버그, 오류를 잡아내고 싶으니까요...!

 

그럼 다같이 화이팅!!!