JavaScript에서 TypeScript로 | React ⚛️로 완전한 가이드

내용의 테이블

📌 Introduction

📌 Introduction to TypeScript

➡ Variables

➡ Functions

➡ Multiple Types

➡ Classes

📌React TypeScript Project Structure

➡ Models

➡ Apis

➡ Components

➡ Pages

📌Thank you

소개

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and so instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉

The whole syntaxes and code are uploaded on this 👉 Repository . 유용하다고 생각되면 저장소에 별표를 표시하여 감사를 표시할 수 있습니다. 감사 !

TypeScript 소개

I know most of you guys who are reading this blog are either not familiar with TypeScript or have a little knowledge about TypeScript as a whole. Don't worry in this whole blog we are going to cover every single thing from the start to bottom and even if you are new to TypeScript you can build a good project easily along with React.

Let's first understand some important syntaxes of TypeScript !

I will be explaining the syntaxes considering that you are coming from JavaScript background and have knowledge about the syntaxes of the same !

변수

JavaScript 🟡

let a = "check";
let b= 2;
let c= {
    h: "element"
};
let d= [1,2,3];
let e= false;
let f= ["check",2]
let g= c.h;
let i=null
let j=undefined
let k= [
    {
        h:"element1"
    }
]

TypeScript 🔵

let a: string = "check";

let b: number = 2;

interface ctype {
    h:string
}
let c: ctype = {
  h: "element",
};

let d: Array<number> = [1, 2, 3];

let e: boolean = false;

let f: [string, number] = ["check", 2]; //tuple

let g: string = c.h;

let h: unknown = "noideaabout"; //a variable whose type is not known it could be a string, object, boolean, undefined, or other types but not number

let i:null=null

let j:undefined=undefined

let k: Array<ctype> = [
    {
        h:"element1"
    }
]

기능

JavaScript 🟡

let func1= (arg1) => {
    return "str"
}

let func2 = (arg2) => {

}

TypeScript 🔵

const func1 = (arg1: number): string  => {
    return "str";
};


const func2 = (arg1: number): void  => {

};

여러 유형

JavaScript 🟡

function randomfunc(arg) {
    // ...
  }
  randomfunc({ shape:"check1" });
  randomfunc({ shape:undefined, xPos: 100 });
  randomfunc({ shape:2, yPos: 100 });
  randomfunc({ shape:"check1", xPos: 100, yPos: 100 });

TypeScript 🔵

interface typeOptions {
    shape: string | undefined | number;  //multiple types to same parameter
    xPos?: number;  //optional parameters
    yPos?: number;  //optional parameters
  }
function randomfunc(arg: typeOptions) {
    // ...
  }
  randomfunc({ shape:"check1" });
  randomfunc({ shape:undefined, xPos: 100 });
  randomfunc({ shape:2, yPos: 100 });
  randomfunc({ shape:"check1", xPos: 100, yPos: 100 });

클래스

JavaScript 🟡

class Check {
    a;
    b;
  }

const ch = new Check();
ch.a = 0;
ch.b = "check-string";

TypeScript 🔵

class Check {
    a: number;
    b: string;
  }

const ch = new Check();
ch.a = 0;
ch.b = "check-string";

Now that we are familiar with all the syntaxes of TypeScript we can now dive into React with TypeScript full project setup.

Let's go !

React TypeScript 프로젝트 구조

Here's a small peak to the Project :

명령을 사용하여 TypeScript 템플릿으로 React 프로젝트를 시작하겠습니다.

npx create-react-app client --template typescript

참고: 전체 구조를 설명하기 위해 todo list 프로젝트를 만들어 모든 사람이 다른 프로젝트나 제품에서 동일한 것을 구현하는 방법을 알 수 있도록 할 것입니다.

프로젝트와 TypeScript 반응

모델

ITask.ts

export interface Tasks {
    id: number,
    title: string,
    content: string
}

export interface TaskList extends Array<Tasks>{}

export interface TasksProps {
    d: TaskList | undefined,
    changed: Function
  }

여기 이 프로젝트에서 내가 사용한 3개의 인터페이스가 있음을 볼 수 있습니다. 첫 번째 인터페이스Tasks는 객체 배열의 요소에 대한 설명이고 두 번째 인터페이스TaskList는 인터페이스Tasks의 배열 선언입니다.

세 번째로 다른 인터페이스TasksProps가 있습니다. 이 인터페이스는 구성 요소 간에 전달되는 동안 입력하는 모든 소품을 설명하는 데 사용됩니다.

아피스

Task.ts

import axios          from "axios";
import { TaskList, Tasks } from "../../models/ITask";
import { token } from "../../utils/authController";

const baseUrl = "http://localhost:5000";


//receive tasks
export const getTasks = async () => {
    try {
        const response = await axios.get(
            baseUrl + '/tasks/gettasks', { headers: { 'Authorization': `bearer ${token}`, } });
        return response.data as TaskList;
    } catch (e) {
        console.log(e);
    }
};

//add tasks
export const postTasks = async (data:Tasks) => {
    try {
        const response = await axios.post(
            baseUrl + '/tasks/addtasks', data, { headers: { 'Authorization': `bearer ${token}`, } });
        return response.status as number;
    } catch (e) {
        console.log(e);
    }
};

