TypeScript起步

TS的使用

js回顾

​ js的维护成本相对较高，虽然开发速度比较快，但是不适合大项目。属于弱类型语言

它有较大的缺点

1.没有变量类型：let a =20

虽然我们定义了一个变量是一个20,20是number但是a 却没有被定义成number,假设a=‘hello word’，js依旧不会报错，如果我们在使用+进行运算时，发现进行了拼串行为，此时，如果代码量很多，排查相对来说比较困难。

2.js中函数的参数也是没有类型的，如果错误在第3行，有可能报错的时候会在3千行甚至3万行，排查困难。

TS

​ 为了解决js的缺点，建立在js的基础上（注意不是取代），TS也是需要解析的。属于强类型语言

1.脚手架安装ts

   npm i typescript ts-loader

2.定义变量

   let a:number;
   a=10

但是写法有很多种，其实主要是想要声明a是个什么类型的，如果我们将a=‘字符串’,ts就会提示你这种写法是错误的。

还可以写成

	let a:number=10
	或let a=10也是默认认为a是number类型的

那ts这种写法最后和js差别并不大啊？？其实它最主要的是来看函数中参数的类型

2.1 js中的函数

​ 在js中的函数是不考虑参数的类型和个数的，比如我们需要传递两个参数求和，但是我们传递了字符串，js是不会报错的，会拼串。那如何解决？

2.2 ts中的函数

fun(a:number,b:number):number{
return a+b
}
//这种写法，规范了参数的类型，同时也规范了返回值的类型也是number类型的，如果我们传递的是字符串或者传递的参数不是2个就会报错

3.定义对象

let b:{name:string,[xxx:string]:any}
b={name:'流岚',age:15,gender:'男'}
//如果这里name写的不是string类型，就会报错，并且这个name是必选的属性

​ 或者

		let b:object
		b={}
		//里面定义的属性，都已经带上了类型，例如age：12就是number类型的

​ 或者

		let c:{name:string,age?:number}
		//name我们已经知道是必选的了,age加了？就是可选的属性

4.定义数组

4.1 方式一

	let e:number:[]

4.2 方式二

	let e:Array<number>

5.元组tuple

​ 元组是ts的新特性，它是固定长度的数组

例如：

	let h:[string,string]    //在这个例子中是两个，就在下面只能写两个元素
	h=['hello','hi']

6.枚举enum

枚举也是ts的新特性，它可以在多个值中进行选择，举例;

enum Gender{
	Male=1    //代表男
	Female=0   //代表女
}
let i:{name:string,gender:Gender}
i={
	name:'流岚',
	gender:Gender.Male
}

你发现了吗，这样写的好处相对于性别直接写0和1，更直观，我们能直接一眼看出定义的这个对象是男，这就是枚举的魅力。

7.使用字面量进行类型声明

	let n:'男'|'女'
	n='男'  //如果不是男或者女将提示你代码不规范

8.关于

​ 这里该笔记仅为快速了解ts进行辅助，并不详细说明，例如除2-7之外的类型有很多，any（任意类型）、unknown（未知类型）、void（空值）,boolean（布尔大家都清楚吧）,never（没有值）。

只有这5个没有详细说明，你可以在看完下方之后针对这5个搜一下。

关于ts编译器的配置项，我也不过多介绍，这种配置项，很少有人去改动，即使改动了，也并不频繁，可后期加深了解

持续更新…