从浅入深学习TypeScript，通俗易懂——变量声明

  • 一、TypeScript是什么？
  • 二、使用步骤
  • 1.var 声明
  • 作用域规则
  • 捕获变量怪异之处 *(常见面试题)
  • 变量提升
  • let 声明
  • 块作用域
  • 重定义及屏蔽
  • 块级作用域变量的获取
  • let vs. const
  • 解构数组
  • 对象解构
  • 属性重命名
  • 总结


一、TypeScript是什么？


TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

TypeScript 增加了代码的可读性和可维护性
类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
可以在编译阶段就发现大部分错误，这总比在运行时候出错好
增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、代码重构等

TypeScript 非常包容

TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可
即使不显式的定义类型，也能够自动做出类型推论
TypeScript 的类型系统是图灵完备的，可以定义从简单到复杂的几乎一切类型
即使 TypeScript 编译报错，也可以生成 JavaScript 文件
兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

二、使用步骤

1.var 声明

作用域规则

var作用域或函数作用域
函数参数也使用函数作用域
坏处：

  1. 多次声明同一个变量并不会报错

例子：

function f(shouldInitialize: boolean) {
    if (shouldInitialize) {
        var x = 10;
    }

    return x;
}
//  变量 x是定义在*if语句里面*，但是我们却可以在语句的外面访问它
// 因为 var声明可以在包含它的函数，模块，命名空间或全局作用域内部任何位置被访问
f(true);  // returns '10'
f(false); // returns 'undefined'

捕获变量怪异之处 *(常见面试题)

for (var i = 0; i < 10; i++) {
    setTimeout(function() { console.log(i); }, 100 * i);
}
// 打印输出
// setTimeout的每一个函数表达式实际上都引用了相同作用域里的同一个i
10
10
10
10
10
10
10
10
10
10

上述情况解决方案： 立即执行函数

for (var i = 0; i < 10; i++) {
    // capture the current state of 'i'
    // by invoking a function with its current value
    (function(i) {
        setTimeout(function() { console.log(i); }, 100 * i);
    })(i);
}

变量提升

先使用变量稍后再声明变量而不会引发异常。提升后的变量将返回 undefined 值。

/**
 * 例子1
 */
console.log(x === undefined); // true
var x = 3;


/**
 * 例子2
 */
// will return a value of undefined
var myvar = "my value";

(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();

let 声明

块作用域

词法作用域或块作用域，块作用域变量在包含它们的块或for循环之外是不能访问的。
块级作用域的变量的另一个特点是，它们不能在被声明之前读或写。这些变量始终“存在”于它们的作用域里，但在直到声明它的代码之前的区域都属于 暂时性死区

重定义及屏蔽

块级作用域变量需要在明显不同的块里声明。

块级作用域变量的获取

let vs. const

const 声明是声明变量的另一种方式。

与let声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。 换句话说，它们拥有与 let相同的作用域规则，但是不能对它们重新赋值。引用的值是不可变的(基础数据类型的值不会改变，引用类型的引用地址不会改变，地址中的值可以改变)。

typescript 编程思想_作用域

解构数组

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

对象解构

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a, b } = o;
a // 'foo'
b // 12

属性重命名

let o = {
    a: "foo",
    b: 12,
    c: "bar"
};
let { a: newName1, b: newName2 } = o;
newName1 // 'foo'
newName2 // 12

总结


good night