[TypeScript] with React

1. 일반 변수, 함수 타입지정

일반적인 TypeScript 쓰듯이 쓰면 됨.

2. JSX 타입 지정

let Box :JSX.Element = <div></div>
let Button :JSX.Element = <button></button>

3. function component 타입 지정

type userProps = {
  name: string;
  age: number;
}; 

function User (props: UserPorps) :JSX.Element {
  return (
    <div>{context}</div>
  )
}

• props 타입 지정
• 컴포넌트는 JSX를 return하기에, return 타입을 JSX.Element로 지정해준다.

type ContainerProps = {
  x: JSX.IntrinsicElements['li'];
}; 

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

props로 JSX를 넣을 수도 있다.
JSX.IntrinsicElements는 <div> <a> <h4> 와 같은 기본 태그들을 표현해주는 타입이다.
위 코드의 경우, x라는 props에 <li> 만 사용할 수 있도록 타입 지정을 한 것이다.

4. state 문법 사용 시 타입 지정

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

보통 state는 자동으로 할당되나, 미리 지정해야 할 경우엔 위처럼.

5. type assertion 문법 사용할 때

let exCode = <number> code; // 꺾쇠 사용 금지

assertion에는 as 또는 <>를 사용하는데,
리액트에서는 컴포넌트로 오해할 수 있어서 as만 사용한다.
(as 또한 타입스크립트의 보안을 해제하는 것이기 때문에 100% 확실할 때만 사용)