本文共 6158 字，大约阅读时间需要 20 分钟。
TypeScript
写下博客主要用来分享知识内容，并便于自我复习和总结。 如有错误之处，请各位大佬指出。
对于文章后续的内容，推荐读者先学习JavaScript，再来学习TypeScript。
TypeScript 简介
1、TS是由微软在2012年正式发布的一款开源的编程语言。随着技术的发展，TS已经变成了前端必会的技能。
（对于笔者而言，之前学习了很久也没有选择学习TS，直到Vue3选择采用TS重写，让我才开始重新审视TS是否真的值得学习。为了阅读源码，TS的学习提上了日程）
2、TS是JS的超集，也就是说TS是建立在JS之上的，所有的TS代码最后都会被转化为JS代码。
（虽然TS最后会转为JS代码，但TS既然存在，那么它一定有比JS强的用法。通过之后的学习，希望各位可以感受到TS的优势）
3、TS更像后端java、C#这样的面向对象语言，可以让JS开发大型企业项目。
（在面对大型企业项目的时候，真的，真的很有用！）
4、谷歌也在大力支持TS的推广，谷歌的angular2.x+就是基于TS语法。
5、最新的Vue、React也可以集成TS。
6、Nodejs框架Nestjs、midway中用的就是TS语法。
除此以外，TS的优缺点，推荐文章： TypeScript 安装
首先，先去安装最新版的node.js（百度即可找到官网，找到链接直接下载即可）
然后在命令行输入代码：
npm install –g typescript 或者 cnpm install –g typescript 或者 yarn global add typescript 以上几种方式，推荐使用cnpm和yarn。如果想要使用cnpm和yarn，需要安装：
npm install –g cnpm --registry=https://registry.npm.taobao.org 或者 npm install –g yarn cnpm install –g yarn TypeScript 简单使用
笔者使用WebStorm。
随便建一个项目，项目中创建一个TS文件 index.ts ：
console.log("helloworld") 但是浏览器不支持TS和ES6，所以在这里需要将其编译成ES5，打开终端输入：
tsc index.ts 这时我们就可以发现，在文件夹中出现了index.js，现在浏览器就可以去解析index.js了。
需要注意的是，每当我们在ts中写下新的内容后，都需要重新tsc。为了解决这个问题，对于WebStorm只需要一步，打开自动编译即可： （IDEA的自动编译选项也在同样位置） 
简单看一下转变后的效果：
想要在控制台看到效果，就去建一个html页面，然后运行在浏览器即可。 
TypeScript测试
TypeScript 数据类型
在TS中，为了使编写的代码更规范，更有利于维护，增加了类型校验。使用的时候，只需要变量名后加上：并在它的后面写上数据类型即可（如果不这么写，它不会报错，同时也可以改变数据类型，和JS一样。但是只要这么写，在修改数据的时候，它的数据类型就不能改变，否则会报错）。同时需要注意，TS推荐使用let或const（使用var不会报错，但会有警告）。它有以下几种数据类型：
// 布尔类型(boolean) let flag1:boolean = false let flag2:boolean = true // 正确写法：类型相同 flag1 = true // 错误写法：ts报错 // flag1 = 1 /* * 可以在ts中使用js，不会报错（未指定数据类型） * let flag = true * flag = 1 * */// 数字类型(number) let a:number = 123 // 带小数的数据也是number a = 12.3 console.log(a)// 字符串类型(string) // string类型在ts里可以用 双引号 也可以用 单引号，不会报错 // 推荐用 双引号 let str:string = "this is ts"// 数组类型(array) // 1.第一种定义数组方式 // 根据数据类型定义 let arr:number[] = [7, 2200, 369, 4396] // 2.第二种定义数组方式 // 使用泛型定义（暂时先记住，泛型在后面还会提到） let arr1:Array= [7, 2200, 369, 4396] // 我们还可以让数组中存放多种类型的数据 let arr2:(number | string)[] = [1, 'string', 3] // 元组类型(tuple) 属于数组的一种，可存储多种数据类型 let tup:[string, number, boolean] = ["xh", 2200, false]// 枚举类型(enum)/** 随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。* 例如：性别、月份、星期、颜色、单位名、学历、职业等，都不是数值数据。* 在其它程序设计语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差。* 如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易阅读和理解。* 也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值，* 这种方法称为枚举方法，用这种方法定义的类型称枚举类型。* */ // 如果赋值，则根据值来输出结果 enum Flag { success = 1, error = -1} let f:Flag = Flag.error console.log(f) // 输出：-1 // 如果不赋值，输出结果默认为它的索引值 enum Color { red, blue, orange} let c:Color = Color.blue console.log(c) // 输出：1 // 如果部分赋值，赋值前根据索引输出结果，赋值后以该值作为当前索引再输出结果 enum Color2 { red, blue = 5, orange} let d:Color2 = Color2.orange console.log(d) // 输出：6// 任意类型(any) // 数据类型随便换，不会报错 let num:any = 123 num = "str" num = true console.log(num) // 任意类型的用处 // 比如：在html中，有这么一个标签： box// 那我们想要在JS中获取标签，修改样式，需要这么做： let oBox = document.getElementById("box") oBox.style.color = "red" // 虽然以上内容已经对样式进行了修改，但是在VSCode里，这部分会有警告 // 笔者WebStorm没有警告 // 为了解决问题，只需要这么做即可：let oBox:any = document.getElementById("box")// null 和 undefined：其他(never类型)数据类型的子类型 // 直接指定undefined： let num2:undefined // undefined类型，可以赋值undefined num2 = undefined console.log(num2) // 输出：undefined // 输出undefined 也可以设定数据类型，但不赋值 let num3:number console.log(num3) // 输出：undefined // 但是对于上面这个用法，VSCode也许会有警告，而笔者的WebStorm不会 // 为了解决VSCode警告问题，我们可以如下面这么用： // 即：如果赋值就是number，不赋值就是undefined let num4:number | undefined num4 = 123 console.log(num4) // 直接指定null： let num5:null num5 = null// void类型：TypeScript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。 // 表示方法没有任何返回类型： function run():void{ console.log("run") } run() // 有返回数据类型的方法： function run2():number{ return 123 } console.log(run2())// never类型：其他类型（包括null和undefined）的子类型，代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。 let x:never // 不能为其赋值 // x = 123 // 虽然never看起来没什么用，但我们可以让它抛出异常 x = (()=>{ throw new Error("错误") })()
除了这几种基本的数据类型以外，还有对象类型，之后的学习中还会遇到：
// 最基本的对象类型const test:{ name:string, age:number} = { name: '李四', age: 18} 还有更复杂一些的：
// age一定是个匿名函数，并返回number值const age:()=>number = ()=>{ return 20} 这里的class和interface之后还会提到，现在先混个脸熟，等学完再回来看就很轻松了。
// 对象数组let testPerson:{ name:string, age:number}[] = [ { name: '李四', age: 18}, { name: '王五', age: 28}]// type：类型别名，方便之后反复使用type Lady = { name:string, age:number}let testPerson:Lady[] = [ { name: '李四', age: 18}, { name: '王五', age: 28}]// 使用class和type都可以class Person{ }// per必须是类Person的实例const per:Person = new Person()class Person2{ name:string; age:number;}// per必须是类Person的实例const per2:Person2 = { name: '李四', age: 18}interface Animal { name:string, age:number}// cat必须实现接口中所有内容const cat:Animal = { name: '阿愈', age: 7} 在这里，我们用：去定义一个指定数据类型的变量，这个方式叫做类型注解。
但实际上，VSCode和WebStorm等编辑器，还能自行对未指定数据类型的变量进行类型判断：
因此，对于类型注解的使用，我们可以这么考虑：如果TS能够自动分析变量类型，那我们就什么也不用补充。如果TS无法分析变量类型，那我们必须使用类型注解。 当然，对于类型注解在ts中一定要用吗，诸如此类的问题，还是要看个人习惯和公司规定，而且一定要说的是，类型注解确实能让编写的代码更规范，更有利于维护。那现在就来看例子：
当我们在ts中，写了一些很简单的，可以自动分析变量类型的用法，如果写类型注解，倒是挺麻烦的。
那什么情况下，TS无法分析变量类型？
function getTotal(one, two){ return one + two;}let total = getTotal(1,2); 很明显，在函数中，我们希望在它使用的时候传什么值，TS肯定是无法判断出来的，所以参数one和two在这里都会接收any类型。此时如果不加类型注解，就不利于维护和规范。
那此时，我们就可以这么做： function getTotal(one:number, two:number){ return one + two;}let total = getTotal(1,2); total不需要指定，是因为TS自动判断其为number。
但是这里，total的数据类型是自动判断的，我们稍微做一些修改，它的返回值类型就会变化： function getTotal(one:number, two:number){ return one + two + '';}let total = getTotal(1,2); 
function getTotal(one:number, two:number):number{ return one + two;}let total = getTotal(1,2); 还有一种不是很好的方法，不如写在函数返回值上清晰：
function getTotal(one:number, two:number){ return one + two;}let total:number = getTotal(1,2); （更多函数的用法之后还会学到）
所以综上所述，有时我们可以考虑不指定类型注解，因为TS能自动分析变量类型。
除此以外，对象中的数据类型也能自动分析出来。
let person = { name: '李四', age: 15} 
转载地址：http://ymyki.baihongyu.com/