文章目录
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编译器的配置项,我也不过多介绍,这种配置项,很少有人去改动,即使改动了,也并不频繁,可后期加深了解
持续更新…