Conversation
| const handleDeleteTag = (e: React.MouseEvent<HTMLElement, MouseEvent>) => { | ||
| onRemove((e.currentTarget.parentNode as HTMLElement).dataset.tagName || ''); |
There was a problem hiding this comment.
MouseEvent 내부는 아래처럼 생겨서 HTMLElement 값이 T 제너릭에 위치하고, MouseEvent 값이 E 제너릭에 위치해서 UIEvent<HTMLButtonElement, MouseEvent> 로 변경되며 일반적인 UI 이벤트 속성을 상속 받게 되는거예요.
즉 아래처럼 되면서 동작하게 됩니다.
interface MouseEvent<HTMLElement, MouseEvent > extends UIEvent<HTMLElement, MouseEvent> {
아래는 React에서 제공하는 MouseEvent 타입이에요. 예시라서 실제 코드와는 다소 다를 수 있습니다.
interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T, E> {
altKey: boolean;
button: number;
buttons: number;
clientX: number;
clientY: number;
ctrlKey: boolean;
metaKey: boolean;
movementX: number;
...
getModifierState(key: string): boolean;
}
There was a problem hiding this comment.
이외에 추가적으로 사용하신 React.KeyboardEvent 도 비슷한 원리로 동작합니다. 🙂
| onChange: any; | ||
| onChange: (name: string, value: any) => void; | ||
| } |
There was a problem hiding this comment.
현재 해당 파일만 봤을 때는 onChange 타입이 아래처럼 변경할 수 있겠네요!
File 타입은 TypeScript가 기본적으로 제공하는 타입 정의 파일 (lib.dom.d.ts)에 포함되어 있기 때문에, 별도의 import 없이 사용할 수 있습니다.
interface ImageFileInputProps {
className?: string;
name: string;
value: Blob | MediaSource | null;
initialPreview: string;
onChange: (name: string, value: File | null) => void;
}
src/pages/api/Items.ts
Outdated
| export interface GetProductsProps { | ||
| order: 'recent' | 'favorite'; |
There was a problem hiding this comment.
type OrderType = 'recent' | 'favorite';
위처럼 별도로 정의 후 사용하게 되면 기존코드와 기능적으로는 동일하지만, 해당 타입을 다른 곳에서 재사용 할 수 있겠죠?
export interface GetProductsProps {
order: OrderType;
// ... 다른 속성들
}
| interface ButtonProps { | ||
| text?: string; | ||
| onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void; | ||
| isDisabled?: boolean; | ||
| iconFront?: React.ReactNode; | ||
| iconBack?: React.ReactNode; | ||
| customBorderRound?: any; | ||
| } | ||
|
|
There was a problem hiding this comment.
customBorderRound 값은 사용하지 않는 값이라 제거해도 될 것 같은데요!? 🤖
| e.preventDefault(); | ||
|
|
||
| navigate(`/items/${e.currentTarget.dataset.itemId}`); | ||
| }; | ||
|
|
||
| const fetchItemList = async ({ order, page, pageSize, keyword }) => { | ||
| const fetchItemList = async ({ | ||
| order, |
There was a problem hiding this comment.
여기서 미리 정의한 type OrderType = 'recent' | 'favorite' 값을 가져오면 되겠네요!
There was a problem hiding this comment.
아래 다른 값들도 처음 js -> ts 전환할때 any 로 시작하는 방법 좋구요. 👍 천천히 바꿔나가시면 됩니다.
| module.exports = { | ||
| root: true, | ||
| env: { browser: true, es2020: true }, | ||
| extends: [ | ||
| 'eslint:recommended', | ||
| 'plugin:@typescript-eslint/recommended', | ||
| 'plugin:react-hooks/recommended', | ||
| ], | ||
| ignorePatterns: ['dist', '.eslintrc.cjs'], | ||
| parser: '@typescript-eslint/parser', | ||
| plugins: ['react-refresh'], | ||
| rules: { | ||
| 'react-refresh/only-export-components': [ | ||
| 'warn', | ||
| { allowConstantExport: true }, | ||
| ], | ||
| }, | ||
| } |
| { | ||
| "compilerOptions": { | ||
| "target": "es5", | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "esModuleInterop": true, | ||
| "allowSyntheticDefaultImports": true, | ||
| "strict": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "node", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "noEmit": true, | ||
| "jsx": "react-jsx" | ||
| }, | ||
| "include": ["src"] | ||
| } |
There was a problem hiding this comment.
tsconfig 설정 잘하셨습니다.
각각 어떤 의미가 있는지 공부해보면 좋겠어요. 🙂
컴파일 대상 파일들을 어떻게 변환할지 다양한 옵션들이 많거든요.
요구사항
기본
스프린트 미션 1 ~ 7에 대해 typescript를 적용해주세요.