打字稿：可选的函数参数导致函数体出现问题

Question

我是 TypeScript 的新手，对函数中的可选参数有一点小问题。我在 Visual Studio 参数的 query 代码中收到以下错误（请参见屏幕截图）。这个错误我真的不明白，因为我定义的类型是string。那么为什么我会收到此错误？

message: 'Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'

public async fetchPut<T>(requestURL: string, body: TBody, query?: string): Promise<T> {

    const finalRequestOption: IFetchOption = Object.assign({
        method: 'PUT',
        headers: this.headers
    }, { body });

    const response: Response = await this.httpClient.fetch(
            this.getRequestURL(requestURL, query), 
            finalRequestOption);

    return response.json();
}

Answer 1

为什么会出现这个错误？

首先，query的类型不是string，而是string | undefined的联合类型。那是因为 optional parameters have a union type of T | undefined.

其次，当 TypeScript 2.0 使用严格的 null 检查时，将 T | undefined 类型的变量分配给 T 类型的变量不会编译。 From the docs:

...whereas T and T | undefined are considered synonymous in regular type checking mode (because undefined is considered a subtype of any T), they are different types in strict type checking mode...

如何解决这个错误？

一种选择是在 tsconfig.json 文件中将 strictNullChecks 设置为 false。

Answer 2

getRequestURL 函数期望 query 为 string，但 fetchPut 函数将查询定义为 string | undefined（可选参数）。

您也可以将 getRequestURL 的 query 参数定义为可选参数：

getRequestURL(requestURL: string, query?: string)

或为其提供默认值：

getRequestURL(requestURL: string, query: string = '')

Answer 3

简短的回答是 Typescript 希望您在函数调用之前进行类型检查，以从可能的类型列表中消除 "undefined"。例如：

if (typeof myVar !== 'undefined') {
    myFunction(myVar);
}

或者，因为 'undefined' 是假的，你可以使用 double-bang 布尔转换技巧：

if (!!myVar) { myFunction(myVar); }

打字稿：可选的函数参数导致函数体出现问题

Typescript: Optional function arguments cause problems in function body

optional-arguments

typescript

visual-studio-code

为什么会出现这个错误？

如何解决这个错误？