Question

在打字稿类和第三方库中，我看到了...，我想知道如何使用它。

以下是ng2-admin模板的一个示例。我认为它曾用于从该类中导入整个json。

export const PAGES_MENU = [
  {
    path: 'pages',
    children: [
      {
        path: 'dashboard',
        data: {
          menu: {
            title: 'Dashboard',
            icon: 'ion-android-home',
            selected: false,
            order: 0
          }
        }
      },
      {
        path: 'editors',
        data: {
          menu: {
            title: 'Editors',
            icon: 'ion-edit',
            order: 100,
          }
        }
      }
   ]
 }
];


//use
import { PAGES_MENU } from './pages/pages.menu';

export const MENU = [
  ...PAGES_MENU
];

我认为在这里导入整个json并将它们导出以供使用。\在不同的类中。

Answer 1

...是ES2015 Spread Operator

扩展语法允许在需要多个参数（用于函数调用）或多个元素（用于数组文字）或多个变量（用于解构赋值）的地方扩展表达式。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Answer 2

在您的示例中，它称为spread operator，但...也可以是rest operator。

function foo(x, ...y:number[]) { } // This is the rest operator, see below
var args = [0, 1, 2];

// Instead of doing this
foo("hello", args[0], args[1], args[2])

//You can do this
foo("hello", ...args); // This calls foo like foo("hello", 0, 1, 2)

// The function call gets compiled to this javascript:
foo.apply(void 0, ["hello"].concat(args));

在打字稿中，它主要与rest操作符一起使用，否则你会遇到一些类型错误：

function foo(x, y, z) { }
var args = [0, 1, 2];

// Type error here
foo(...args)

// But you could get around it by:
(foo as any)(...args)

rest操作符允许您定义一个可以接受任意数量参数的函数。当你有这些时，如果你已经在数组中有参数，那么扩展运算符很方便。

您示例中的用法被编译为常规切片：

exports.MENU = PAGES_MENU.slice();

Answer 3

这是传播运营商。它不仅适用于打字稿，而且适用于ES2015 javascript：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Answer 4

这是spread syntax，用于（浅）复制数组。

在您的情况下，以下表达式给出相同的结果：

[...PAGES_MENU]

PAGES_MENU.slice()

Array.from(PAGES_MENU)

PAGES_MENU.map(x => x)

什么是打字稿编程？

4 个答案: