Typescript快速入门

34 阅读4分钟

1、用输出倒逼我多输入。 否则一些都在看课程、看文章,容易进入舒适区,不用动脑子。而输出-比如写文章,就需要去动脑子。

2、拒绝完美主义。 不是说一定要写得多高大上,多完整,才能分享出来。 哪怕只是接地气的口语化描述,也是可以帮助到大家的。 先完成再完美,任何东西都是从不完美开始的,只有先做出来,先发布出来,才有改善的空间。否则一直都不敢发出来,得不到外界的反馈。

--------------------进入正文-------------------

TS是什么?

是JS的超集,就是它包含了JS,JS是TS的一部分。

TS是静态类型语言。反之,JS是动态类型语言,在运行之前,它的变量的类型都是不确定的。

为什么会出现TS?

因为JS有一些缺点,在代码量少的时候还好,代码量一多了,问题就暴露出来了。

JS在发明的时候,只是把它当成浏览器的脚本语言,小卡拉米。根本没想过后面它会这么流行,代码量这么多。

比如: 1、没有类型检查。 定义一个叫ok的整型变量。 调用一个叫ok的函数。 而我并没有定义过叫ok的函数。

直到我运行了这段代码,它才报错。

image.png

代码量小的时候还好,代码量大了,你也不知道什么时候会犯这样的错误。 但是TS不一样,TS在你运行前就进行了静态类型检查,发现了这个错误。

image.png

怎么运行ts文件?

由于浏览器目前不支持直接解析ts文件,所以需要先通过tsc,将ts文件编译成js文件,然后才能在浏览器上运行。

tsc是啥? tsc,全称Typescript Complier,Typesript编译器。 它的作用就是将ts文件编译为js文件。

怎么使用?

先安装:通过npm包全局安装tsc编译器

npm i typescript -g

再使用:你只需要在命令行敲下这一段指令

tsc 你的文件名(.ts可省略)

但是缺点是,每次修改完ts代码,你都得手动编译一遍,太麻烦了,不能让它自动编译吗?发现文件有改动就编译,当然可以!

只需要做两个动作。

1、敲个命令安装配置文件

tsc --init

然后文件夹里面就会多一个tsconfig.json

image.png

这个配置文件写啥了?

1)TS文件要编译成哪个版本的JS。ES6?ES7?

2)是否开启严格模式

3)如果编译错误怎么办

4).....

2、开启监视。

tsc --watch 文件名.ts

这个命令的意思是,监视这个文件的一举一动。如果出现变动就自动在js文件里进行同步。

当然,你可以让它监视文件夹里的所有ts文件。那就不用加上文件名。

tsc --watch


在用的过程中,发现了一个问题。

我不小心将name敲成了name2。编辑器立马飘红了。 然后再去看一眼js,它居然也跟着改了。

image.png

image.png

那能不能实现,如果ts有错,js不跟着改呢?当然可以!

image.png

只需要在配置文件——tsconfig.json里加上这么一条:"noEmitOnError": true

意思是,如果更改后的ts文件发生错误,就不对js文件进行更改。

提示:使用Vue或React提供的脚手架进行开发时,自动会对ts文件进行编译。不需要手动去编译。

基本语法

数据类型

开发中最常用的字符串string、数字number、布尔值boolean。

与js不同的是,定义变量时后面要跟数据类型。无论你是全局变量还是局部变量。

向变量赋予不同数据类型的值时,会报错。 image.png

我们发现,function里的局部变量也必须声明一个类型。否则会报错。

image.png

image.png

也可以设定返回值的类型

现在我给返回值后面加了hello,返回值的类型就是string类型 image.png

而设定了返回值类型为number后,立马就报错了。 image.png

调用函数时,对形参的数量也限制得很严格。 声明的时候是多少个,调用的时候就得是多少个。

不一致就报错

image.png