typescript - 理解类型断言

Question

我只是从 typescript 开始，尽管我认为事情会很容易，但 typescript 似乎与 javascript 并没有那么相似，而且有点令人困惑

无论如何，在 typescript 中(不确定我的代码是否有效)做这样的事情有什么区别

    const ua: string = req.headers['user-agent']!

或者根据这个答案是这样的: https://stackoverflow.com/a/38831495/10433835

const us = <string> req.headers['user-agent']!

Ps:我不确定哪个代码是有效的。

Answer 1

const ua: string = req.headers['user-agent']!

意味着您创建了一个名为 ua 的新变量它被显式设置为字符串类型并为其分配一个值。如果您尝试将不是字符串的内容分配给同一变量，这将触发错误，例如 const ua: string = 42

const us = <string> req.headers['user-agent']!

在这种情况下，您只是创建了一个名为 us 的新变量。它没有为它定义明确的类型。在这种情况下，TypeScript 将尝试根据您分配的内容进行猜测。例如，看到这个

let a = "hello"; //no type for `a` but assigning a string makes the guess to be `string`
a = 42; //error because it's not a string

TypeScript Playground

当您使用 <string> 进行显式类型断言时你保证 TS 会猜测类型是 string .

在两者中，第一个更安全，因为你知道你需要一个字符串，如果不是，那么你会得到一个编译时错误。第二种方法依赖于隐式类型猜测，这实际上可能是您的错误。这意味着在编译时这将是正确的，因为您已经否决了编译器，但不一定在运行时工作。这是一个例子:

let a = <string> getData();

function getData(): string | number {
    return 42;
}

TypeScript Playground

这将编译，但它不会是正确的，因为你告诉编译器总是期望一个字符串，它实际上可能是一个数字(返回类型是 string | number ，所以它可能是)而且，函数只是无论如何返回一个数字。因此，在运行时，您在此之后没有类型保证。与显式键入比较

let a: string = getData();

function getData(): string | number {
    return 42;
}

TypeScript Playground

你现在正确地得到一个编译时错误，因为你应该处理当你得到不同类型时发生的事情。

因此，通常应该避免手动类型断言。它可能导致最初甚至可能不存在但稍后可能会出现的错误 - 例如，上面的代码可能有 getData最初只返回 string所以那时变量 a 的显式和隐式类型之间没有区别.通过 <string> 进行类型断言本来是多余的。但是，如果函数随后更改为返回 string | number显式类型断言变得不可靠。