🌞 1/19 내배캠 React 58일차 [typescript]

[ Typescript ]

---

[ 오늘 한 일 ]

- 어제 한 것 복습

- Ts 리펙토링 

- 유데미 React 수강

- Ts 문제 풀이

---

🛠 오늘의 트러블 슈팅

[Typescript] useState를 props로 가져올 때 어떻게 type을 설정해줘야 하는지에 대해

: 여기서 States라는 interface를 어디에 넣어줘야할지도 모르겠어서 한참 찾았다.

setState를 props로 넘길때 어떤 type을 설정해줘야 하는지 몰랐다.

위에 있는 setTodos,todos 부분이다.

그래서 찾아보다가

void로 넘기는 방법도 있지만

따로 정의 할 수 있는 타입이 있었다.

일단

import React, { useState, Dispatch, SetStateAction } from "react";

로 SetStateAction, Dispatch를 import하고

그럼 에러가 사라지는 걸 볼 수 있다

왜 사람들이 입력하고 코드를 짰는데 이게 맞는지 모르겠다는지 알겠다… 이 type이 맞는지 나도 잘 모르겠다 ㅠ

 

 🛠 참고한 사이트

21.12.23 [typescript] setState props로 넘길 때 Dispatch

Passing useState as props in typescript

Passing useState as props in typescript

---

[Typescript] uuidv4() 의 type 설정하기

uuidv4()의 타입을 설정해줘야 한다.

과연 uuid의 type은 무엇일까… 형식은 스트링인것 같은데

 

myuuid라는 interface를 따로 만들어서 uuidv4()는 string이라는 type을 주었다.

id: typeof uuidv4 //라는 값을 주기도 했다. (이것도 되긴했음...)

 

---

[Typescript] event 의 type설정하기

event 의 type설정하기

리액트에서 이벤트에 관련된 타입을 지원한다.

이벤트의 타입에 따라서 어떤 것을 가져올지 본다.

대표적인 이벤트타입 목록

React.ChangeEvent – onChange 이벤트 등에 사용

React.MouseEvent – onClick 이벤트 등에 사용

React.KeyboardEvent – onKeydown, onKeyup 이벤트 등에 사용

React.FormEvent – <form> 태그의 onSubmit 등에 사용

나는 form과 input창에 들어가는 event 이기 때문에 onChange,onSubmit에 필요한 타입

React.ChangeEvent 와 React.FormEvent 를 가져왔다.

import React, {ChangeEvent, FormEvent } from ‘react’

그리고 해당 타입에 맞는 HTML 요소의 타입도 알아내야 한다.

나는 아까 form,과 input 두가지의 HTML요소 타입이 있다.

이건 HTML 타입 요소들이다

참고 사이트

The HTML DOM API - Web APIs | MDN

그리고 이 HTML 타입을 event 타입에 제네릭 <> 형식으로 추가해준다.

예) (event : ChangeEvent<HTMLInputElement>) 이렇게 추가해주면 끝!

---

Ts 문제풀이

https://calm-arthropod-9ba.notion.site/Typescript-4ad93a0eb107430b86b9da72d37e9877