[React-Native] styled-components, Unknown property: 'elevation' ts-styled-plugin(9999) 경고 제거

⚡️Warning, Unknown property ‘…’ ts-styled-plugin(9999)

---

리액트 네이티브의 styled-components 라이브러리를 이용해 열심히 컴포넌트를 만들고 있는데

알 수 없는 요소라고 경고가 계속 발생했습니다.

 

작동은 잘 되지만 거슬리는건 못참기 때문에 좀 찾아보니

TypeScript에서 react-native만 가지고 있는 CSS 속성을 인식하지 못해 발생하는 문제였습니다.

---

📌 삽질

리액트 네이티브 관련 글들은 죄다 오래됐는데

그마저도 버전이 조금만 다르면 작동을 아예 안한다는 것에 질려버렸습니다.

 

이 문제 또한 돌고 돌아 해결했지만 23년에 RN 개발 시작하시는 분들을 위해 삽질한 것도 글에 포함해 봅니다.

 

🔎 지난 버전 라이브러리

$ npm install -D typescript-styled-plugin

// tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      {
        // "name": "ts-styled-plugin",
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            ...
          ]
        }
      }
    ]
  }
}

최근 글들을 보면 죄다 위와 같은 라이브러리를 설치한 후 tsconfig를 작성하라고 합니다.

 

무지성으로 이곳 저곳 다니며 따라해보니 경고가 도저히 잡히지 않아 npm에 직접 찾아봤습니다.

 

https://github.com/microsoft/typescript-styled-plugin

GitHub - microsoft/typescript-styled-plugin: TypeScript server plugin that adds intellisense to styled component css strings

이미 몇십분을 쏟았는데 찾아보니 deprecated 되어버린 라이브러리었습니다.

 

이래서 항상 공식문서를 1순위로 찾아봐야합니다.

https://github.com/styled-components/typescript-styled-plugin

GitHub - styled-components/typescript-styled-plugin: TypeScript server plugin that adds intellisense to styled component css str

npm 페이지에서 소개한 깃허브에 접속해보니 방법이 달라져있었습니다.

---

📌 해결 방법

공식 깃허브에는 VSCODE의 styled-components Extension을 설치하면 해결된다고 했지만
그래도 경고 표시가 뜬다면 다음과 같이 해결하라고 소개합니다.

 

저는 확장 프로그램을 설치해도 경고표시가 없어지지 않아 다음과 같이 해결했습니다.

 

validProperties 속성 배열에는 웹에서 사용하지 않고

RN에서만 사용되어 TS server가 인식하지 못하는 속성들을 넣어주면 됩니다.

# 라이브러리 설치
$ npm install -D @styled/typescript-styled-plugin

// tsconfig.json
{
    "compilerOptions": {
    "plugins": [
      {
        "name": "@styled/typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "aspect-ratio",
            "elevation",
            "margin-vertical",
            "margin-horizontal",
            "padding-horizontal",
            "padding-vertical",
            "resize-mode",
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "text-align-vertical",
            "tint-color"
          ]
        }
      }
    ]
  }
}

 

설정을 마쳤으면 F1이나 Ctrl + P 버튼을 누르고
>TypeScript: Restart TS Server를 입력해 타입스크립트 설정을 적용해주면 완료됩니다.