【react】使用 create-react-app 构建基于TypeScript的React前端架构----上
写在前面
一直在探寻,那优雅的美;一直在探寻,那精湛的技巧;一直在探寻,那简单又直白,优雅而美丽的代码。
------ 但是在JavaScript的动态类型、有时尴尬的自动类型转换,以及 “0 == false” 是true的尴尬, 你知道 “[undefined] == 0“ 是什么返回结果吗?再然后
function add (a, b) {
return a+b
}
add ("1", 2) // 12
这个结果是返回是12。
还记得某个深夜,当你望着万行代码流出千行热泪的时候吗?最后发现有一个if语句,条件为‘’ 判false了? 或者发现忘记加parseInt导致的大坑?
是时候亮出利器了。
TypeScript的简单入门
我们都知道JavaScript是动态类型,动态编译的网页脚本语言,“ 动态 ” 这个词语实现在一个纯粹的网页脚本语言身上来说,似乎并没有什么不妥。但现在,JavaScript要运行在node中,运行在服务端,甚至最初的网页脚本js都由webpack,gulp这类的自动化构建工具变成了一个具有工程化、大型化、交互复杂化、性能要求高的 ” 编程语言 “ 了。
而这个时候,最初的动态类型,或者所谓的 ”object类型“,再或者双等号两边的尴尬,在构建这些 ” 大型软件系统 (大型屎山)“ 的时候,沉积的类型债务就真的是一座巨大的屎山了。
TypeScript一定程度上解决了这个问题,它可以一股脑儿的将屎山上的一大坨清除,在各种中大型团队形形色色的开发者们中间获得一致的好评。
--------------------------------------------------知识分割线----------------------------------------------------
如果你希望能够一边看,一边敲,你可以先转到下面的React和TypeScript章节,搭建一个基于create-react-app创建的typeScript的react架构,然后再回来看看这些示例,不多、很简单。
TypeScript是JavaScript的超集,它是一门编译型语言,我个人认为,入门TypeScript从以下三个点入手,然后结合react的搭建、再到实际的项目应用,在应用中陆续接触更多的技巧,泛型、枚举、类型推论、命名空间等等。我们先看看最重要的三点。
静态类型
TypeScript可以实现静态的变量申明, 如下面的例子,注意在TypeScript中 string类型、 object类型的首字母也是小写。
// 静态类型申明
let isStatic: boolean = false;
isStatic = 1; // error: Cannot convert 'number' to boolean
let isString: string = 1; // Type '1' is not assignable to type 'string'.
TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型。如下面的例子
let a = 1;
a = false;
alert(a); // error: Cannot convert 'boolean' to number
绝大多数情况类型推导就像上面那样的情况一样,a = 1 ,a就是number类型了。
还有一些涉及更多的类型,入门可以暂时忽略。
这里我们学习到的一点是: TypeScript的变量类型是静态的,每一个变量都会有一个固定的类型。
函数
让我们再看看js中函数的定义:
function add (a, b) {
return a + b;
}
上面这个函数实现了两数相加,在本文开篇我挂了这个代码上去,它的调用方式是这样的:
add ("1", 2) //
”1“ + 2 = 12 , 虽然这里的add函数看起来挺简单的,我们换个方式看看,就知道这个有多难受了。
add(testNumber(), 2)
谁能保证testNumber返回的一定是number ?
TypeScript可以
function add (a: number, b: number) : number {
return a + b;
}
在TypeScript中可以通过类似变量申明那样的类型申明的方式,申明一个函数的入参,返回的具体类型格式,能够真正保证函数的输入输出的一致性。
add("1", 2) // Argument of type '"1"' is not assignable to parameter of type 'number'
function testNumber () {
let num = '1';
return num;
}
function add (a: number, b: number) : number {
return a + b;
}
add(testNumber(), 2); // Argument of type 'string' is not assignable to parameter of type 'number'.ts(2345)
现在这些代码将直接报错,无法通过编译,这就是静态类型的强大之处。
接口
接口是TypeScript的核心原则之一的实现,是对值所具有的结构进行类型检查。
这句话什么意思呢?说简单点,接口就是对象的属性,对象上的方法也可以做类型检查,可以约束某个对象的值必须是预期的值。例如:
interface IAddObj {
a: number,
b: number
}
function add (addObj: IAddObj) : number {
return addObj.a + addObj.b;
}
我们定义add函数,希望传入一个addObj的对象值,然后对象上有a和b,这时候我想要规定这个对象必须有a和b,而且a和b是number类型的。
这就是接口最简单,80%,最通用的用法:规定对象的属性
React&TypeScript的环境搭建
前提
首先你电脑上需要安装有nodejs、npm,怎么安装百度即可,其次你需要对react和webpack有一定的认知。这是前提。
第一步 工程创建
1、安装create-react-app
安装create-react-app,打开命令行 输入命令
npm install -g create-react-app
2、创建基于TypeScript的react环境
打开命令行 输入
create-react-app apptest --scripts-version=react-scripts-ts
3、为了能够自定义webpack打包配置,我们还要运行一个命令,进入项目目录/apptest运行 运行后提示输入y即可
npm run eject
4、在项目目录运行命令: npm run start 稍等片刻就可以看见react的欢迎界面啦
第二步 目录规整
如果你想要直接获取规整后的源代码,在我的git可以下载到: 链接 下载完成在目录npm install 即可。
创建完项目后,可以看见目前的目录结构还是比较混乱的,现在让我们来梳理一下
主要规整 /src 主代码目录中的文件,我们依次新建几个文件夹
assets 资源目录,存放css、image、字体文件等
components 存放组件目录
views 存放主视图目录
utils 存放工具函数、工具类
config 存放公共配置文件
规整后的文件目录如下,我将示例代码分别分配到了其中
需要注意的是移动文件后,对应的资源引用目录的更改。
然后需要修改根目录tslint.json为:
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts",
"coverage/lcov-report/*.js"
]
},
"rules": {
"ordered-imports": false
},
"jsRules": {
"ordered-imports": false
}
}
然后重新运行 npm run start 就可以了,现在可以在App.vue里试一试TypeScript了
小结
到这里,其实还远远没有完结,我们还需要引入其他的组件来开发一个真正的React项目,还需要制定一套规范去搭建一个React团队,拭目以待。
【react】使用 create-react-app 构建基于TypeScript的React前端架构----上的更多相关文章
- 基于Vue2.x的前端架构,我们是这么做的
通过Vue CLI可以方便的创建一个Vue项目,但是对于实际项目来说还是不够的,所以一般都会根据业务的情况来在其基础上添加一些共性能力,减少创建新项目时的一些重复操作,本着学习和分享的目的,本文会介绍 ...
- vue cli4构建基于typescript的vue组件并发布到npm
基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...
- piral 基于typescript 的微前端开发框架
piral有一个微前端开发框架,功能强大,文档比较全,扩展能力也比较好 包含以下特性: 特性 高度模块化 多框架兼容 支持资源文件的拆分 全局状态管理 独立开发和部署 CLI工具 与同类框架的比较 参 ...
- 从零搭建TypeScript与React开发环境
前言 平时进行开发大多数是基于vue-cli或者create-react-app等官方或者公司内部搭建的脚手架. 我们业务仔做的最多就是npm i和npm run dev或者npm start,然 ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- 基于 iframe 的微前端框架 —— 擎天
vivo 互联网前端团队- Jiang Zuohan 一.背景 VAPD是一款专为团队协作办公场景设计的项目管理工具,实践敏捷开发与持续交付,以「项目」为核心,融合需求.任务.缺陷等应用,使用敏捷迭代 ...
- 使用 Yarn workspace,TypeScript,esbuild,React 和 Express 构建 K8S 云原生应用(一)
本文将指导您使用 K8S ,Docker,Yarn workspace ,TypeScript,esbuild,Express 和 React 来设置构建一个基本的云原生 Web 应用程序. 在本教程 ...
- Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具
Reactjs-generator-cli 一款基于Ink构建用于快速搭建React应用的CLI scaffolding工具 A simple CLI for scaffolding React.js ...
- 基于React Native的58 APP开发实践
React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司 ...
随机推荐
- Oracle 11g 发行版2的安装,PLSQL_Developer安装 , Oracle数据库安装失败,完全卸载,常用的命令
Oracle 11g 发行版2的安装 PLSQL_Developer安装 Oracle数据库安装失败,完全卸载oracle11g 常用的命令 Oracle 11g 发行版2的安装 1. 下载 下载地址 ...
- SQL 三范式
第一范式:无重复的列,一列只能包含一个字段 第二范式:主键约束,一行只能被唯一标识 第三范式:非主键字段要严格依赖于主键字段
- SQL中的每一张表都必须设有主键吗
问题描述: 公司的数据库表有时候会看到没有主键的,SQL中的每一张表都必须设有主键吗? 主键的作用: 1)保证实体的完整性: 2)加快数据库的操作速度: 3)在表中添加新记录时,数据库ACCESS会自 ...
- Linux 小知识翻译 - 「分区」
安装Linux的时候,需要对硬盘进行分区.那么「分区」到底是什么呢? 「分区」在日语中有区分,分割的意思.计算机术语中有时会说「对一个磁盘进行分区」,整个意思就是指定如何分割磁盘的意思. 「对磁盘进行 ...
- 阿里八八β阶段Scrum(1/5)
今日进度 叶文滔: 修改了α阶段遗留的部分界面BUG,比如状态栏白底等 张岳: 修复用户模块信息修改返回失败的BUG 林炜鸿: 重构了添加事件的代码,增加可修改的特性 黄梅玲: 绘制了新的日程显示格界 ...
- Sublime Text3如何快速预览html文件
Sublime Text3 步骤1:选择 Tools----> Build System ----> New Build System... 步骤2:输入以下内容 "cmd&qu ...
- React脚手架创建一个React应用以及项目目录结构详解
react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...
- Java 浅拷贝,深拷贝
从Java 强引用.软引用,弱引用http://blog.csdn.net/jltxgcy/article/details/35558465一文中,我们看到把一个对象赋值给另一个对象,本质上 ...
- js 数组的操作
js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一 ...
- Arduino IDE for ESP8266 项目云盒子(2)一键自配置+网页服务器
https://item.taobao.com/item.htm?spm=a230r.1.14.20.eYblO3&id=521945102409&ns=1&abbucket= ...