变量 重复声明_TypeScript变量类型初体验

还有四科没考试和一门大作业没做，小小闲暇时间看了1p（p3）视频，看完开始总结了，加油！

（自学过程有错请指教）

先献上链接：

https://www.bilibili.com/video/BV1Xy4y1v7S2?p=3​www.bilibili.com

在第一篇文章，也就是p1视频看完后写总结时有说过typescript最重要的特点就是有了类型的束缚和增加了js没有的新的类型，type生动形象。

在ts中对变量的声明可以是

let 变量名 :类型；然后再赋对应类型的值

或则直接let 变量名 :类型=对应类型的值

又或者let 变量名=对应类型的值（第一次初始化赋值就类型就默认第一次初始化赋的值对应的类型）。

第三种方式和js里面直接赋值没有什么不同，不同之处在于js后面可以赋值其他类型的值，而ts就只认第一次赋值对应类型的值。

不过就ts里面这三种方式，我感觉第三种有点像语法糖，像vue里面一些动态绑定直接用‘：’（v-bind非语法糖写法）和@（v-on非语法糖写法）触发事件等，然后类型变量后面加：类型，联想到了父子组件间子组件通过属性，能拿到父组件传入的值，定义是也有type：属性类型。vue中子组件属性类型在后面规定了值传入的就只能对应的值，不然会报错，比如规定一个boolean的属性值，然后没有动态绑定，直接传入true会认为是字符串，不是对应的布尔类型，所以会报错，动态绑定后传入true就没问题了。

如果换成：test=“true”就没问题不报错了。

有了类型的声明之后，在编辑器如果类型不对应（赋初始值之后再次赋值其他类型，各种出现类型不对应的操作）就会有红色波浪线报错，会提示你修改，没有修改的话，编译也是通过的（但会提示出现错误，不过还是会生成js文件后面可以设置编译通不过），为什么会通过呢，因为转为js，这些写法在js里面是运行的，是正确的。这一点我想到vue里面eslint这是一个代码格式规范，编写不规范编译会报错。eslint可以自己编写格式也可以使用已经有的格式规范。规范挺重要的，不规范的代码不方便以后的维护可能写几天后自己来维护也有点麻烦，代码注释也是，没有代码注释的话可能到后面都不知道自己当时完成什么功能。vscode里面有快捷键对写的代码进行格式化，alt+shift+f。写到这想起了java的一些命名规范，一般都用驼峰，常量全部大写，下划线使单词分开，类名首字母大写等。

那既然可以用第三种方法就可以确定变量类型，第一种和第二种看起来对变量就有点多余，那时老师讲到第三种我也是这样觉得的，也有前面说到想到了语法糖。但主要是对函数的参数类型限制和返回值的类型限制起到了效果，以前函数的参数类型可以不限制的，只要js里面有就可以传入，但有了这个就能防止错误的参数类型传入。具体格式是这样的：

function 函数名（变量名：类型，变量名：类型）：返回值返回类型

这样，传入其他类型的变量就会提示错误，返回其他类型的值也是会提示错误，会防止出错，变量的个数也是会约束，不能任意传入数量

这里老师提到参数类型js里面是不限制的，但到ts里面有限制，之前学js的时候没注意到参数数量没限制，今天算是补了一个知识点，验证一下，确实是这样子的。

这里我写的是var类型，而不是let类型，老师里面写的是let类型，关于var和let类型区别：一开始只有var类型，后来es6新增了let，一开始给我的总体就是有了c，c++，java块级作用域，就和我们平时编程写的变量一样啦，这个var就有点另类了，很随意，所以有时也容易出错:

js中都可以这样写（以上图片）。

但ts中不可以这样写。

不会出错，不会编译不通过，很随意的一个类型，但let中：

在ts中var也是可以重复声明的，但let不可以,还有类似

var当全局变量，在函数中还再次声明一次，用到函数中对应的变量时，

是看函数里面的，如果函数没有声明变量，

没有声明则看全局外面声明的变量而且是离他从上到下最近的那一个，因为编译是从上到下的。

而在let使用中，let此时是全局变量，也不能和var那样重复声明，所以对应输出0，

在函数中再次声明let，此时就局部变量优先，不受外界同名变量干扰，和var一样，放在前能访问到，如果声明放在使用变量后就使用不到，所以因为var能重复声明，就看函数有没有，有看函数里面的，没有看外面从上到下最近的那一个变量。

在有函数闭包下，i在函数外面不能引用到，而只要在同一作用域内，函数内，就可以使用。

而let

并不能使用到for声明变量I，因为for结束后，let变量i就消亡了。

对于var和let的区别总结：

首先let是es6才增加的，是具有块级作用域。类似我们平时编程语言c，c++，java的用法。var非常随意。

let不可以重复声明，var可以重复声明。

var重复声明的话看最近一个。

有全局变量的话，let在函数中没有声明的话会使用全局变量，有声明的话如果是在变量使用前就声明可以使用，没有的话会报错，就是不能在声明前使用它。而var也是，在函数中没有声明就看全局，有声明的话也是要在使用之前。这个全局是相对的，不是说最外面一层，而是离他最近的外面一层。而外面的那一层不能使用到里面内部的那一层（闭包）。

在同一个作用域内，比如for声明的变量，for结束后var（没有块级作用域这个概念只有函数闭包）仍然可以引用，而let（有了块级作用域的概念超出就消亡）不能，这个就比较符合我们的编程习惯。（块级作用域）

最终可以解释这个面试题：

因为函数里面一开始是console.log（a），函数里面有声明看函数里面，一开始使用之前没有声明会打印出undefined，后面声明之后再使用还是看函数里面的，就输出10；函数闭包，在外面使用不到，所以外面的console.log（a）；看全局的变量，最近从上到下的那一个。

关于var和let的区别，我之前是看

前端面试题：JS中的let和var的区别 - FlyDragon - 博客园​www.cnblogs.com

这个博主的。

在ts编译成js时，现在没有设置编译选项，没有配置文件，所以现在转化为js时对应的变量还是var，默认是es3，可以指定配置，转化成对应的版本，有了ts类型束缚就成了静态了，在这boolean赋值为数字，是通不过的，虽然有些语言非0认为是真，0为假，但不是所有的语言都是可以这样运用的，比如c语言if（数字）可以，但java里面不可以，只能if（true），不能是数字。

期末考完后，到了寒假有闲暇时间就继续自学和写文章，加油！