当与字符串原始类型联合时，使打字稿显示字符串文字的类型提示

Question

有没有办法让 typescript 为以下内容显示类型提示？
我正在尝试在输入“test”时显示“test1”或“test2”类型，但我失败了。

type A = "test1" | "test2" | string

// update 1: it does show 'test1' & 'test2' but not in the 'constant' category (e.g. menuItem/spanner/wrench icon ), but in 'string' category (e.g. 'abc' icon )
// <--- doesn't show 'test1' or 'test2' when i am typing 'test'
const a : A = 'test1' 

在示例 1 中，type A 在字符串中更宽，因此我们将 'test1'/'test2' 的类型定义丢失为字符串文字

理想情况下，变量 a 仍应显示 'test1' 和 'test2' 用于自动完成，如示例 2 中的 bvariable。

示例 1：

示例 2：

Answer 1

这个问题的标准答案是microsoft/TypeScript#29729 和microsoft/TypeScript#33471。

---

stringliteral types 与string 的并集，如"test1" | "test2" | string，等价于string。没有A 类型的值不能分配给string，反之亦然。此外，编译器急切地将这些类型简化为string。从类型系统的角度来看，这种行为是绝对正确的，但不幸的是，从 文档 的角度来看，它并没有真正做到你想要的。

理想情况下，您想要一种方法来防止急切减少联合（或者至少让编译器跟踪 IntelliSense 的联合部分）；没有官方支持的方法可以做到这一点，但有一些解决方法：

---

有一个suggestion in microsoft/TypeScript#29729 可以使用类似品牌原语（如this TS FAQ entry 中所述）来实现此效果：

type OtherString = string & {};

这里，OtherString 的类型是 string & {}；这恰好等同于string（“空对象类型”{} 匹配除null 和undefined 之外的所有值...是的，甚至像string 这样的原语）但编译器并没有简化它，因此它会跟踪文字的联合：

type A = "test1" | "test2" | OtherString;
// type A = "test1" | "test2" | OtherString
// not reduced

这为您提供了您正在寻找的行为和提示：

function foo(a: A) { }
foo("test1"); // okay
foo("test2"); // okay
foo("test3"); // okay

foo("") //
//   ^ hint here, test1 and test2

---

当然，这只是一种解决方法，some situations 其中OtherString 可能无法按照您想要的方式运行；所以要小心！

Playground link to code

Answer 2

type A = 'test1' | 'test2' | Omit<string, 'test1' | 'test2'>

类型A可以是：

• 测试1
• 测试2
• 除 test1 和 test2 之外的任何字符串

因此，'test1' 和 'test2' 可以保留。

---

如果你有更多的字符串字面量类型，你可以为它创建一个新类型以避免重复test1，test2 ...

type fixedString = 'test1' | 'test2' | 'test3' ...
type A = fixedString | Omit<string, fixedString>

Answer 3

您的代码示例显示了类型断言（as A），但图片显示了类型注释：: A。我会回避类型断言，仅仅是因为：

type A = 'test1' | 'test2'

const a = 'foo' as A // no error
const aa: A = 'foo' // errors correctly

playground

---

关于自动完成，我认为它不能与类型断言一起使用，因为您在编写 test 之后编写 as A，并且如您所见，即使联合类型中没有 string，你可以断言任何字符串as A。

如果你改用类型注释，我对自动完成没有任何问题：

Answer 4

是的，提示正确显示。

字符串文字类型与联合类型、类型保护和类型别名很好地结合在一起。您可以结合使用这些功能来获得类似枚举的字符串行为。

type A = "test1" | "test2";


function animate(easing: A) {
  if (easing === "test1") {
      console.log("test1");
    } else if (easing === "test2") {
        console.log("test2");
    } else {
      console.log("ignoring your types though.")
  }
}
animate("test1");
animate("test2");
animate("test3"); // error:Argument of type '"test3"' is not assignable to parameter of type 'A'.

您可以传递两个允许的字符串中的任何一个，但任何其他字符串都会给出错误。

像这样：