기존 Type Script 항목을 조금씩 strict로 변경

이 글은'LITALICO Engineers Advent Calendar 2020 18일째 기사다.지각했어.Uncaught TypeError: Cannot read property 'name' of undefined응?API 반환값 같은 데이터를 뒤죽박죽으로 정리하진 않았지만.
네, 그것도 좋아요.변수| undefined잖아!오류가 발생하지 않았기 때문에 처리할 수 없습니다!일하고 있어요!?
왜냐하면tsconfig.json...
tsconfig.json

{
  "compilerOptions": {
    ...
    // "strict": true, // TODO: ちょくちょくONにして直してくれるとうれしい

...네.그렇구나.그래...
아니요!희망을 걸고 ON으로 갑시다!

$ yarn dev
...
ERROR in /home/user/repos/github.com/awesome_org/big-project/frontend/src/xxx/aaa.tsx
./src/xxx/aaa.tsx
[tsl] ERROR in /home/user/repos/github.com/awesome_org/big-project/frontend/src/xxx/aaa.tsx(14,43)
      TS2531: Object is possibly 'null'.

ERROR in /home/user/repos/github.com/awesome_org/big-project/frontend/src/xxx/bbb.tsx
./src/xxx/bbb.tsx
[tsl] ERROR in /home/user/repos/github.com/awesome_org/big-project/frontend/src/xxx/bbb.tsx(92,73)
      TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

ERROR in /home/user/repos/github.com/awesome_org/big-project/frontend/src/xxx/ccc.tsx
./src/xxx/ccc.tsx
[tsl] ERROR in /home/user/repos/github.com/awesome_org/big-project/frontend/src/xxx/ccc.tsx(103,68)
      TS2345: Argument of type 'Date | null' is not assignable to parameter of type 'Date'.
  Type 'null' is not assignable to type 'Date'.
...

그래.알겠습니다.

아까 쓴 코드만...

하지만 구축이 안 되면 자주 열 수도 없다.그럼에도 불구하고 프로젝트가strict로 가는 길은 영원히 폐쇄되어 있다.
따라서 적어도 쓰고 있는 코드를strict로 만들어야 한다.
편집기에만 오류를 설정한 것이다.

tsconfig.json 수정

개발자들은 모두 vscode,tsconfig를 사용했습니다.json을strict로 설정하면 편집기에서 잠시 오류가 발생합니다.
tsconfig.json

{
  "compilerOptions": {
    ...
-    // "strict": true, // TODO: ちょくちょくONにして直してくれるとうれしい
+    "strict": true, // webpackではfalseで上書きしてるので注意（エディタ上では有効）

웹 페이지에 strict 하지 마세요.

이러다가는 당연히 잘못된 폭풍우를 만날 수 있으므로 구축할 때strict 검사를 하지 마세요.
위 json의 평론에서 말한 바와 같이 웹 페이지는 거짓이다.
webpack.config.js

...
module: {
  rules: [
    {
      test: /\.(ts|tsx)$/,
      use: {
        loader: 'ts-loader',
        options: {
          compilerOptions: {
            // tsconfig上はtrueにしてエディタ上ではstrictチェックを入れ、
            // ビルド上では無効化することで無関係なファイルでエラーしないようにする
            strict: false,
          },
          ...

ts-loader의 옵션에서 compilerOptions.strict를 가짜로 명확하게 덮어씁니다.
테스트 프레임워크 등 웹 페이지 이외에 tsconfig를 읽는 것이 있다면 같은 설정이 필요합니다
이렇게 되면 편집기에서는 오류에 따라strict 처리를 엄숙하게 하고 기존의 다른 코드 구축에서는 이전의 검사 방식에 따라 무시됩니다.
그리고 tsconfig.json도 마찬가지로 댓글을 잘 달아주세요.
댓글이 없으면 장래의 멤버가괜히 신경 쓰일 거 아니야.

총결산

이렇게 해서 strict가 전혀 아닌 기존 프로젝트가 strict의 길을 걷기 시작했다.
포기하지 마세요. 조금이라도 좋은 마음가짐이 중요해요.