TypeScript - 초기세팅 설정 중 발생한 오류 목록 (트러블슈팅)

1. Create React App을 이용하여 React 앱을 생성
   npx create-react-app "" --template typescript

2. styled-components와 관련된 패키지 설치
   npm install styled-components @types/styled-components

3. eslint 관련된 패키지 설치
   npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

4. eslintrc.json 파일을 생성 후 다음과 같이 구성

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react/prop-types": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

5. prettier와 관련된 패키지 설치
   npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

6. .prettierrc.json 파일 생성 후 다음과 같이 구성

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true
}

---

1. styled-components와 typescript 간 패키지 의존성 충돌

npm install styled-components @types/styled-components를 이용해서 styled-components를 설치해주려고 했더니 npm err가 잔뜩 발생했다.

chatgpt한테 물어보니까

styled-components와 typescript의 버전 의존성 관계는 복잡합니다. styled-components 5.x 버전은 typescript 3.6.x 이상의 버전을 필요로 합니다. 그러나 styled-components 6.x 버전은 typescript 4.1.x 이상을 필요로 합니다. 이러한 의존성 충돌을 방지하려면 styled-components 5.x와 typescript 3.6.x 또는 styled-components 6.x와 typescript 4.1.x 이상을 함께 사용해야합니다.

따라서, styled-components 5.x와 typescript 3.6.x를 함께 사용하는 것이 좋습니다. 예를 들어, styled-components@5.3.1와 typescript@3.9.10 버전을 함께 사용할 수 있습니다.

라고 답해줌.

npm install styled-components --force를 사용하면 패키지 의존성 충돌을 무시하고 설치를 시도한다.
styled-components와 typescript의 버전은 서로 직접적인 의존성이 없기 때문에 각각 최신 버전을 사용하면 된다고 하는데 그럼 왜 충돌이 일어나는 걸까?

• chatGPT의 답변

  styled-components와 typescript가 직접적인 의존성이 없다고 해도, 여러 패키지들과의 간접적인 의존성 때문에 충돌이 발생할 수 있습니다. 예를 들어, styled-components가 사용하는 다른 패키지가 typescript의 특정 버전과 의존성을 가지고 있을 수 있습니다. 이 때, styled-components를 최신 버전으로 업그레이드하면, 해당 패키지와의 의존성이 바뀔 가능성이 있어서, typescript와 충돌이 발생할 수 있습니다. 따라서, 최신 버전을 사용하려면 각 패키지의 의존성 관리와 충돌을 예방하기 위한 주의가 필요합니다.

2. npm i -g typescript 권한 오류

npm start 해서 앱을 실행해보려고 하니까 tsc가 없다는 거임! (대체 왜..)
그래서 npm i -g typescript를 하려고 하니까 다음과 같은 오류 메세지가 떴다.

npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

자세히 읽어보니 내게 권한이 없댄다.. 보니까 sudo 명령어를 사용하여 npm을 관리자 권한으로 실행하는 해결방법이 있었다.

sudo npm install -g typescript

이걸 하고 나니 tsc -v를 쳤을 때 버전이 정상적으로 출력됨을 확인할 수 있었다.

3. Function component is not a function declaration 오류

react/function-component-definition에 대해 찾아보면 리액트의 함수형 컴포넌트 정의 방식을 지정하는 rule이 존재함을 알 수 있다.

"react/function-component-definition": 
[<enabled>,
{"namedComponents": "function-declaration" | "function-expression" | "arrow-function" | Array<"function-declaration" | "function-expression" | "arrow-function">,
"unnamedComponents": "function-expression" | "arrow-function" | Array<"function-expression" | "arrow-function">
}]

eslintrc 설정 파일의 rules에 react/function-component-definition을 추가하여 함수형 컴포넌트의 컴포넌트 정의 방식을 다음과 같은 코드를 추가하여 지정해주면 해결된다.

rules: {
  'react/function-component-definition': [2, { namedComponents: 'arrow-function' }],
}