JS 프로젝트 TS로 마이그레이션하기

알고리즘 텀 프로젝트에서 간단하게 js로 작업을 하였는데 TS를 배우면서 한번 적용해 보고 싶어졌다 그래서 무작정 시작하는 JS프로젝트 TS로 마이그레이션 하기!

 

기본 세팅

일단 타입스크립트도 라이브러리다 설치하자

npm i typescript

기존 프로젝트에 tsconfig파일 설정하기

npx를 통해 간단하게 설정 파일을 만들 수 있다.

npx tsc --init

타입스크립트의 핵심은 타입!!

타입 또한 설치해 주어야 한다 각 프로젝트에 필요한 라이브러리들의 타입을 설치해주자

내가 사용했던 타입은 jest, node, react, react-dom, styled-components의 타입을 설치해 주었다

npm i @types/react ...등등

eslint 또한 typescript에 맞춰서 다시 init으로 세팅해주었다

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

 

이제 하나씩 TS로 바꿔보자

 

ts로 마이그레이션 할 때는 일단 돌아가게 만들어야 한다.

고로 끝단에 있는 컴포넌트 위주로 교체하면서 계속 지속 가능하게 만들어야 의미가 있다. (본인은 아무 생각 없이 눈에 보이는 것부터 ts로 바꿨더니 전부 고칠 때까지 웹을 실행하지 못했다는 전설이….)

 

TS 파일로 교체 하기

 

교체를 시작하면 엄청난 빨간 줄이 반겨줄 것이다 하나씩 걷어내 가면서 완성시키자...

 

 

TS의 철저한 꼼수 방지

타입스크립트를 활용하면 js만 하던 꼼수(?)들이 불가능해진다 간단하게 코드를 짤 수 있었지만 타입스크립트는 허용하지 않는다

Input 컴포넌트에 대해 onChange함수를 하나 만들어서 여러 컴포넌트의 name을 가져와 state에 그 name값에 맞는 value를 할당하는 코드를 사용했었다.

interface Weight {
  name: string;
  value: number;
}

const onChangeWeight = (
  event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
) => {
  setWeights((pre) => {
    return produce(pre, (draft) => {
//draft 의 타입은 Weight이다.
      draft[event.target.name] = event.target.value;//에러발생
    });
  });
};

//컴포넌트 부분
<sampleInput
	type="number"
	name="value"
	onChange={onChangeWeight}
	value={weight.value}
/>
<sampleInput
	name="name"
	onChange={onChangeWeight}
	value={weight.name}
/>

 

타입스크립트로 들어오면서 서로 다른 타입 때문에 이가 불가능 해 진다. event.target.value로 들어오는 값은 string이지만 값을 할당받는 쪽은 string이나 number로 받기 때문에 타입 에러가 난다.

따라서 타입 가드를 이용해서 분리해주어야 한다 

 

TS로 마이그레이션 하며 느낀 점

1. 코드양 자체는 많이 늘었지만 타입을 지정해서 사용하니 코드 자체가 견고해지고 에러 발생률도 적어지고 자동완성 기능이 추가됨에 따라 매우 편했다.
2. 기존에 조금만 복잡해지는 json구조를 가지고 있을 때 속성 값을 자동완성으로 띄워줘 정의 파일을 왔다 갔다 해야 하는 일이 줄었다.
3. 개발자를 고통받게 하는 undefined is not~와 같은 잘못된 값을 참조하는 에러를 실행 전에 감지할 수 있어 편했던 것 같다.