typescript - 函数参数中的模板插值导致 TS2554 :Expected 1 arguments, 但得到 2

Question

遵循 Testcafe 入门指南 http://devexpress.github.io/testcafe/documentation/getting-started/我在修改示例测试脚本时遇到问题。

Typescript版本:2.7.2 Node版本:8.7.0 Webstorm版本:2017.2.6

import {Selector} from 'testcafe';

fixture `Getting Started`
    .page `http://some-website.com`;

test('Test', async t => {

})

这编译并运行良好。我读过 Typescript 支持字符串模板，示例测试已经使用反引号包围它的字符串，所以我尝试分解出 URL 的一部分:

import {Selector} from 'testcafe';

let domain = 'some-website.com';

fixture `Getting Started`
    .page `http://${domain}`;

test('Test', async t => {

})

这会导致错误“TS2554:Expected 1 arguments, but got 2”并且 webstorm 突出显示从 fixture(.

开始的两行代码。

尝试用变量完全替换 .page 的参数会导致不同的编译错误。

import {Selector} from 'testcafe';

let domain:string = 'premierrange-local.com';
let str:string = `http://${domain}`;

fixture `Getting Started`
    .page str;

test('Test', async t => {

})

"TS1005:';'预期的。”关于 str 变量的用法。

但是，将str放在括号中解决了编译错误:

import {Selector} from 'testcafe';

let domain:string = 'premierrange-local.com';
let str:string = `http://${domain}`;

fixture(`Getting Started`)
    .page(str);

test('Test', async t => {

})

这编译并运行良好。因此，如果传递变量，似乎需要 page 参数周围的括号，但如果传递字符串文字，则不需要？但我的第一次尝试只是简单地引入了一个变量插值，它被视为编译错误。

page() 的定义如下所示(来自 node_modules/testcafe/ts-defs/index.d.ts):

page(url: string  | TemplateStringsArray): this;

有人可以解释为什么 Typescript 认为我的第一次修改是非法的吗？

Answer 1

标签模板通常有two parameters ，第一个参数将包含 sting 文字，第二个参数将是一个传播参数，并将包含替换值。

function tagged(url: TemplateStringsArray, ...values:any[]){
    return "url";
}

let d = tagged `ss ${0}`; // conceptually equivalent to tagged(["value ", " (s)"], 0);

虽然这是通常的方式，但我们可以使用定义，因为标记模板等同于函数调用，我们可以使用标记模板的参数， typescript 编译器将检查它们的兼容性

function tagged(url: TemplateStringsArray, ...values:number[]){
    return "url";
}
let v1 = 0;
let v2 = ''
let d = tagged `value ${v1} ${v2}(s)`; // error, replacement values must be numbers and v2 is a string

在 testcafe 函数中，只有一个参数，第一个，所以没有替换值的参数，因此即使我们可以使用标记模板语法来调用page 没有接受替换值的参数，因此任何替换值都会产生错误。我认为 testcafe 的设计者只是想使用标记语法，但不一定要执行字符串中的任何替换。

您可以通过使用对 page 的常规函数​​调用来调用 page 来解决此限制:

let site = 'some-website'
fixture `Getting Started`
    .page (`http://${site}.com`);