react+typescript项目构建

2023-05-16

    react项目构建可以很简单,但是如果是结合typescript,其实也不是很麻烦,官网也有很明确的说明。有两种办法:

    1、直接构建带有typescript的react项目,我们需要增加额外的参数,模版不能使用默认的cra-template。而是使用cra-template-typescript。

npx create-react-app tsreactdemo --template typescript

     

    创建完成的成功提示与原来没有太大的区别,直接进入项目路径下,然后yarn start或者npm start。

     

    进入项目,我们不着急启动,首先看看文件长得怎么样,默认会创建一个tsconfig.json,而且src目录下的默认的index.js,App.js文件变为了ts版本的index.tsx,App.tsx。

    

    我们可以看看package.json中的依赖:

    

    其实,依赖就是多了@types/jest,@types/node,@types/react,@types/react-dom 。

    最早,我们创建typescript的react项目命令好像直接就是npx create-react-app xxx --typescript,可是现在这样不行了,后面的参数必须是--template typescript,而不是直接--typescript。这个需要说明一下,并不是我们搞错了,其实原来就是这样使用的,现在更新换代,方法发生变化了,从这里可以看出,web前端变化太快了,一两年时间如果不学习,可能会完全颠覆你的认知。 这里不是说--typescript就不能创建,它创建不会报错,但是默认就是react的项目,不会包含typescript的内容。

    另外,通过这种方式创建项目,官方文档也推荐我们不要全局安装create-react-app这个工具了,在最新的版本中,可以直接通过npx create-react-app就可以创建最新的react项目了,而如果你全局安装了create-react-app,而且版本还不是最新的,很有可能创建的就是老版本的react项目,如果安装了,可以直接卸载npm uninstall -g create-react-app。

    2、在react项目的基础上,直接加入typescript相关的依赖即可。

npm install typescript @types/react --save

    开始创建一个默认的react项目:

     

    命令上,我直接加上了--typescript,这就是我前面说过的,原来是通过这种方式创建,但是现在这种方式不行了,但是它也不会报错,默认创建的就是react项目,使用的模版是cra-template。

    

    我们直接加上typescript的依赖:

    

    其实,就这么加,都不用增加tsconfig.json文件,就可以了,就好比我们直接增加了一个依赖,没有对项目做大的修改。

    当我们修改了index.js,App.js文件为index.tsx,App.tsx之后,npm start 或 yarn start,默认会创建一个文件tsconfig.json,这也是官方明确说明的,我们没有必要手动创建tsconfig.json。 

    

    我们也可以看看默认生成的tsconfig.json文件的内容:

{
  "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"
  ]
}

    其实,手动创建也大概就是这个样子,所以还不如直接让它自己生成。 

    

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react+typescript项目构建 的相关文章

