Typescript Handbook 精简版之变量声明

aisuhua 发布于2019-08-19 17:34 / 2182人阅读

摘要：变量声明和是新出的两个变量声明的方式。而新版的引入了关键字，用以声明一个块级域的本地变量，这样能避免一些问题。作为的超集，自然也是支持和的。这意味着变量可以在声明之前使用，这个行为叫做。本文参考变量声明翻译版变量声明参考文档参考文档参考文档

变量声明

let 和 const 是JavaScript新出的两个变量声明的方式。前面说过let 和 var类似，但是它们的作用域是不一样的。

关于作用域，在ES6之前的Javascript中，函数体是唯一能能够创建新作用域的地方。那时候没有let，用var声明的变量，作用域要么是全局，要么是函数体，没有块级的作用域（块作用域变量在包含它们的块外部或for循环外部是不能被访问的）。而新版的Javascript引入了let关键字，用以声明一个块级域的本地变量，这样能避免一些问题。

至于const，它的作用域和let一样，但是是声明创建一个只读常量，这里要注意一下，这并不意味着该常量指向的值不可变，而是该常量只能被赋值一次！

举个例子：

// numLivesForCat的值不能再变了
const numLivesForCat = 9;
const kitty = {
    name: "Aurora",
    numLives: numLivesForCat,
}

// 错误，kitty指向的对象不能变
kitty = {
    name: "Danielle",
    numLives: numLivesForCat
};

// 没问题，对象的属性可以变化
kitty.name = "Rory";
kitty.name = "Kitty";
kitty.name = "Cat";
kitty.numLives--;

另外，使用const定义常量时，一定要初始化。

Typescript作为Javascript的超集，自然也是支持let和const的。

该用哪个

const没什么好说的，你需要常量就用它，不需要就不用。但是let和var要比较一下。

使用var声明变量时，不管你声明多少次，你得到的只有一个变量，而使用let时，同一个变量名在同一作用域内声明一次以上会报错。

使用var时很容易出bug，比如：

function sumMatrix(matrix: number[][]) {
    var sum = 0;
    for (var i = 0; i < matrix.length; i++) {
        var currentRow = matrix[i];
        for (var i = 0; i < currentRow.length; i++) {
            sum += currentRow[i];
        }
    }

    return sum;
}

里层for循环中的i会覆盖外层的i，因为i引用的都是相同的函数作用域内的变量。

但是如果把var换成let，内层的for循环自己是一个块级作用域，会屏蔽外部的作用域中的相同名字的变量，所以这两个i会井水不犯河水。

另外，因为var是函数作用域，所以对于一个var声明的变量，你可以先使用再声明：

bla = 2;
var bla;
// ...

// 可以理解为下面这样：

var bla;
bla = 2;

引用一段mozilla文档中的话：

由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明。这意味着变量可以在声明之前使用，这个行为叫做“hoisting”。

嗯，使用var时，这叫变量声明提升，但是如果你使用let时也这样做，这叫错误！ 块级作用域的变量的一个特点是，它们不能在被声明之前使用。

最后，建议尽量用let替换var。

本文参考：

Typescript Handbook 变量声明

Typescript Handbook 翻译版变量声明

mozilla Javascript参考文档 var

mozilla Javascript参考文档 let

mozilla Javascript参考文档 const

云服务器 GPU云服务器声明变量 python变量声明 Ruby变量声明 asp变量声明

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78637.html

从 JavaScript 到 TypeScript - 声明类型

摘要：要为变量或者常量指定类型也很简单，就是在变量常量名后面加个冒号，再指定类型即可，比如声明函数是类型，即返回值是类型声明参数是类型声明是无返回值的声明是这段代码演示了对函数类型参数类型和变量类型地声明。变量函数参数和返回值需要申明类型。从 JavaScript 语法改写为 TypeScript 语法，有两个关键点，一点是类成员变量(Field)需要声明，另一点是要为各种东西(变量、参数...

Flands 2019-08-20 17:01 评论0 收藏0
TypeScript - 一种思维方式

摘要：怎么影响了我的思考方式对前端开发者来说，能强化了面向接口编程这一理念。使用的过程就是在加深理解的过程，确实面向接口编程天然和静态类型更为亲密。摘要：学会TS思考方式。原文：TypeScript - 一种思维方式作者：zhangwang Fundebug经授权转载，版权归原作者所有。电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开...

noONE 2019-05-22 15:27 评论0 收藏0
typescript - 一种思维方式

摘要：怎么影响了我的思考方式对前端开发者来说，能强化了面向接口编程这一理念。使用的过程就是在加深理解的过程，确实面向接口编程天然和静态类型更为亲密。电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开发无疑就是在尝试换一种思维方式做事情。其实直到最近，我才开始系统的学习 typescript ，前后大概花了一个月左右的时间。在这之前，我也在...

CKJOKER 2019-08-23 17:05 评论0 收藏0
翻译 | 开始使用 TypeScript 和 React

摘要：原文地址原文作者译者校对者和其他人有一些关于比较好的博文，跟随这些博文，我最近开始使用。今天，我将展示如何从零开始建立一个工程，以及如何使用管理构建过程。我也将陈述关于的第一印象，尤其是使用和。原文地址：Getting started with TypeScript and React 原文作者：Jack_Franklin 译者：luxj 校对者：veizz Tom Dale...

superw 2019-08-21 16:27 评论0 收藏0
Typescript 基础（二）之函数

摘要：调用者容易迷惑，当传入函数的参数类型为时返回值的类型究竟是还是。前面两个是函数声明，最后一个是函数实现，有参数类型和返回值类型随意搭配的意思。 Typescript 中的函数 Javascrip 中函数是一等公民一、Javascript 中的两种常见的定义函数的方式1、函数声明 function myFunc(x,y){ return x+y } 2、函数表达式 let add...

yeyan1996 2019-08-23 10:22 评论0 收藏0