【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的优秀性能,让越来越多的公司 ...
随机推荐
- 利用奇异值分解(SVD)进行图像压缩-python实现
首先要声明,图片的算法有很多,如JPEG算法,SVD对图片的压缩可能并不是最佳选择,这里主要说明SVD可以降维 相对于PAC(主成分分析),SVD(奇异值分解)对数据的列和行都进行了降维,左奇异矩阵可 ...
- OCaml相关
1.open Core.Std 时报Unbound module Core 先安装库 $ opam init $ opam install core $ opam install utop 在~/.o ...
- [20180806]tune2fs调整保留块百分比.txt
[20180806]tune2fs调整保留块百分比.txt --//生产系统一台dg磁盘空间满了.我前一阵子已经将*convert参数修改,增加磁盘,但是这个分区里面的数据文件还可以增长,这样依旧存- ...
- iOS 多线程之GCD的简单使用
在iOS开发中,遇到耗时操作,我们经常用到多线程技术.Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法,只需定义想要执行的任务,然后添加到适当的调度队列 ...
- Python描述符 (descriptor) 详解
1.什么是描述符? python描述符是一个“绑定行为”的对象属性,在描述符协议中,它可以通过方法重写属性的访问.这些方法有 __get__(), __set__(), 和__delete__().如 ...
- 用Python实现数据结构之二叉搜索树
二叉搜索树 二叉搜索树是一种特殊的二叉树,它的特点是: 对于任意一个节点p,存储在p的左子树的中的所有节点中的值都小于p中的值 对于任意一个节点p,存储在p的右子树的中的所有节点中的值都大于p中的值 ...
- 5.1Python函数(一)
目录 目录 前言 (一)函数的基本知识 (二)函数的基本使用 ==1.函数的简单定义== ==2.传值函数== (3)输出效果 ==3.不定长函数== ==4.缺省函数== ==5.函数的传值过程== ...
- Linux 小知识翻译 - 「为什么安全是互联网的问题?」
当然,虽说「由于有心怀不轨的人在,一定要注意安全问题」.但另一方面,也有人认为「如果互联网自己就考虑好安全问题的话,那么用户就不用再担心安全问题了」. 虽然经常有人这样说「与远程机器通信的时候,避免使 ...
- C语言变量定义与数据溢出(初学者)
1.变量定义的一般形式为:类型说明符.变量名标识符等:例:int a,b,c;(abc为整型变量) 在书写变量定义时应注意以下几点: (1)允许在一个类型说明符后,定义多个相同类型的变量.各变量之间用 ...
- vue打包速度优化
这是一个很头疼的问题,webpack极大的简化了前端自动化配置,但是打包速度实在是不如人意.在此之前,本人也尝试过网友的一些方法,但是,很多坑,跳进去就出不来,经过多个项目实践,现总结一下我用到的优化 ...