typescript + react 공부

<리액트 모듈 선언법>
import * as React from 'react';
import {Component, createRef} from 'react';

<class state에서 주의점>

interface State {
  state : 'waiting' | 'now' | 'done'
  message : string,
  result : stirng[]
}

class A extends Component<{}, State> {
  state : State = { // State 안넣으면 에러남
  	state : 'waiting',
  	message : '클릭시 시작',
 	result : []
	}
}
// constructor(props) {
// super(props)
// this.state
// } 에서는 State 안붙여도 에러 안남

<class life cycle 타이핑>
componentDidUpdate(prevProps: {}, prevState: State) {}

<함수형 component 사용법>

// SFC와 StatelessComponent는 depreated 됨
const a : React.FunctionComponent<{number :number}> = ({number}) => {
  return();
}

<hooks에서 빈배열 사용시 주의점>
const [a, setA] = useState([])
// 반환이 never[]로 되기 때문에
// useState<number[]>([]) 로 제너릭 사용해서 수동적으로 지정

keyof typeof RSP

as const 로 강제로 상수로 바꿀수 있음

as unknown as number type.d에 설정 되어있는 걸 강제로 형변환

<useRef 주의할 점>
const a = useRef(null)로 넣으면
a.current가 readonly로 바뀌어서 수정 불가
따라서, useRef(undefinde)로 넣어야 수정 가능

<setTimeout 주의할 점>
nodejs 타입을 browser 타입으로 바꾸기
window.setTimeout