봉보로봉봉

객체를 선언해서 key는 숫자 value는 영문 월을 담아뒀는데 접근해서 사용하려고 하니까 빨간줄이 생겼다. as string으로 타입을 정해줘도 해결되지 않았다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index 대괄호 접근 키값이 any여서 그랬다. 객체에 타입을 정해주고 대괄호로 접근하려는 키값에 키라고 as 키워드를 사용해서 정해주니 해결됐다. const monthsEn : MonthsType = { '1':'Jan', '2':'Fab', '3':'Mar', '4':'Apr', '5':'May', '6':'Jun', '7':'Jul', '8':'Aug', '9':'Sept', ..

변수 선언하기 typescript를 사용하므로 defineComponent로 export default를 한다. 사용할 변수나 함수는 setup() 안에서 선언하고 return을 해준다. 변수는 reactive 함수로 감싸줘야 값을 동적으로 변경할 수 있는 것 같다. 선언한 변수를 이용해 class 넣기 일반적인 클래스는 class에 넣으면 되고 변수를 사용하는 class는 앞에 :을 붙여서 :class로 사용하면 된다. 리액트처럼 class 안에 다 넣으려고 {}를 쓰지 않고 따로따로 써도 동작한다. 한국어 English 함수 선언하기 사용할 함수도 똑같이 setup() 안에 선언하고 return 할 때 넣어주면 된다. export default defineComponent({ setup() { con..

여러분은 string[]과 [string]이 다른 것이라는 사실을 알고 계십니까...? 오늘 ChatGPT에게 물어보며 문제를 해결하던 중 새로운 개념을 발견했다. [string] is a tuple type with a single element of type string, while string[] is an array type that can have zero or more elements of type string. const tuple: [string] = ["hello"]; // valid const array: string[] = ["world"]; // valid const anotherTuple: [string] = []; // error: expects exactly one elemen..

저는 방금 막 vite로 vue + ts 프로젝트를 시작했을 뿐인데요... 타입스크립트님 또 왜 그러시는지요....🥲 Cannot find module './App.vue' or its corresponding type declarations. 이유 타입이 없으시답니다... 그래서 d.ts파일을 생성해줘야한다고 한다. // src/shims-vue.d.ts declare module '*.vue' { import type { DefineComponent } from 'vue'; const component: DefineComponent; export default component; } 참고 링크 1 참고 링크 2 참고 링크 3

React로 진행한 프로젝트를 중간에 Typescript로 변경하기 1 지난번에 변경하는 방법을 공부를 했는데 직업 바꾸려니 추가로 해줘야 하는 부분이 더 있어서 추가로 기록해 둔다. 기존에 vite로 환경을 구축하고 React로 진행했던 프로젝트(VITE와 Firestore를 사용했다.)를 Typescript로 업그레이드했다. 다른 타입스크립트 프로젝트를 참고하며 해결했다. 타입스크립트를 설치하고 파일 확장자를 바꾸자마자 뜨는 지독한 빨간 줄 해결하기~ 😀🤜 가장 상위 파일에 HTMLElement 붙여주기 // main.jsx ReactDOM.createRoot(document.getElementById('root')).render( ); // main.tsx ReactDOM.createRoot(doc..

Redux 공식 문서를 봐가면서 Redux를 적용했는데 reducer함수의 action 타입을 정해주는데 애를 먹었다. 이를 해결하다가 새로운 타입스크립트 문법을 알게 되었다. // action의 타입을 무엇으로 해야한단말인가... const todoReducers = (state = initialState, action) => { switch (action.type) { case 'ADD_TODO': // ... state 변경 로직 } } ReturnType ReturnType을 사용하면 함수 Type의 반환 타입으로 구성된 타입을 생성한다. ReturnType // 예시 type T0 = ReturnType string>; // type T0 = string type T1 = ReturnType v..

heart 값에 따라서 state를 바꿔주고 싶은데 prev에 undefined가 들어올 수도 있기 때문에 안된다고 에러가 떴다. heart ? setCountLikes((prev) => prev - 1) : setCountLikes((prev) => prev + 1); (parameter) prev: number | undefined 'prev' is possibly 'undefined'. 'prev' is possibly 'undefined'. 이유 undefined이 들어왔을 때를 대비해 처리해주면 되는데 countLikes나 typeof 연산자로 조건으로 If문을 사용하면 prev와 달라서 그런지 빨간 줄이 사라지지 않았다. 그래도 아래의 방법들로 해결할 수 있었다. keyword as heart..

state를 map 돌려서 JSX Element를 리턴하려는데 화면에는 아무것도 안뜨고 빨간줄만 죽죽 떴다. Type 'void' is not assignable to type 'ReactNode' 이유 map을 돌릴땐 return을 적었는지 꼭 확인합시다! 😉 // 안 된 이유 state.map((data)=>{{data.content}}) // return을 잊지말자 state.map((data)=>{return {data.content}})