코딩애플강의를 보고 정리했습니다.

install

새롭게 설치

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

기존 프로젝트에 타입스크립트만 설치

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

리액트에서의 TS문법

일반 변수, 함수 타입지정

그냥 타입스크립트 배웠던 대로 똑같이 하면 된다.

JSX 타입지정

리액트에서 <div></div> 이렇게 쓰면 HTML이 아니라 JSX라고 불림

JSX.Element 사용

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

function component 타입지정

리턴타입으로 :JSX.Element는 생략해줘도 자동으로 타입지정된다.

type AppProps = {
  name: string,
};

function App(props: AppProps): JSX.Element {
  return <div>{message}</div>;
}

참고로 아래 코드처럼, props로 JSX를 입력할 수 있게 코드를 짜는 경우도있다.

<Container a={<h4>안녕</h4>} />;

function Container(props) {
  return <div>{props.a}</div>;
}

이럴땐 JSX.IntrinsicElements 라는 이름의 타입을 사용가능하다.

<div> <a> <h4> 같은 기본 태그들을 표현해주는 타입이다.
위의 코드의 컴포넌트에 타입을 넣고 싶으면 아래처럼 해주면된다.

type ContainerProps = {
  a: JSX.IntrinsicElements['h4'],
};

function Container(props: ContainerProps) {
  return <div>{props.a}</div>;
}

이렇게 해주면 a라는 props자리에 <h4>만 넣을 수 있게 타입쉴드를 씌워놓은것이 된다.

(참고)리액트 18버전부터는 JSX.IntrinsicElements는 props 타입넣을 때만 사용가능하다.

state문법 사용시 타입 지정

state를 만들 땐 자동으로 타입이 할당되지만, state 타입이 나중에 변화할 수도 있다.(흔치않음)
이럴 때 타입을 미리 정해줄 수 있다.

const [user, setUser] = (useState < string) | (null > 'kim');

<>Generic문법을 이용해서 타입을 useState함수에 집어넣는 식으로 설정하면 된다.

type assertion 문법 사용할 때

assertion하고 싶으면, as 또는 ‘<>’쓰면 되는데, 리액트에서는 컴포넌트로 오해할 수 있어서 꺾쇠 괄호는 리액트에서 쓰지않는다.
as 키워드만 쓴다.
하지만 as키워드는 타입스크립트 보안해제기 때문에, 타입이 100확실할때만 사용하자.