좌충우돌 개발자의 길

1. Styled-Components에 타입스크립트 사용하기 - 변환 전 자바스크립트 코드 export const Modal = styled.div` display: ${(props) => props.display}; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; background-color: rgba(0, 0, 0, 0.6); ` - 변환 후 타입스크립트 코드 export const Modal = styled.div` display: ${(props: { display: string }) => props.display}; align-items: center; position: fixed; ..

1. 컴포넌트 props 타입 정의하기 - 변환 전 자바스크립트 코드 const goalCard = (data) => { return ; }; ... function GoalCard({ data }) {...} - 변환 후 타입스크립트 코드 const goalCard = (data: GoalDataInfo) => { return ; }; ... function GoalCard({ data }: GoalProps) {...} // 타입 설정 export interface GoalDataInfo { startYear: string; startMonth: string; startDate: string; endYear: string; endMonth: string; endDate: string; goalCont..

0. 타입스크립트를 만나고 에러를 마주할 수 있어서~ 가계부를 자바스크립트로 개발을 한 후, 타입스크립트로 변환을 했다. 그 과정에서 너무나도 많은 에러를 만났고,,, 이 에러들을 해결하기 위해 다양한 해결방안을 알 수 있었다. 그중 가장 인상 깊었고, 해결하는 데 가장 애먹었던 에러들과 해결방법에 대해 정리하고자 한다. 1. 타입스크립트로 변수를 구조 분해 할당 - 기존 자바스크립트 코드 const [loading, response, error] = usePromise(() => { ... } - 변환한 타입스크립트 코드 const [loading, response, error]: any = usePromise(() => { ... } - 참고 사이트 https://stackoverflow.com/qu..

0. 타입스크립트를 만나고 에러를 마주할 수 있어서~ 가계부를 자바스크립트로 개발을 한 후, 타입스크립트로 변환을 했다. 그 과정에서 너무나도 많은 에러를 만났고,,, 이 에러들을 해결하기 위해 다양한 해결방안을 알 수 있었다. 그중 가장 인상 깊었고, 해결하는 데 가장 애먹었던 에러들과 해결방법에 대해 정리하고자 한다. 1. 타입스크립트로 변수를 구조 분해 할당 - 기존 자바스크립트 코드 const [loading, response, error] = usePromise(() => { ... } - 변환한 타입스크립트 코드 const [loading, response, error]: any = usePromise(() => { ... } - 참고 사이트 https://stackoverflow.com/qu..

오류 is not assignable to type 'IntrinsicAttributes && boolean' 이 뜬다.. 무작정 저 위의 에러 내용을 구글링 해봤지만 잘 나오지 않고 나와도 나와 비슷한 유형으로 에러가 뜨는 경우가 없었다. 해결 방법 무작정 구글링하기보다는 근본적인 문제점이 뭔지 파고들었다. 난 왜 에러가 나오게 코딩했을까? 바로 typescript로 react props의 타입을 설정하는 방법을 몰라서였다. (바보구나..) 'typescript react props' 을 구글링을 했고 내 에러를 해결할 수 있었다. (내가 생각한 TS로 react props 설정했을 때의 코드) import React from 'react'; const Greetings = ({ name: string..

1. 컴파일 tsc 파일명.ts 타입스크립트 파일을 컴파일하고 index.html(예시)로 가져올 파일명.js를 생성 2. light-server package.json 파일 옆에 항상 index.html 파일을 제공하는 간단한 서버 3. 타입스크립트 공부용 웹사이트 typescript playground 4. 타입 정의 콜론 + 원하는 타입명 function add(text:string, num:number){ console.log(num1,num2); } function showItems(arr:number[]){ arr.forEach((item)=>{ console.log(item); } } showItems([1,2,3]); - 튜플 : 배열과 비슷한 모양으로 인덱스별로 타입이 다를 때 사용 le..

1. CRA로 만든 폴더에 TS 설치하기 npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom 2. 파일 확장자명 변경 .js -> .ts .jsx -> .tsx + jsx vs js //jsx function App(){ return ( Hello react ); } //jsx를 js로 변환 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 3. type 적용 4. 에러 해결1 -> 기존의 word 객체를 사용하면서 id만 0으로 바꿔줌..