tsconfig strict option

최근에 프로젝트를 진행하다 하나의 문제를 맞닥뜨렸다

리액트 컴포넌트의 props를 interface로 지정을 해주고 있었는데 ?, optional로 지정해준 props가 원래였다면 기본 타입과 undefined 이렇게 타입이 될수 있다고 떠야 하는데 기본 타입만 뜨는 것이다

 

위의 사진을 참고하자면 ?, optional로 지정을 하면 왼쪽과 같이 지정해준 타입인 string[]과 undefined가 떠야 하는데

내 프로젝트에서는 왼쪽처럼 undefined는 없고 string[] 만 있는것이였다

 

해결

정상적으로 보이는 프로젝트와 내프로젝트를 비교해보니 문제는 tsconfig에 있었다 바로 tsconfig 설정파일 option 중의 하나인 strict option 때문이었다 strict option을 true로 설정해주니 제대로 타입이 보였다

 

strict option

strict option은 typescript에서 type을 보다 엄격하게 검사할수있는 option이다

strict option을 true로 설정해주면 아래의 option들을 true로 설정해준다

"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,

 

 

이번 props를 optional로 지정해도 안뜨는 문제는 아래의 option 중 하나 때문이라고 생각한다

 

strictNullChecks

엄격하게 null을 확인하는 option이다

stirctFunctionTypes

엄격하게 함수 타입을 확인하는 option이다

 

마무리

프로젝트에서 typescript를 사용하는데 너무 typescript 문법만 공부하고 이런 tsconfig 쪽 부분은 자세히 공부하지 않은것 같다

이번기회에 알게되어 좋은 공부가 된거 같다