기존 React에 TypeScript 적용하기

1. TypeScript 적용

(1) 새로운 프로젝트를 TypeScript로 생성하기

npx create-react-app 프로젝트이름 --template typescript

(2) 기존 React에 TypeScript 적용하기

#npm
npm install typescript @types/node @types/react @types/react-dom @types/jest

#yarn
yarn add typescript @types/node @types/react @types/react-dom @types/jest

---

2. TypeScript 설정

tsc 명령어를 사용하여 tsconfig.json을 생성한다.

tsc --init

원하는 옵션을 추가하여 tsconfig.json 을 설정한다.

{
    "compilerOptions": {
        "outDir": "build",
        "target": "es6", //어떤버전의 js로 컴파일할지 정의
        "lib": [
            //어떤 환경에서 사용하는지 정의(api자동완성 제공해줌)
            "dom", //브라우저
            "dom.iterable",
            "esnext"
        ],
        "baseUrl": "./src", // 추가된 것 ./src를 절대 경로로 지정
        "allowJs": true, //ts안에서 js허용(js파일 import가능)
        "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의 모든파일 확인함
        "src"
    ],
    "exclude": ["node_modules"]
}

https://www.typescriptlang.org/tsconfig

TSConfig Reference - Docs on every TSConfig option

---

3. 스크립트 수정

.js / .jsx 파일들을 .ts / .tsx로 변경한다.

---

index.js → index.tsx

• ❗️ as HTMLElement추가
  • getElementById로 받는 객체 타입을 지정해서 TS가 데이터 타입을 알 수 있게 해줌

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement //❗️ as HTMLElement추가
);
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

---

App.js → App.tsx

useState<Generics>()

state의 type을 지정할 때에는 위와 같이 Generics안에 타입을 지정해주면 된다. 그런데 사실 초기값을 지정해주면 알아서 타입을 유추하기 때문에 굳이 지정해주지 않아도 무방하다.

다만, 다음과 같은 경우에는 Generics을 사용하는 것이 좋다.

▶  상태가 null일 수도 있고 아닐수도 있을때

▶  상태의 타입이 까다로운 구조를 가진 객체이거나 배열일 때

https://velog.io/@jjburi/TypeScript-useState%EC%97%90%EC%84%9C-type-%EC%A7%80%EC%A0%95

[TypeScript] useState에서 type 지정

 

import React, { useState } from "react";
import { MdAddCircle } from "react-icons/md";
import "./App.css";
import Template from "./components/Template";
import TodoInsert from "./components/TodoInsert";
import TodoList from "./components/TodoList";

export interface Todo {
    id: number;
    text: string;
    checked: boolean;
}

let nextId = 4;

const App = () => {
    const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
    const [insertToggle, setInsertToggle] = useState<boolean>(false);

    const [todos, setTodos] = useState<Todo[]>([
        {
            id: 1,
            text: "할일 1",
            checked: true,
        },
        {
            id: 2,
            text: "할일 2",
            checked: false,
        },
        {
            id: 3,
            text: "할일 3",
            checked: true,
        },
    ]);

    const onInsertToggle = () => {
        if (selectedTodo) {
            setSelectedTodo(null);
        }
        setInsertToggle((prev) => !prev);
    };

    const onInsertTodo = (text: string) => {
        if (text === "") {
            return alert("할 일을 입력해주세요.");
        } else {
            const todo = {
                id: nextId,
                text,
                checked: false,
            };
            setTodos((todos) => todos.concat(todo)); //상태 불변성 유지 push 대신 concat
            nextId++;
        }
    };

    const onCheckToggle = (id: number) => {
        setTodos((todos) =>
            todos.map((todo) =>
                todo.id === id ? { ...todo, checked: !todo.checked } : todo
            )
        );
    };

    const onChangeSelectedTodo = (todo: Todo | null) => {
        setSelectedTodo(todo);
    };

    const onRemove = (id: number) => {
        onInsertToggle();
        setTodos((todos) => todos.filter((todo) => todo.id !== id));
    };

    const onUpdate = (id: number, text: string) => {
        onInsertToggle();
        setTodos((todos) =>
            todos.map((todo) => (todo.id === id ? { ...todo, text } : todo))
        );
    };

    return (
        <Template todoLength={todos.length}>
            <TodoList
                todos={todos}
                onCheckToggle={onCheckToggle}
                onInsertToggle={onInsertToggle}
                onChangeSelectedTodo={onChangeSelectedTodo}
            />
            <div className='add-todo-button' onClick={onInsertToggle}>
                <MdAddCircle />
            </div>
            {insertToggle && (
                <TodoInsert
                    selectedTodo={selectedTodo}
                    onInsertToggle={onInsertToggle}
                    onInsertTodo={onInsertTodo}
                    onRemove={onRemove}
                    onUpdate={onUpdate}
                />
            )}
        </Template>
    );
};

export default App;

---

다른 component들에서 props type 지정해주기

함수가 props로 전달될 때, 딱히 return을 하고 있지 않다면 void로 설정! 

interface PropsType {
    todo: Todo;
    onCheckToggle: (id: number) => void;
    onInsertToggle: () => void;
    onChangeSelectedTodo: (todo: Todo | null) => void;
}

const TodoItem = ({
    todo,
    onCheckToggle,
    onInsertToggle,
    onChangeSelectedTodo,
}: PropsType) => {

 const { id, text, checked } = todo;
    return (
...생략

---

event type 설정해주기

🚫 event 는 target을 가지고 있지않다
.onChange에 React.ChangeEventHandler<HTMLInputElement>를 적용해주니 뜨는 에러..
solve
ChangeEventHandler -> ChangeEvent

    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
    };
    
    return (
		<input
			placeholder='add your to-do'
 			value={value}
			onChange={onChange}
        ></input>

    const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        onInsertTodo(value);
        setValue("");
        onInsertToggle();
    };
    
    return (
		<form
			onSubmit={
				selectedTodo? () => {
                              onUpdate(selectedTodo.id, value);
                }: onSubmit}
            >
        </form>