[Typescript]리엑트에서 타입스크립트 사용하기

1. 터미널에서 타입스크립트를 설치해준다

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

 

2. 파일 확장자명 변경하기

js파일 → .ts
jsx 파일 → .tsx

 

3. 인터페이스 만든 뒤 props타입을 만들어준 인터페이스로 선언하기 

*인터페이스란 타입을 정의한 규칙을 의미한다.

//(1) interface 만들기 
interface IProps {
  //word: any; any는 절대로 남발하면 안된다.
  word: IWord
}

interface IWord{ //프로퍼티들에게 타입을 지정할 수 있다.
  day: string;
  isDone: boolean;
  id: number;
}
//이렇게 타입을 지정해 주고 'word.'를 치게되면 프로퍼티가 자동완성으로 뜬다.
//또다른 예시로 'word.id.foreach()'으로 치면 넘버타입에는 사용할수 없는 함수를 빨간줄로 표시되어 알려준다.
//장점: 오타를 내거나 없는 프로퍼티를 사용하는 실수가 줄어든다.


export default function Word({ word:w }: IProps){ //props뒤에  (1)에서 만든 : Iprops를 선언한다.

}

 

 

- 옵셔널로 만드는법 

interface IWord {
  day?:string;
  eng?:string;
  isDone?:boolean;
  id:number;
}

// ? 를 넣어주어 옵셔널하게 쓸 수 있다.
// 하지만 단순히 에러가 나는것을 막기위해 사용하는것이라면 이 방식으로 사용하는것은 지양한다.

// 이럴땐 ...를 사용하여 프로퍼티를 모두 가져올 수 있다.
setWord({
  ...word, //-> (이렇게)
  id: 0})

 

 

-다른파일에서 인터페이스 가져오기

//----- 인터페이스가 있는 폴더 -----
export interface IWord{ // 앞에 export를 붙여준다
  day: string;
  isDone: boolean;
  id: number;
}

//-----다른 폴더------
import { IWord } from '(생략)' //import 해주기

const words : IWord[] = (생략)
// : IWord[] ->이런식으로 가져오면된다.

 

 

- 제네릭 사용

*제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.

  한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다.

const { day } = useParams(); //useParams에 day가 있는지 확신할 수 없는 상황. 
//day에 빨간 밑줄이 생기게 된다. 이럴땐 

const { day } = useParams<{ day: string }>(); // useParams뒤에 작성
// <>는 제네릭이라 하는데 어떤타입을 사용할지 파라미터처럼 가져와서 사용할 수 있다.

 

 

-event 타입지정

// (에시)
function onSubmit(e: React.FormEvent) { // e뒤에 타입지정. 
	e.preventDefualt();
}

//사실 이런거는 외우는 수밖에.. 인터넷에서 찾아서 입력하기

 

 

 -Ref 제네릭

//(예시)

//생략

const engRef = useRef<HTMLInputElement>(null); //-> 어떤 element인지 아래에서 확인후 작성.
const engRef = useRef<HTMLInputElement>(null);

return(
   //생략

   <input ref={engRef} type'text' /> //-> element가 input 이라는것을 확인.
   <select ref={engRef} type'text' /> //-> element가 select 라는것을 확인.

)

 

reference - 유튜브 코딩앙마