在JavaScript中使用命名参数（基于TypeScript）

Question

我在TypeScript中使用命名参数时遇到问题。我知道它不支持我在TypeScript中使用它的方式。

但是我该怎么做呢？

打字稿：

SomeFunction(name1: boolean, name2: boolean, name3: boolean, name4: boolean) // Will occur only one time, so the change should be in TypeScript

JavaScript：

$(function () {
     ...SomeFunction({name1:false, name2:false, name3:false, name4:true}); // Will occur 100 times
});

我在看(这没有成功):

有没有办法在JavaScript中的函数调用中提供命名参数？

如何将可选的命名参数添加到 TypeScript 函数参数？

我可以在 TypeScript 中做什么，以便在 JavaScript 中使用命名参数？

我想知道的是，当我在TypeScript中使用命名参数时，VisualStudio2015没有显示语法错误。。。

PS.：我使用打字稿2.1

Answer 1

匿名接口

我只是想指出，您也可以在参数列表中声明没有名称的类型，如下所示，这使我们免于键入接口 myfuncArgs。

它仍然迫使我重新键入每个参数，这很痛苦，但我不知道现在如何避免这种情况。

const assert = require('assert')

function myfunc({
    myInt,
    myString,
  }: {
    myInt: number,
    myString?: string,
  }
) {
  return `${myInt} ${myString}`
}

assert.strictEqual(
  myfunc({
    myInt: 1,
    myString: 'abc',
  }),
  '1 abc'
)

assert.strictEqual(
  myfunc({
    myInt: 1,
  }),
  '1 undefined'
)

// Fails as desired since myInt is not optional and was not given.
//assert.strictEqual(
//  myfunc({
//    myString: 'abc',
//  }),
//  'unefined abc'
//)

// Fails as desired since wrong type of myInt.
//assert.strictEqual(
//  myfunc({
//    myInt: '1',
//    myString: 'abc',
//  }),
//  '1 abc'
//)

编译并运行：

npx tsc main.ts
node main.js

测试于：

  "dependencies": {
    "@types/node": "^16.11.13",
    "typescript": "^4.5.4"
  }

相关：

> 在Typescript中析构函数参数

https://github.com/Microsoft/TypeScript/issues/29526功能请求允许语法:

function myfunc({
  myInt: Number,
  myString?: String,
})

当有可选参数时，您通常需要一个显式的接口

如果任何 props 是可选的，是以下示例的情况，并且可能是大多数“选项”参数的情况，那么您可能希望显式定义类型，如以下所述： https://stackoverflow.com/a/42108988/895245 因为调用者迟早需要它来逐步构建选项对象，相关： 如何在 TypeScript 中为对象动态分配属性？

例如。考虑以下工作代码：

const assert = require('assert')

interface myfuncOpts {
  myInt: number,
  myString?: string,
}

function myfunc({
  myInt,
  myString,
}: myfuncOpts) {
  return `${myInt} ${myString}`
}

const opts: myfuncOpts = { myInt: 1 }
if (process.argv.length > 2) {
  opts.myString = 'abc'
}

assert.strictEqual(
  myfunc(opts),
  '1 abc'
)

如果我们已经定义了＜code＞myfuncOpts＜/code＞内联，那么我们将无法执行＜code＞const opts：myfuncOps＜/ccode＞，然后执行＜code＞opts。myString='abc'将失败，因为：

const opts = { myInt: 1 }
if (process.argv.length > 2) {
  opts.myString = 'abc'
}

opts 的类型是从不包含 myString 的初始化中推断出来的。

我希望 TypeScript 能够实现一个系统，您可以在其中说“使用此类函数的此类参数的类型”。然后我们可以使用内联参数类型定义，但仍然以某种方式引用类型，它将是 Nirvana。

Answer 2

获得接近“命名参数”的唯一方法是使用单个对象参数：

type SomeFunctionParams = {
    name1: boolean;
    name2: boolean;
    name3: boolean;
    name4: boolean;
}

SomeFunction(params: SomeFunctionParams) { ... }

然后：

$(function () {
    SomeFunction({
        name1:false,
        name2:false,
        name3:false,
        name4:true
    });
});

Answer 3

真正的命名参数在 JavaScript 和 TypeScript 中都不存在，但您可以使用解构来模拟命名参数：

interface Names {
    name1: boolean
    name2: boolean
    name3: boolean
    name4: boolean
}

function myFunction({name1, name2, name3, name4}: Names) {
    // name1, etc. are boolean
}

注意：名称类型实际上是可选的。以下 JavaScript 代码（不键入）在 TS 中有效：

function myFunction({name1, name2, name3, name4}) {
    // name1, etc. are of type any
}