[2019.09.03] 오늘의 TIL - Type '{fontWeight}' is not assignable to type 'CSSProperties' 해결 방법

기본적으로 React 안에서, Tag 또는 Component에 Style을 적용하는 방법이 여러가지가 있다.

아래는 Style 적용 방법 중 하나이다.

 

# 글씨를 굵게 하는 style

// 첫 번째 방법
return (
  <div style={{fontWeight: 'bold'}}>
    Hello inyong~
  </div>
);


// 두 번째 방법
const fontStyle = {fontWeight: 'bold'};

return (
  <div style={fontStyle}>
    Hello inyong~
  </div>
);

위 코드에 적힌 두 방법은 TypeScript를 사용할 때에도 거의 무방하다. 

 

그러나 두 번째 방법에서는, TypeScript에서는 적용되지 않는 Style property가 있다. 

바로 위 코드의 'font-weight' property가 그 중 하나이다.

즉, TypeScript에선 두 번째 방법은 에러메세지가 발생한다. (첫 번째 방법은 가능.)

// 두 번째 방법
const fontStyle = {fontWeight: 'bold'};

return (
  <div style={fontStyle}>
    Hello inyong~
  </div>
);

 

Type '{fontWeight}' is not assignable to type 'CSSProperties'.

문제 원인을 찾아 봤으나, 그냥 타입스크립트 특성 상, 해당 방법으로는 호환이 잘 안되는 property가 있는 것 같다..

대신 아래와 같은 방식으로 해결할 수 있다.

const fontStyle = {fontWeight: 'bold' as 'bold'};

return (
  <div style={fontStyle}>
    Hello inyong~
  </div>
);

 

참고 문서 : https://stackoverflow.com/questions/48087015/typescript-error-during-inline-fontweight-style-in-react

Typescript error during inline fontWeight style in React