봉보로봉봉

axios.post에 url을 작성하고 body에 넣고 싶은 내용을 넣는다. 그리고 응답을 콘솔에 찍어보려고 하면 빨간 줄이 죽죽 생긴다. axios .post('http://localhost:8000/users/signup', { account: idValue, password: pwValue, nickname: nameValue, email: emailValue, }) .then((res)=>console.log(res)) axios 공식문서 이런 에러가 뜨는 걸로 봐서는 axios를 타입스크립트에서 사용하려면 요청 보내는 데이터와 응답받아서 오는 데이터의 타입을 지정해줘야 하는 것 같다. Property 'message' does not exist on type 'AxiosResponse'. 요청 ..

필요한 패키지를 설치한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom // jest도 사용한다면 추가한다. npm i typescript @type/node @type/react @type/react-dom @type/react-router-dom @type/jest 파일 확장자를 변경한다. .js => .ts .jsx => .tsx tsx로 변경한 파일부터 타입 스크립트를 얹어준다. interface를 선언하여 props에 type을 정해주거나 generic을 사용해가며 에러들을 해결해준다. ref.current 에러 해결하기 jsx를 tsx로 파일 속성을 변경하면 e와 ref.current에 빨간 줄이 ..

props로 받아온 id를 html태그의 id로 넣어주려고 하는데 자꾸 에러가 떴다. Type 'number' is not assignable to type 'string'. 이유 html id는 숫자로 시작할 수 없다. 이런 기본적인 것도 까먹다니 정신을 차려야한다....... 변수도 첫글자가 숫자면 선언이 안되는데!!!!!!! W3C 문서 ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). 참고1 참고2

타입스크립트에서 props 넘기기 props를 기존에 넘겨주듯이 넘겨줬다. 그랬더니 props 부분에 빨간줄이 떴다..🥹 제발.. 그만.... // 에러 const CheckList = ({ todos }) => { return ( {todos.map((el: Todos) => ( ))} ); }; export default CheckList; 이유는 props를 넘길때도 타입을 지정해주어야 하기 때문이다. 그래서 이리저리 검색을 해서 넣었더니 빨간줄이 사라졌다. interface Todos { id: number; todo: string; } interface TodosProps { todos: Todos[]; } const CheckList = ({ todos }: TodosProps): JSX.El..

처음에는 모든걸 괄호 안에 적어줬는데 자꾸 빨간줄을 띄우길래 괄호 안에 있던 걸 변수로 분리해줬다. 그래도 menu에서 빨간 줄을 띄웠다. const getRandomMenu = () => { const randomNum = Math.floor(Math.random() * foodArr.length); const menu = foodArr[randomNum] !== undefined ? foodArr[randomNum] : '분류를 선택해주세요'; // 여기서 menu에 자꾸 빨간 줄을 띄웠다. setTodayMenu(menu); }; 나는 아무것도 하지않았으나 타입스크립트가 추론하길 이 자리에 null과 undefined이 들어갈 수 없어서 불만을 띄운 것 같았다. 그래서 todayMenu state에..

배열에 타입도 야무지게 선언해줬는데 왜 또 화를 내시는 겁니까 타선생님...😇 const arr : string[] = ['string'] 'food.ts' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. 이유 ts파일에서 export를 해주지 않으면 타입스크립트는 화를 내는 것 같다. 아무것도 export하지 않는다면 이렇게 해주면 된다. export {} export를 해야하는 변수가 있다면 export를 붙여주면 된다. ... export cons..

타입스크립트 리액트 타입스크립트에서 js로 쓰던 파일은 ts로 jsx로 쓰던 파일은 tsx로 해주면 된다. 타입스크립트 styled-components styled-components를 타입 스크립트에서 사용하려면 추가적으로 다운을 받아줘야한다. npm i styled-components --save npm i --save-dev @types/styled-components 처음에는 타입을 받아오는 명령어를 다른걸 사용했었는데 Cannot find module 'styled-components' or its corresponding type declarations. 오류가 떠서 다시 --save-dev 를 추가해서 재설치해줬다. 참고 ThemeProvider 사용하기 기존에 나는 theme.js를 이런 ..

keyof keyof를 사용하면 인터페이스의 key들을 가져올수있다. interface User { name : string; age : number; hobby : string; gender : 'm' | 'f' | 'etc'; } type Userkeys = keyof User; // name, age, hobby, gender 그리고 이렇게 사용할 수 있다. interface User { name : string; age : number; hobby : string; gender : 'm' | 'f' | 'etc'; } type Userkeys = keyof User; // Userkeys에 없기때문에 에러 const uk1 : Userkeys = ''; // Userkeys에 있기때문에 가능 co..