👩‍🎤 프론트엔드/typescript

[typescript] 동적으로 키가 추가되는 객체의 타입 지정하기

const cache = {}; const add = (id: string, value: string) => { cache[id] = value; }; const remove = (id: string) => { delete cache[id]; }; cache 객체에는 동적으로 키가 추가되고, 삭제될 수 있다. 1. Record 사용하기 const cache: Record = {} Record의 첫번째 인수에는 key의 타입, 두번째에는 value의 타입을 지정한다. Record 객체의 키가 Keys, 값은 Type에 지정하여 객체 타입을 만들 수 있다. 2. index 타입 지정 const cache: { [id: string]: string } = {}; 인터페이스 또는 타입 사용 interface C..

TS2339: Property 'reset' does not exist on type 'EventTarget'.

form 요소의 reset 메서드를 사용하고 싶은데 아래와 같은 에러가 발생한다. const handleFormSubmit = async (e: React.FormEvent) => { ... e.target.reset(); // TS2339: Property 'reset' does not exist on type 'EventTarget'. } TS2339: Property 'reset' does not exist on type 'EventTarget'. 해결 방법 1. 타입 단언하기 e.target에 as를 사용해서 HTMLFormElement 타입을 단언해줄 수 있다. (e.target as HTMLFormElement).reset(); const handleFormSubmit = async (e: R..

Property 'Authorization' does not exist on type 'AxiosHeaders'

현재 프로젝트에서 jwt를 사용하고 있기 때문에 axios interceptor를 이용해서 토큰에 따라 request 헤더 설정을 해주어야한다. 아래와 같이 interceptor를 설정하였다. axios.interceptors.request.use((request) => { request.headers ? (request.headers.Authorization = `Bearer ${token}`) : (request.headers = { Authorization: `Bearer ${token}` }); }); // 또는 axios.interceptors.request.use((request) => { if (request.headers) { request.headers.Authorization = `Be..