随机推荐

  • vue+vuetify构建简单消息确认框

    vue框架自己好像没有弹出框 xff0c 而vuetify有弹出框v dialog xff0c 没有确认框confirm xff0c 虽然确认框本身就是弹出框 xff0c 但是弹出框的功能有个特点 xff0c 就是确定做一件事情 xff0c
  • docker-compose构建mysql服务

    docker安装mysql服务显得很快捷 xff0c 我们如果使用了docker compose那就更快了 xff0c 我们只需要按照我们的要求 xff0c 设置相应的端口映射 xff0c 如果有需求 xff0c 也可以设置数据映射 配置如
  • Nginx核心模块内置变量

    本文根据Nginx官网整理了Nginx的ngx http core module模块的内置变量 xff0c 可与Apache做对比参考 随后做了一次测试观察各变量的值 xff0c 并附上测试结果 1 变量列表 arg name 请求行中参数
  • js属性名用变量代替

    在前端中 xff0c 我们有时候需要利用变量名来设置属性名 xff0c 虽然不是很常见 xff0c 但是也是一个应用场景 这时候 xff0c 我们如果想当然的 xff0c 直接使用变量来设置 xff0c 那么可能不会达到我们想要的结果的 我
  • nodejs利用ffi库调用windows系统user32库函数获取桌面程序窗口大小

    ffi库是npm提供的操作windows系统库函数的依赖库 xff0c 安装过程会比较麻烦 xff0c 需要编译 xff0c 可能需要npm全局安装windows build tools xff0c 如何安装 xff0c 可以参照这里 这篇
  • nodejs利用ffi库调用windows系统user32函数模拟用户登录操作

    如题所示 xff0c 一般的桌面程序 xff0c 用户登录很简单 xff0c 就是找到用户名和密码输入框 xff0c 输入相应的用户名和密码 xff0c 然后点击 登录 按钮 xff0c 完成登录操作 这是人为操作的步骤 xff0c 如果这
  • 通过vue指令创建electron-vue模板项目出现一直“downloading template“问题

    今天试了一下 xff0c vue init simulatedgreg electron vue vueapp的时候 xff0c 在命令行下一直downloading template xff0c 让我很懊恼 原来vue init创建的时候
  • electron-vue与vuetify整合出现报错:If you‘re seeing “$attrs is readonly“

    如题所示 xff0c 正常情况下electron vue与vuetify的整合 xff0c 因为就是vue与vuetify的整合 xff0c 按照一般的推荐方法 xff0c 基本不会出错 xff0c 但是 xff0c 这里因为electro
  • VISA编程实例(C实现)

    今天写这个文章 xff0c 是因为自己工作中用到了ROHDE amp SCHWARZ xff08 即罗德 施瓦茨公司 xff09 的仪表设备 xff0c 需要通过编程的方式来读取仪表上功率测试结果 xff0c 本来仪表上显示了测试结果 xf
  • mac下通过gcc命令手动编译动态链接库示例

    编译动态链接库 xff0c windows linux mac平台各不相同 xff0c 从文件上来说 xff0c windows下是dll xff0c linux下是so xff0c mac下是dylib xff1b 命令上也会有区别 xf
  • c++中char[]与char*的转换以及char*与数字互转

    在c c 43 43 中 xff0c 字符串操作不可避免 xff0c 而且通常 xff0c char 或者char 就能表示字符串 xff0c 这个跟java语言有很大的差别 xff0c java中char是字符 xff0c string才
  • electron项目构建打包缺少dll文件的问题解决办法

    最近 xff0c 在做electron项目中 xff0c 使用了第三方dll xff0c 开发环境运行一切正常 xff0c 可是当我们打包 xff0c 最后生成的可执行程序再执行 xff0c 发现调用dll总是不成功 xff0c 猜测是少了
  • c/c++中的回调函数

    c c 43 43 中的回调函数是一个很奇怪的东西 xff0c 在java中 xff0c 方法调用的时候 xff0c 参数最多可以传入另一个对象实例 xff0c 然后在方法体内 xff0c 调用实例的方法 xff0c 做不到方法调用的时候
  • 在Windows下配置多个git账号

    本文记录在Windows下配置两个github账号的过程 1 生成并部署SSH key 安装好Git客户端后 xff0c 打开git bash xff0c 输入以下命令生成user1的SSH Key xff1a ssh keygen t r
  • windows命令行下通过cl命令编译动态链接库示例

    一般在windows下写一个c c 43 43 的动态链接库 xff0c 我们都是在visual studio或着visual c 43 43 这些ide里面进行编译和生成的 xff0c 今天介绍 xff0c 如何通过命令行来实现手动编译和
  • gdb命令调试c程序

    一般开发c语言程序 xff0c 都是在ide中编码 xff0c 调试也是使用集成环境 xff0c 有时候 xff0c 我们的程序是在文本编辑器中编写的 xff0c 这时候可能使用gcc编译 xff0c 然后运行可执行程序 遇到需要调试的场景
  • 选择排序算法与示例详解(c语言)

    选择排序是排序算法的一种 xff0c 思想就是 xff0c 每一轮寻找数组中最大的值或者最小的值 xff0c 放在头部或者放入一个新的数组 这样经历一轮遍历 xff0c 数组或者新数组就是排好序的 xff0c 他的目的很明确 xff0c 每
  • 2020年csdn盘点

    十年前就注册了csdn账号 xff0c 之后一直没有写过博客 xff0c 都是看别人的博客 xff0c 等到2015年左右发表了第一篇自己的博客 xff0c 直到2016年底觉着做技术的就需要记录自己的博客 xff0c 不仅是自己学习的过程
  • chrome浏览器安装react-devtools

    react devtools是react开发时的一个浏览器插件 xff0c 对于各大主流高级浏览器都有扩展程序可以安装 xff0c 官方的地址默认是https github com facebook react devtools xff0c
  • react+typescript项目构建

    react项目构建可以很简单 xff0c 但是如果是结合typescript xff0c 其实也不是很麻烦 xff0c 官网也有很明确的说明 有两种办法 xff1a 1 直接构建带有typescript的react项目 xff0c 我们需要