使用react脚手架创建 tsx版本，react添加typescript

这几天老大被我们写的各种花里胡哨的jsx代码给搞得有点难受，组件各种传值，随便命令类型随意切换，搞得让别人看见代码就很难受，老大就说了过段时间切成 ts版本，不让你们这么随意书写代码，好歹给个类型约束也行，现在写的代码也就你们自己能看懂！

好了前面是闲话现在是正文了，安装ts版本的也是通过 create-react-app 来创建啊的

这个最好你的网络环境比较好哈 , 我就是网络环境差才安装几次失败了几次惭愧
第一个按照官网的文档来走

create-react-app my-app --typescript
然后是安装依赖
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

这里我也是一直安装失败呢在最后换成了 cnpm才成功的

官网文档地址
2.第二种
create-react-app demo --template typescript

create-react-app 项目文件名 --template typescript

我是用的第二种
然后就让咱们来试试看

import './App.css';
interface Hello {say: () => string
}
function App() {const obj: Hello = {say: () => {return "hello world"}}return (<div className="App">Learn React.tsx, { obj.say() }</div>);
}export default App;

项目正常跑起来，也没啥问题

你要是类型写错的话项目是会报错的

至于 react的相关知识就不在这里一一赘述了我react还只是个菜鸟，没有资格去染指 ts呢至少现在还没以后肯定是要搞得的

关注我持续更新前端知识

使用react脚手架创建 tsx版本，react添加typescript相关推荐

react脚手架创建项目报错，ReactDOM.render is no longer supported in React 18.
react脚手架创建项目报错,ReactDOM.render is no longer supported in React 18. 最近新写一个react的项目,但是发现已经更新到了18.0的版本, ...
React脚手架创建步骤
前言 React为了方便开发者使用React的全部特性,提供了一个create react app工具,用于创建脚手架项目.官网也表明Create React App是一个用于学习React的舒适环境 ...
react脚手架创建命令教程
1.安装node.JS 官网下载自行下载地址:https://nodejs.org/zh-cn/download/ 2.检测npm和node的安装情况使用node -v和npm -v在控制台进行输 ...
React 脚手架创建项目
意义现代的 Web 应用要考虑的问题很多,除了编写业务代码之外,还要考虑代码规范.预编译.压缩合并.打包上线等工作,需要有一套完整的解决方案来辅助我们快速开发,而 React 脚手架就是这么一套完 ...
【react】使用react 脚手架创建项目
项目一.React(脚手架) 1.1.安装脚手架: cnpm install create-react-app -g //全局安装脚手架 1.2.创建项目 create-react ...
React——脚手架创建、基本操作、Typescript
React官方文档: https://react.docschina.org/ 1. 全局安装 cnpm i -g create-react-app 2. 创建项目 /*js*/ create-rea ...
react 脚手架创建后暴漏配置文件运行yarn eject 报错（已解决）
创建项目后运行yarn eject 报错问题 git add .git commit -am "save before eject"注:这里是 -am之后再次 yarn ejec ...
React 全家桶（react脚手架 redux react-redux react-router-dom ui库 reactHook）含自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物为何学习 React React 初体验来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
React基本使用、React脚手架的使用
目录 React概述是什么 React的特点 React的基本使用虚拟DOM React的安装 React的使用 React脚手架的使用使用react脚手架初始化项目在脚手架中使用react ...

使用react脚手架创建 tsx版本，react添加typescript

使用react脚手架创建 tsx版本，react添加typescript相关推荐

最新文章

热门文章