写在前面
一直在探寻，那优雅的美；一直在探寻，那精湛的技巧；一直在探寻，那简单又直白，优雅而美丽的代码。css
------ 可是在JavaScript的动态类型、有时尴尬的自动类型转换，以及 “0 == false” 是true的尴尬, 你知道 “[undefined] == 0“ 是什么返回结果吗？再而后html
function add (a, b) {
return a+b
}
add ("1", 2) // 12
这个结果是返回是12。vue
还记得某个深夜，当你望着万行代码流出千行热泪的时候吗？最后发现有一个if语句，条件为‘’ 判false了？ 或者发现忘记加parseInt致使的大坑？node
是时候亮出利器了。react
TypeScript的简单入门
咱们都知道JavaScript是动态类型，动态编译的网页脚本语言，“ 动态 ” 这个词语实如今一个纯粹的网页脚本语言身上来讲，彷佛并无什么不妥。但如今，JavaScript要运行在node中，运行在服务端，甚至最初的网页脚本js都由webpack，gulp这类的自动化构建工具变成了一个具备工程化、大型化、交互复杂化、性能要求高的 ” 编程语言 “ 了。webpack
而这个时候，最初的动态类型，或者所谓的 ”object类型“，再或者双等号两边的尴尬，在构建这些 ” 大型软件系统 （大型屎山）“ 的时候，沉积的类型债务就真的是一座巨大的屎山了。git
TypeScript必定程度上解决了这个问题，它能够一古脑儿的将屎山上的一大坨清除，在各类中大型团队形形色色的开发者们中间得到一致的好评。github
--------------------------------------------------知识分割线----------------------------------------------------web
若是你但愿可以一边看，一边敲，你能够先转到下面的React和TypeScript章节，搭建一个基于create-react-app建立的typeScript的react架构，而后再回来看看这些示例，很少、很简单。typescript
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) // 12
”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有必定的认知。这是前提。
第一步 工程建立
一、安装create-react-app
安装create-react-app，打开命令行 输入命令
npm install -g create-react-app
二、建立基于TypeScript的react环境
打开命令行 输入
create-react-app apptest --scripts-version=react-scripts-ts
三、为了可以自定义webpack打包配置，咱们还要运行一个命令，进入项目目录/apptest运行 运行后提示输入y便可
npm run eject
四、在项目目录运行命令： 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了
小结
原文：https://www.cnblogs.com/ztfjs/p/react_typescript_test.html
到这里，其实还远远没有完结，咱们还须要引入其余的组件来开发一个真正的React项目，还须要制定一套规范去搭建一个React团队，拭目以待。