丁鹿学堂:轻轻松松入门typescript

72 阅读2分钟

Typescript的三个特点

1 typescript是JavaScript的超集。
什么是超集呢?就是ts其实是完全覆盖了js的内容,从ts的角度看,js只是ts的一部分而已,所以ts的代码,如果你想改成js,是非常容易的。

2 ts引入了静态类型
js是一门动态类型的语言。什么是动态类型,就是类型不固定,一个变量a。你赋值数字给它,他就是数字类型,你赋值'ccc'给它,他就变成了字符串类型。

而ts引入了静态类型,就是你定义变量的时候已经决定了这个变量是什么类型了。如果你定义的是数字类型,那么你给他赋值字符串的时候就会报错。

动态类型,这种写起来当然比较方便。但是当代码量大的时候,静态类型报错更及时,维护更方便, 3 ts最终会编译成js运行在浏览器中。

ts其实就是在开发环境下,对我们的开发做了约束和帮助。而浏览器目前是不支持ts,也不支持静态类型的。但是已经有人有提案了,相信未来,浏览器也会慢慢支持ts。

所以,学好ts对我们开发vue3,react,甚至学习设计模式都是很有帮助的。

凡是可以用js的地方,最后都会慢慢被ts开发替代。

ts的类型有哪些

ts的类型可以分为基础类型,函数类型,自定义类型,接口interface 和类class

ts的基础类型:

定义类型的方法 变量后面跟冒号+类型

let a:boolean = false

如果一个变量有可能是多个类型的话,用| 分隔

let a: string|number|boolean = false

any表示是任意类型,但是要慎用,因为一个类型定义成any,和没有定义也没什么区别了

let a:any = 'calstle'
ts定义数组类型

在数组类型的定义中,约束的是素组元素的类型 格式有两种 1 冒号+类型+[] 下面就表示数组的元素必须全部是字符串

let arr:string[] = ['a']

2 冒号+Array+<类型>

let arr:Array<number> = [1,2,3]
元组

ts把数组划分的更细了,如果js的数组的元素类型是统一的,就是ts中的数组。如果js数组中元素类型不一样,在ts中称为元组

let arr:Array<string|number|boolean> = [1,'aa',2] 
断言

针对所有的类型,ts 都有一个断言。

断言就是ts会根据你第一次赋值的类型去判断你变量的类型,而不用你再单独写
比如你写let a = 100 ts会自动给a添加类型为number,此时如果再给a赋值字符串或者其他类型就会报错。