TypeScript 的变量定义

简介: TypeScript 的变量定义

let 和 const 是 JavaScript 中变量声明的两个相对较新的概念。 正如我们之前提到的,let 在某些方面类似于 var,但允许用户避免用户在 JavaScript 中遇到的一些常见“陷阱”。


const 是 let 的增强,因为它可以防止重新分配给变量。


变量解构 - Array destructuring

let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2

这将创建两个名为 first 和 second 的新变量。 这相当于使用索引,但更方便:


first = input[0];
second = input[1];

同样适用于函数参数列表:


function f([first, second]: [number, number]) {
  console.log(first);
  console.log(second);
}
f([1, 2]);

可以配合 … 语法使用:

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

Object destructuring

这在 SAP Spartacus 的源代码里比较多见。


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

这会从 o.a 和 o.b 创建新变量 a 和 b。 请注意,如果不需要,可以跳过 c。


请注意,我们必须用括号将这个语句括起来。 JavaScript 通常将 大括号 解析为块的开始。


您可以使用以下语法为对象中的其余项目创建变量…:


let { a, ...passthrough } = o;

let total = passthrough.b + passthrough.c.length;

1

2

给属性设置别名

let { a: newName1, b: newName2 } = o;

1

这里的语法开始变得混乱。 您可以将 a:newName1 读作“a as newName1”。 方向是从左到右,和下列代码等价:


let newName1 = o.a;

let newName2 = o.b;

1

2

这里的冒号,及其容易同类型定义语法混淆起来。


Spread Operator

展开运算符与解构相反。 它允许您将一个数组扩展到另一个数组中,或者将一个对象扩展到另一个对象中。 例如:


let first = [1, 2];

let second = [3, 4];

let bothPlus = [0, ...first, ...second, 5];

1

2

3

这给 bothPlus 值 [0, 1, 2, 3, 4, 5]。 传播创建第一个和第二个的浅拷贝。 它们不会因 spread Operator 而改变。


spread 操作符也能应用在对象上:


let defaults = { food: "spicy", price: "$$", ambiance: "noisy" };

let search = { ...defaults, food: "rich" };

1

2

spread 后对象的值为:


{ food: "rich", price: "$$", ambiance: "noisy" }

1

和数组展开一样,它是从左到右进行的,但结果仍然是一个对象。 这意味着在扩展对象中较晚出现的属性会覆盖较早出现的属性。


Object 的 spread 操作符有一些局限性:


首先,它只包含对象自己的可枚举属性。 基本上,这意味着在传播对象实例时会丢失方法:


class C {
  p = 12;
  m() {}
}
let c = new C();
let clone = { ...c };
clone.p; // ok
clone.m(); // error!
相关文章
|
前端开发 JavaScript
在TypeScript中定义Promise返回值
在TypeScript中定义Promise返回值
|
25天前
|
JavaScript
typescript块级作用域变量
typescript块级作用域变量
|
2月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
36 1
|
2月前
|
存储 JavaScript 前端开发
TypeScript 中的 Map 对象定义、基本操作和常见用法
TypeScript 中的 Map 对象定义、基本操作和常见用法
251 7
|
2月前
|
存储 设计模式 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(三)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
2月前
|
存储 JavaScript
TypeScript 类的基础:从定义到实例化,让你快速掌握(二)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
2月前
|
缓存 JavaScript 前端开发
TypeScript 类的基础:从定义到实例化,让你快速掌握(一)
TypeScript 类的基础:从定义到实例化,让你快速掌握
|
2月前
|
JavaScript
如何在 TypeScript 中定义类
如何在 TypeScript 中定义类
24 0
|
2月前
|
JavaScript 前端开发 编译器
TypeScript 中的变量声明:变量声明的语法、变量的作用域、变量的类型推断和类型断言
TypeScript 中的变量声明:变量声明的语法、变量的作用域、变量的类型推断和类型断言
46 1
|
2月前
|
JavaScript
TypeScript 联合类型的定义、使用场景和注意事项
TypeScript 联合类型的定义、使用场景和注意事项
78 1