TypeScript语法-- 1. 声明变量的3种方式

TypeScript 系列文章

可浏览博客主页的TypeScript专栏，会陆续添加相关文章，有问题或者可以优化的地方也希望大大门告知
共同进步 ：）

---

---

TypeScript-声明

版本 Version 4.8.4

---

1. var，let，const

let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。

// 一直以来我们都是通过var关键字定义JavaScript变量。
// 可以重复声明
var v = "var";
var v = "var";

// ES6新增了let声明，用来声明变量，用法类似与var，但是所声明的变量，只在let声明所在的代码块内有效。
let l = "let";
// 不可以重复声明
// let l="hello"; // vscode编辑器提示错误 Error

// const是对let的一个增强，它能阻止对一个变量再次赋值。
const c = "const";
// 不可以重复声明
// const c = "const"; // vscode编辑器提示错误 Error
// 不可重新赋值
// c="hello"; // vscode编辑器提示错误 Error

其中常见考题

// 常见考题之一 如何修改，获得01234567
for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    // console.log(i);
  }, 100 * i);
}

// 方法一：IIFE立即执行函数
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);
}
// 方法二：使用let
for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    // console.log(i);
  }, 100 * i);
}

2. 解构数组

直接看实例

let input = [1, 2];
// 这边限制了类型，报错了，可能写法不对~！！！  函数的话没问题
// let [first, second]: [number, number] = input; Error
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

// 快速交互值
[first, second] = [second, first];
console.log(first); // outputs 2
console.log(second); // outputs 1

// 作用于函数参数 这边函数参数就可以添加类型限制~~！！！
function f([first, second]: [number, number]) {
  console.log(first);
  console.log(second);
}
// 等同于？？？
function f2(first: number, second: number) {
  console.log(first);
  console.log(second);
}

// 变量数组里使用...剩余运算符 接收剩余变量
// 赋值数组里使用...扩展运算法 遍历数组
let [front, ...rest] = [1, 2, ...[3, 4]];
console.log("...rest中的...是剩余运算符");
console.log("...[3,4]中的...是扩展运算符");

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

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

let [, second3, , fourth3] = [1, 2, 3, 4];
console.log("second3 => ",second3); // outputs 2
console.log("fourth3 => ",fourth3); // outputs 4

3. 解构对象

直接看实例

let o = {
  a: "foo",
  b: 12,
  c: "bar",
  d: 122,
};
// 这通过 o.a and o.b 创建了 a 和 b 。 注意，如果你不需要 c 你可以忽略它。
// 也可以用...剩余运算符 接收剩余变量
let { a, b, ...other } = o;
console.log(a);
console.log(b);
console.log(other);

// 对象结构 别名 主要看tempA ~
// 总共3个对象 第二个是干扰项，看不懂就去掉再看
// 第一个对象是变量对象，第二个对象是数据类型对象，第三个对象是赋值对象
// 其中 "333" 是第一个变量对象.aa的默认值
let { aa: tempA = "333" }: { aa: string } = {
  aa: "222",
};
console.log(tempA);