오늘의 TypeScript

❗️❗️ 오늘은 React에서 TypeScript를 쓰는 법에 대해서 알아보겠다.

👉 기본설치

npx create react-app 프로젝트명 --template typescript

👉 기존 프로젝트에 typeScript를 더하고 싶을 때

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

👉 일반변수, 함수 만들 때 타입 지정을 잘하자

 

👉 JSX를 표현하는 타입(JSX.Element)

let 박스 :JSX.Element = <div></div>;

👉 component 만들 때 타입지정은 파라미터 & return 값

function Profile() :JSX.Element{
  return (
    <>
     프로필입니다.
    </>
  )
}

👉 component props 타입지정

function App() {
  return (
    <div>
      <h4>안녕하십니까</h4>
      <Profile name="철수" age="20"></Profile>
    </div>
  );
}

// props는 object 형식이니 아래처럼 작성해야한다.
function Profile(props : {name : string, age: string}) :JSX.Element{
  return (
    <>
     {props.name}프로필입니다.
    </>
  )
}

export default App;

👉 useState 타입지정<generic 문법 활용>

// 사실 useState은 타입이 알아서 지정된다. 
// 아래 예제는 state에 string | number를 쓰고 싶으면? 
// Generic 문법을 이용하자
let [user, setUser] = useState<string | number>("kim")