가수면

타입스크립트로 마이그레이션 npm install typescript --save-dev yarn add typescript --dev tsconfig.json을 생성하고 기본 값을 추가 (tsc --init) 자바스크립트 파일들을 타입스크립트 파일로 변환 tsc로 잘 적용됐는지 확인해가며 작업 ※ 처음부터 타입을 엄격하게 적용하지 않을 것. any 타입으로 선언 후 any 타입을 더 적절한 타입으로 변경해 나갈 것 tsconfig.json target 컴파일된 자바스크립트 코드가 어떤 ECMAScript(웹 브라우저나 다른 실행 환경에서 동작하는 스크립트) 버전과 호환되어야 하는지를 지정. 항상 최신 버전을 지정하면 좋겠지만 호환되지 않는 브라우저도 있을 수 있기에 최소를 목표로 잡는 게 좋다. noIm..

'개체 리터럴은 알려진 속성만 지정할 수 있으며 '{ name?: string | null | undefined; email?: string | null | undefined; image?: string | null | undefined; }' 형식에 'username'이(가) 없습니다.' 기존 라이브러리 없는 속성을 지정할 경우 이러한 타입 오류가 발생한다. 이 경우 라이브러리에서 선언된 타입에 속성을 추가해주면 된다. 라이브러리에 선언 된 타입 확인하기 DefaultSession에 usename이라는 타입을 추가해주면 된다. 추가하기 // src\types\next-auth.d.ts import NextAuth, { DefaultSession } from 'next-auth'; declare modu..

event.stopPropagation(); event: React.MouseEvent event를 props로 넘겨줄 때 // MouseEvent를 import해줘야 하는 듯? import React, { MouseEvent } from "react"; interface UseTooltipResult { onMouseEnterHandler: (event: MouseEvent) => void; } form const onChangeHandler = (event: React.ChangeEvent) => { const onSubmitHandler = (event: React.FormEvent) => {

import { forwardRef } from "react"; import styled from "styled-components"; type SliderNumProps = { page: number; maxPage: number; opacity: number; }; const SliderNum = forwardRef(({ maxPage, page, opacity }, ref) => { let sliderNumBox = []; for (let i = 1; i < maxPage + 1; i++) { sliderNumBox.push(); } return ( {sliderNumBox} ); }); export default SliderNum; const SliderNumBox = styled.ul` posi..

인터섹션 타입두 개 이상의 타입을 결합하여 새로운 타입을 만들어내 여러 타입을 모두 만족시키는 타입을 의미한다.예시)interface IPerson { name: string; age: number;}interface IEmployee { company: string; position: string;}type IEmployeePerson = IPerson & IEmployee;keyof객체의 키 값들을 숫자나 문자열 리터럴 유니언으로 생성enum의 경우는 keyof typeof로 사용type Point = { x: number; y: number };type P = keyof Point; // “x” | “y”enum LogLevel { ERROR, WARN, INFO, DEBUG}// 'ERR..

리액트 쿼리로 가져오는 데이터가 배열이거나 객체일 때 아래처럼 리액트 쿼리에 제네릭을 먹이면 에러가 뜬다. 이럴 경우 제네릭을 여러 개 먹여도 해결되지 않는다. 해결법 받아올 때 타입을 지정해주지 말고 가공할 때 타입을 지정해 주면 된다. 보너스 위처럼 select옵션을 이용해 가공하려고 할 때 역시 제네릭을 없애고 select에서 가공한 후, 사용할 때 타입을 지정해 주면 된다.

JSX.Element children이 단일 React 요소여야 하는 경우 사용. 여러 요소는 허용하지 않는다. type Props = { title: string, children?: JSX.Element, }; const Page = ({ title, children }: Props) => ( {title} {children} ); 여러 children 사용 가능. 그러나 이렇게 해도 문자열은 허용하지 않는다. type Props = { title: string, children?: JSX.Element | JSX.Element[]; }; 이렇게하면 문자열도 가능. 그런데 숫자는 불가능... type Props = { title: string; children: | JSX.Element | JSX.E..

라이브러리의 매개변수 타입 선언해줘야 할 때 1. 해당 props를 타고 들어가 본다. 2. 선언된 것을 지정해준다 3. import한다. .

interface 객체를 정의할 때, 확장성이 있을 때 사용 type 데이터를 정의할 때, 확장성이 없거나 적다고 판단될 때 사용 확장 interface interface User { id: number; name: string; age: number; } interface Admin extends User { role: string; } type type PeopleType = { name: string age: number } type StudentType = PeopleType & { school: string } 함수 정의 interface interface Calculation { (a: number, b: number): number; } const add: Calculation = (a, b..

1. 유니온 타입 사용하기 2. if문으로 처리하기 3. 널 병합 연산자 or 논리합 사용하기 3. ! 붙이기 (비추천) 확장 할당 어션셜로 값이 무조건 할당되어있다고 컴파일러에게 전달해 값이 없어도 변수를 사용할 수 있게 한다고 한다. 그러나 null이나 undefined도 분명히 해야할 때가 있기 때문에 무조건적으로 권장되는 방법은 아님. 4. 스프레드 연산자로 풀고 !붙이기 (비추천) 'IntrinsicAttributes & IGetData' 형식에 할당할 수 없습니다. 오류 5. !말고 ?붙이기 (추천) 6. 타입 변경하기 'number' 형식은 'string' 형식에 할당할 수 없습니다. 오류 등 layoutId={String(data.id)} 7. as로 타입 단언하기(비추) data의 타입을..

1. 콘솔창의 결과 전역 변수로 저장 2. Object.keys(temp1).join() 입력 후 복사 3. vscode에 붙여넣기 후 쉼표 선택 후 'Ctrl(Command)+D: 같은 문자열 선택' 4. Object.values(temp1).map(v => typeof v).join() 5. 3번 과정으로 정제 후 'Shift+Alt(Option)+i: 선택한 모든 문자열에 가장 우측 끝으로 포커싱'을 이용해 붙여넣기 JSON데이터를 타입스크립트 타입으로 빠르게 변환시켜주는 사이트 https://app.quicktype.io/?l=ts http://json2ts.com/ Instantly parse JSON in any language | quicktype app.quicktype.io

숫자, 넘버 둘 다 사용하고 싶을 때 const [counter, setCounter] = useState(1); setCounter("안녕"); 로그인 로직에 적용 버튼이 form 밖에 있을 경우 MouseEvent import React, { useState } from "react"; const App = () => { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent) => { const { value } = event.currentTarget; setValue(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault()..

interface 객체의 모양을 확인해줌 예시 1) import Circle from "./Circle"; const App = () => { return ( ); }; export default App; import React from "react"; import styled from "styled-components"; interface ContainerProps { bgColor: string; } const Circle = ({ bgColor }: ContainerProps) => { return Circle; }; export default Circle; // const Container = styled.div도 가능 const Container = styled.div` width: 200px;..

설치 npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @types/라이브러리 이름 기존 앱에 설치 npm install --save typescript @types/node @types/react @types/react-dom @types/jest npx tsc --init index파일에 as HTMLElement 추가 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); tsconfig.json파일에 "jsx": "react-jsx" 추가 tsc app.ts ※ 열려있는 js파일 닫고 하는 걸 추천 숫자, 문자열, 불리언 문자열과 결합하면..