创建一个 React+Typescript 项目

接下来 我们来一起探索一下用TypeScript 来编写react

这也是一个非常好的趋势,目前也非常多人使用

那么 我们就先从创建项目开始

首先 我们先找一个 或者 之前创建一个目录 用来放我们的项目

然后 在这个目录下直接输入

例如 这里 我想创建一个叫 tsReApp 的项目就可以输入

javascript 复制代码
npx create-react-app tsreapp --template typescript

这个没办法 这个命令是不支持大写的 所以 名字就只好将大写部分换成小写了

然后 我们查看目录 发现项目就已经创建好了

这里 大家一定要搞清楚 npx的概念

他的意思是 如果你的项目中有执行这个命令需要的依赖 他就用依赖 如果没有 他就自己先将依赖装好 再创建

然后 我们聊个题外话

官方推荐我们使用 VSCode 一般前端电脑里应该都有 这个工具还是非常好用的

然后 我们用VSCode打开刚刚创建的项目

在 package.json 中 我们可以看到 启动命令是start

我们直接终端执行

javascript 复制代码
npm run start

然后 浏览器端 也正常起来了

但这个不得不承认 Ts项目的编译速度 会比ES项目会稍微慢一些

相关推荐
isyuah3 分钟前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
qq_3985865416 分钟前
浏览器中内嵌一个浏览器
前端·javascript·css·css3
Mapmost40 分钟前
地图引擎性能优化:解决3DTiles加载痛点的六大核心策略
前端
San30.1 小时前
Ajax 数据请求:从 XMLHttpRequest 到现代前端数据交互的演进
前端·ajax·交互
西西西西胡萝卜鸡1 小时前
虚拟列表(Virtual List)组件实现与优化铁臂猿版(简易版)
前端·vue.js
宇余1 小时前
Unibest:新一代uni-app工程化最佳实践指南
前端·vue.js
性野喜悲1 小时前
ts+uniapp小程序时间日期选择框(分开选择)
前端·javascript·vue.js
P***25393 小时前
前端构建工具缓存清理,npm cache与yarn cache
前端·缓存·npm
好奇的菜鸟3 小时前
解决 npm 依赖版本冲突:从 “unable to resolve dependency tree“ 到依赖管理高手
前端·npm·node.js
lcc1873 小时前
Vue 内置指令
前端·vue.js