여기서는 백엔드 호출을 위해 axios를 사용했습니다. 선호도는 당신에게 다를 수 있습니다! 여기서 주요 아이디어는 모든 개발자가 올바른 구문으로 호출하고 원하는 형태의 응답 본문을 얻을 수 있도록 각 함수가 가질 수 있는 인수 및 반환 유형을 입력하는 것입니다.

컨트롤러

authController.tsx

export const token=localStorage.getItem("idtoken") as string

컨트롤러는 프론트엔드 개발자에게 필수적인 요소입니다. 웹사이트의 흐름을 결정하는 것은 대부분 웹사이트의 컨트롤러입니다. 여기에서와 같이 인증 부분은 대부분의 모든 구성 요소에 대한 흐름 결정자가 되기 때문에 컨트롤러에 배치됩니다.

구성품

헤더.tsx

import React, { useState } from 'react'
import './Header.css'

const Header = () => {
  return (
    <nav>
      <h1>Todo List</h1>
    </nav>
  )
}

export default Header

TaskInput.tsx

import React, { useState, useEffect } from "react";
import { postTasks } from "../../apis/Tasks/Task";
import { TasksProps } from "../../models/ITask";
import Home from "../../pages/Home/Home";
import "./TaskInput.css";

export const TaskInput: React.FC<TasksProps> = ({ d, changed }: TasksProps) => {
  //states
  const [callapi, setcallapi] = useState<Boolean>(false);
  const [sendd, setsendd] = useState<Boolean>(false);
  const [content, setcontent] = useState<string>("");
  const [title, settitle] = useState<string>("");

  console.log("TaskInput")
  console.log(d)

  //api-call
  useEffect(() => {
    const senddata = () => {
      postTasks({id:d?.length!+1, title: title, content: content})
        .then((res) => {
          if (res === 200) {
            let updatedata: Array<Object> | undefined = d;
            updatedata?.push({
              id: d?.length! + 1,
              title: title,
              content: content,
            });
            console.log(updatedata)
            changed(updatedata);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };

    if(sendd)
    {
      senddata();
      changed([]);
    }
  }, [callapi]);

  return (
    <div className="taskinput">
      <h1>Add Tasks</h1>
      <input type="text" placeholder="title" onChange={(event)=> {
          settitle(event?.target?.value)
        }}/>
      <textarea
        name="content"
        id=""
        cols={20}
        rows={10}
        placeholder="content"
        onChange={(event)=> {
          setcontent(event?.target?.value)
        }}
      ></textarea>
      <div className="add">
        <button onClick={()=> {
          setsendd(true);
          callapi ? setcallapi(false) : setcallapi(true);
        }}>Add</button>
        <i className="fa-solid fa-plus"></i>
      </div>
    </div>
  );
};

export default TaskInput;

작업.tsx

import React, { useEffect, useState } from "react";
import { getTasks } from "../../apis/Tasks/Task";
import { TaskList, TasksProps } from "../../models/ITask";
import "./Tasks.css";

export const Tasks: React.FC<TasksProps> = ({ d, changed }: TasksProps) => {
  //states
  const [callapi, setcallapi] = useState<Boolean>(false);

  console.log("Tasks")
  console.log(d)


  //api-call
  useEffect(() => {
    const receivedata = () => {
      getTasks()
        .then((res) => {
          changed(res);
        })
        .catch((error) => {
          console.log(error);
        });
    };

    receivedata();
  }, [callapi]);

  return (
    <div className="tasks">
      {d?.map((ele) => {
        return ele !== null ? (
          <div className="task" key={ele.id}>
            <h1>{ele?.title}</h1>
            <p>{ele?.content}</p>
          </div>
        ) : (
          null
        );
      })}
    </div>
  );
};

export default Tasks;

다음은 모든 구성 요소에 대한 간략한 요약입니다. TaskInput 구성 요소는 형식이 이미 모델에 선언된 두 개의 소품으로 전송됩니다. props는 상위 구성 요소 Home.tsx에서 TaskInput.tsx 및 Tasks.tsx로 전송된 상태이므로 하위 구성 요소의 변경 사항이 다른 구성 요소에 반영됩니다.

api 호출도 이미 선언되었으며 함수 호출은 데이터의 구성 요소에서 이루어집니다.

페이지

Home.tsx

import React, { useState } from 'react'
import Header from '../../components/Header/Header'
import TaskInput from '../../components/TaskInput/TaskInput'
import Tasks from '../../components/Tasks/Tasks'
import { TaskList } from '../../models/ITask'
import './Home.css'

const Home = () => {
  const [data, setdata] = useState<TaskList|undefined>([]);
  return (
    <>
    <Header/>
    <div className="dashboard">
      <TaskInput d={data} changed={setdata}/>
      <Tasks d={data} changed={setdata}/>
    </div>
    </>
  )
}

export default Home

데이터의 상태는 상위 구성 요소에서 선언되고 하위 구성 요소의 데이터 변경 사항이 다른 하위 구성 요소에 다시 반영되도록 하위 구성 요소에 소품으로 전송됩니다.

상태에 대한 포인터가 자식에게 전송되기 때문에 가능합니다.

고맙습니다

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