Logo

菜单

发布于 2026-01-06 3 阅读
0

JavaScript 转 TypeScript | React 完整指南 ⚛️

JavaScript 转 TypeScript | React 完整指南 ⚛️

目录


📌简介

📌 TypeScript 入门

➡变量

➡功能

➡多种类型

➡课程

📌 React TypeScript 项目结构

➡模型

➡蜜蜂

➡组件

➡页数

📌谢谢


介绍

你好，优秀的开发者🧑‍💻，在深入探讨这个话题之前，让我先给你做一个简短的介绍和一些说明。别担心，内容会简洁明了。

我是Suchintan Das，一名全栈开发人员，目前在两家创业公司工作。我从事Web开发已有两年。

在领英上联系我 👉

完整的语法和代码都已上传到这个 👉仓库。如果您觉得有用，可以给仓库点个星标以示支持。谢谢！


TypeScript 入门

我知道大多数阅读这篇博客的朋友要么对TypeScript不太熟悉，要么只略知一二。别担心，这篇博客会从头到尾讲解TypeScript的方方面面，即使你是TypeScript新手，也能轻松地结合React构建一个优秀的项目。

我们先来了解一下 TypeScript 的一些重要语法！

我将假设您有JavaScript背景并了解其语法，来解释这些语法！

是的，梗图


变量

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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"
    }
]
Enter fullscreen mode Exit fullscreen mode


函数

JavaScript 🟡


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

let func2 = (arg2) => {

}
Enter fullscreen mode Exit fullscreen mode

TypeScript 🔵


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


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

};
Enter fullscreen mode Exit fullscreen mode


多种类型

JavaScript 🟡


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

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 });
Enter fullscreen mode Exit fullscreen mode


课程

JavaScript 🟡


class Check {
    a;
    b;
  }

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

TypeScript 🔵


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

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


现在我们已经熟悉了所有语法，TypeScript现在可以深入学习React 与 TypeScript 的完整项目设置了。

我们走吧 ！


React TypeScript 项目结构


以下是该项目的简要介绍：

项目峰

让我们使用以下命令启动带有 TypeScript 模板的 React 项目：


npx create-react-app client --template typescript
Enter fullscreen mode Exit fullscreen mode

注：为了解释整个结构，我将创建一个todo list项目，以便每个人都能了解如何在任何其他项目或产品中实现相同的结构。


React 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
  }
Enter fullscreen mode Exit fullscreen mode

您可以看到，在这个项目中我使用了3 个接口Tasks。第一个接口描述了对象数组的元素，第二个接口TaskList声明了该接口的数组Tasks。

第三，这里还使用了另一个接口TasksProps来描述组件之间传递的所有 props 的类型。


蜜蜂

蜜蜂

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);
    }
};
Enter fullscreen mode Exit fullscreen mode

这里我用它axios来发起后端调用。当然，你也可以根据自己的喜好选择其他方式！这里的主要思路是为每个函数的参数和返回值类型进行分类，这样任何开发者都可以使用正确的语法进行调用，并获得所需的响应体。


控制器

控制器

authController.tsx


export const token=localStorage.getItem("idtoken") as string
Enter fullscreen mode Exit fullscreen mode

控制器是前端开发人员必不可少的元素。决定网站流程的大部分内容都由控制器来控制。例如，这里的身份验证部分就放在控制器中，因为它决定了几乎所有组件的流程。


成分

成分

Header.tsx


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

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

export default Header
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Tasks.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;
Enter fullscreen mode Exit fullscreen mode

以下是所有组件的简要概述。TaskInput组件接收两个 props ，其类型已在模型中声明。这两个props 是父组件Home.tsx发送到TaskInput.tsx和Tasks.tsx 的props状态，因此任何子组件中的更改都会反映到其他组件中。

API 调用也已经声明完毕，并且数据是通过组件进行函数调用的。


页

页

首页.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
Enter fullscreen mode Exit fullscreen mode

数据状态在父组件上声明，并作为 props 传递给子组件，以使任何子组件上的数据更改都能反映到另一个子组件上。

这是可能的，因为指向状态的指针被发送给了 childrens。


谢谢

你已经读到这篇博客的最后了🤗。更多类似的博客即将推出。

如果能在博客上留下简短的评论，我会非常感激。我会认真阅读每一条评论，所以请多多留言哦😉。

如果你想在发布时收到通知🔔，别忘了点击关注按钮☝。

最后我想说👇

继续编码 #️⃣，继续摇滚🚀

文章来源：https://dev.to/suchintan/javascript-to-typescript-complete-guide-with-react-1nd8
无需媒体查询的响应式网页设计 DE...
所有 React 实用钩子都集中在...