[typescript] react에 적용하기

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

ㄴreact 모듈 설치후 위 명령어 입력 

js 파일 => .ts
jsx파일 => .tsx

interface IProps {
	word : IWord;
}

export interface IWord {   //export하면 다른 파일에서도 IWord사용가능 
	day: string;
    eng: string;
    kor: stirng;
    isDone: boolean;
    id:number;
}

export default function Word ({word : w} : IProps) { //{word:w}의 타입을 IProp로 정의 
	(...)
  }

import Word, {IWord} from './Word';  //IWord interface데려옴

export default function Day(){
	const {day} =useParams<{day: string}>();   //<제네릭>으로 params의 값 정의
    const words : IWord[] = useFetch(`...`);   //IWord 적용
    
    return (
    <>
    ...
    	<Word word={word) word={word.id} />
    ...
    </>
    );
   }

function onSubmit (e :React.FormEvent){  //event 타입은 외워야 함 
	e.preventDefault();
}

//Ref의 current는 렌더링 완료이후에도 null일수 있는 점 주의

const CreateWord = () =>{

...
	const engRef = useRef<HTMLInputElement>(null);  
	const dayRef = useRef<HTMLSelectElement>(null);
        
	if(dayRef.current && engRef.current){
		const eng = engRef.current.value;
		const day = dayRef.current.value;
	}
    ...
}

 

 

타입스크립트 사용관련 : 

타입스크립트 컴파일러 사용법 (tsc 커맨드)

 

ts-reset: 타입스크립트한테 뒤통수 맞지 않기