这是我的水果。ts

export type Fruit = "Orange" | "Apple" | "Banana"

现在我在进口水果。Ts在另一个typescript文件中。这是我有的

myString:string = "Banana";

myFruit:Fruit = myString;

当我这样做的时候

myFruit = myString;

我得到一个错误:

类型“string”不能赋值给类型“Orange”|“Apple”| “香蕉”

如何将字符串分配给自定义类型水果的变量?


当前回答

当你这样做的时候:

export type Fruit = "Orange" | "Apple" | "Banana"

…你正在创建一个名为Fruit的类型,它只能包含字面意义上的“Orange”、“Apple”和“Banana”。这种类型扩展了String,因此可以将它赋值给String。但是,String没有扩展"Orange" | "Apple" | "Banana",所以不能分配给它。String不太具体。它可以是任何字符串。

当你这样做的时候:

export type Fruit = "Orange" | "Apple" | "Banana"

const myString = "Banana";

const myFruit: Fruit = myString;

...它的工作原理。为什么?因为在这个例子中myString的实际类型是“Banana”。是的,“香蕉”就是那种类型。它是extends String,所以它是可赋值给String的。此外,当一个类型扩展Union type的任何组件时,它也扩展了Union type。在本例中,类型“Banana”扩展了“Orange”|“Apple”|“Banana”,因为它扩展了它的一个组件。因此,“香蕉”可分配给“橙子”|“苹果”|“香蕉”或水果。

其他回答

以上所有答案都是有效的,然而,在某些情况下,字符串文字类型是另一个复杂类型的一部分。考虑下面的例子:

  // in foo.ts
  export type ToolbarTheme = {
    size: 'large' | 'small',
  };

  // in bar.ts
  import { ToolbarTheme } from './foo.ts';
  function useToolbarTheme(theme: ToolbarTheme) {/* ... */}

  // Here you will get the following error: 
  // Type 'string' is not assignable to type '"small" | "large"'.ts(2322)
  ['large', 'small'].forEach(size => (
    useToolbarTheme({ size })
  ));

你有多种解决方案来解决这个问题。每个解决方案都是有效的,并且有自己的用例。

1)第一个解决方案是为size定义一个类型,并从foot .ts导出它。当您需要单独使用size参数时,这很好。例如,您有一个函数接受或返回类型大小的参数,而您想输入它。

  // in foo.ts
  export type ToolbarThemeSize = 'large' | 'small';
  export type ToolbarTheme = {
    size: ToolbarThemeSize
  };

  // in bar.ts
  import { ToolbarTheme, ToolbarThemeSize } from './foo.ts';
  function useToolbarTheme(theme: ToolbarTheme) {/* ... */}
  function getToolbarSize(): ToolbarThemeSize  {/* ... */}

  ['large', 'small'].forEach(size => (
    useToolbarTheme({ size: size as ToolbarThemeSize })
  ));

2)第二个选项是将其转换为ToolbarTheme类型。在这种情况下,如果不需要,就不需要公开ToolbarTheme的内部。

  // in foo.ts
  export type ToolbarTheme = {
    size: 'large' | 'small'
  };

  // in bar.ts
  import { ToolbarTheme } from './foo.ts';
  function useToolbarTheme(theme: ToolbarTheme) {/* ... */}

  ['large', 'small'].forEach(size => (
    useToolbarTheme({ size } as ToolbarTheme)
  ));

例如,如果在模拟数据时转换为下拉值[],则将其组合为具有value和display属性的对象数组。

例子:

[{'value': 'test1', 'display1': 'test display'},{'value': 'test2', 'display': 'test display2'},]

如果你正在与类一起工作,你可以做以下其中之一:

示例模型:

type Fruit = 'Apple' | 'Banana';

interface ClassWithFruit  {
  fruit: Fruit;
}

实现模型的类,这里有三个选项:

class MyClass implements ClassWithFruit {
  // option 1
  fruit = 'Apple' as const;

  // option 2
  fruit = <const>'Apple';
  
  // option 3
  readonly fruit = 'Apple';
}

这个问题被标记为Angular,尽管它实际上与Angular没有任何关系。然而,有(至少)一个Angular特定的情况,你可能会意外地得到这个错误。

如果你禁用了strictNullInputTypes 如果你使用一个文字类型,比如Fruit作为@Input() 你试图将'Orange'传递给一个输入,它被解释为一个字符串。

这将在Angular 13.1中修复。

https://github.com/angular/angular/pull/38305

更新

正如@Simon_Weaver的回答中提到的,从TypeScript 3.4版本开始,就可以将它断言为const:

let fruit = "Banana" as const;

旧的答案

你需要转换它:

export type Fruit = "Orange" | "Apple" | "Banana";
let myString: string = "Banana";

let myFruit: Fruit = myString as Fruit;

还要注意,当使用字符串字面量时,您只需要使用一个|