TIL 221101 타입스크립트는 불만이 많아~

타입스크립트 리액트

타입스크립트에서 js로 쓰던 파일은 ts로 jsx로 쓰던 파일은 tsx로 해주면 된다.

 

 

타입스크립트 styled-components

styled-components를 타입 스크립트에서 사용하려면 추가적으로 다운을 받아줘야한다.

npm i styled-components --save
npm i --save-dev @types/styled-components

처음에는 타입을 받아오는 명령어를 다른걸 사용했었는데

Cannot find module 'styled-components' or its corresponding type declarations.

오류가 떠서 다시 --save-dev 를 추가해서 재설치해줬다.

참고

 

 

ThemeProvider 사용하기

기존에 나는 theme.js를 이런 형식으로 사용했다.

// theme.js

export const text = '#333';

export const desc = '#888';

export const bg = '#f7f7f7';

export const blue = 'rgb(5, 109, 255)';

export const pink = 'rgb(197, 51, 255)';

export const purple = 'rgb(118, 37, 202)';

// 사용할때

import * as theme from './styles/theme';

 

검색했을 때 나오는 내용과는 달라서 내 코드에 맞게 변경해서 사용했다.

 

styled.d.ts에 타입을 선언하고

// styled.d.ts
import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    mainColor: string;
    mainColor2: string;
    subColor: string;
    text: string;
    border: string;
  }
}

 

theme.ts에 가서 선언한 타입을 import 해서 사용하면 된다.

import { DefaultTheme } from 'styled-components';

const theme: DefaultTheme = {
  text: '#555',
  border: '#ddd',
  mainColor: '#FA3270',
  mainColor2: '#E32269',
  subColor: '#FAB922',
};

export default theme;

 

 

onChange의 event에 타입 정해주기

평소처럼 onChange에 함수를 넣어줬는데 e에서 자꾸 에러가 났다. 그래서 찾아보니 React.ChangeEvent<HTMLInputElement>를 넣어줘야했었다. 그래서 넣어줬는데도 계속 빨간줄이 떴다!!!! formEvent로도 바꿔봤다가 ChangeEventHandler로도 바꿔봤다가 한참을 왜 그런지 분노하며 이유를 알고 허망해졌다. 🥲

state의 초기값이 undefined여서 그랬던 것이었다. 빈문자열을 넣어주니 해결됐다.

const WittyLogin = () => {
  const [idValue, setIdValue] = useState('');
  const [pwValue, setPwValue] = useState('');

  const handleIdValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setIdValue(e.target.value);
  };

  const handlePwValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPwValue(e.target.value);
  };

  return (
    <Main>
      <h3 className='greeting'>
        Hello <span>Witty!</span> 🐹
      </h3>
      <form className='formContainer' onSubmit={(e) => e.preventDefault()}>
        <div className='inputContainer'>
          <input
            type='text'
            id='id'
            placeholder='아이디'
            onChange={handleIdValue}
            value={idValue}
          />
          <input
            type='password'
            id='pw'
            placeholder='비밀번호'
            onChange={handlePwValue}
            value={pwValue}
          />
        </div>
      </form>
      <div className='btnContainer'>
        <button className='btn'>로그인</button>
        <button className='btn'>회원가입</button>
      </div>
    </Main>
  );
};

export default WittyLogin;

 

오늘 타입스크립트에게 받은 치욕.. 잊지않겠어... 두고봐.... 이겨먹고 말겠다....🔥