写下博客主要用来分享知识内容，并便于自我复习和总结。
如有错误之处，请各位大佬指出。
对于文章后续的内容，推荐读者先学习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的优缺点，推荐文章：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的自动编译选项也在同样位置）
而对于VSCode，需要进行一些配置，根据这个文章步骤就可实现：VSCode如何自动编译TS
简单看一下转变后的效果：
想要在控制台看到效果，就去建一个html页面，然后运行在浏览器即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript测试</title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
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<number> = [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中，有这么一个标签：<div id="box">box</div>
// 那我们想要在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
}
扫一扫
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
