Typescript：字符串文字类型的类型保护

Question

If I have the following code:

interface A {
    foo: string
}

interface B extends A {
    foo: "bar"
}

interface C extends A {
    foo: "baz"
}

interface D ...

namely, one interface and a number of other interfaces that extend the original, but fix a specific property of the original to a single string literal, is it possible for me to design a type guard for interfaces that extend the original by comparing against this property in a generic way? Something like the following:

function isExtensionOfA<T extends A>(obj: A): obj is T {
    return (obj.foo === T.foo.literal_value)
}

Answer 1

TypeScript's static type system is erased when TypeScript is compiled to JavaScript, so the generic type T will not exist at runtime. That means there's no " T.foo " to speak of for you to check at runtime. If you want to check a value at runtime you'll need to actually provide such a value.

Here's one possible approach, where you explicitly pass in the foo value you're checking against:

function isExtensionOfA<T extends A>(
  obj: A,
  foo: T["foo"]
): obj is T {
  return (obj.foo === foo);
}

And you can see that it "works":

function test(obj: A) {
  if (isExtensionOfA<B>(obj, "bar")) {
    obj.bProp.toFixed() // okay
  } else if (isExtensionOfA<C>(obj, "baz")) {
    obj.cProp.toUpperCase() // okay
  } else if (isExtensionOfA<D>(obj, "qux")) {
    obj.dProp // okay
  }
}

where the scare quotes are due to the following big problem with this approach:

test({ foo: "bar" }); // okay at compile time, but:
// 💥 RUNTIME ERROR! obj.bProp is undefined

You can see that {foo: "bar"} was accepted by test() even though it's not a B . That's because types in TypeScript are structural (based on the shape of the data) and not nominal (based on the name or declaration ). When you write T extends A it means " T has a shape compatible with A " so all you know is that it has a foo property of type string . It does not mean " T is one of the interfaces I explicitly declared as extending A ". So T can be all sorts of types other than B , C or D , including anonymous types like the type of the object literal {foo: "bar"} .

Oops.

---

If you really want to limit something to some enumerated set of interfaces, you're going to have to define this type explicitly as a union :

type ExplicitA = B | C | D // | ...

And once you have that you could write isExtensionOfA() so that it restricts its input to ExplicitA objects:

function isExtensionOfA<K extends ExplicitA["foo"]>(
  obj: ExplicitA,
  foo: K
): obj is Extract<ExplicitA, { foo: K }> {
  return (obj.foo === foo);
}

and now I'm using the Extract utility type to filter ExplicitA to just the union member corresponding to the foo value passed in. Now we can make our test() function use it without even needing to manually specify the type arguments:

function test(obj: ExplicitA) {
  if (isExtensionOfA(obj, "bar")) {
    obj.bProp.toFixed() // okay
  } else if (isExtensionOfA(obj, "baz")) {
    obj.cProp.toUpperCase() // okay
  } else if (isExtensionOfA(obj, "qux")) {
    obj.dProp // okay
  }
}

And now the compiler will complain about calling test() with some anonymous type that happens to be compatible with A :

test({ foo: "bar" }); // error at compile time

So, that's safe, and it all "works". Uh oh, scare quotes again.

---

The problem is that we've now gone through a lot of extra effort to do something TypeScript does natively. The type ExplicitA is a discriminated union where foo is the discriminant property. We don't need a separate isExtensionOfA() [user-defined type guard function] https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates ). We can just check the discriminant property directly:

function test(obj: ExplicitA) {
  if (obj.foo === "bar") {
    obj.bProp.toFixed() // okay
  } else if (obj.foo === "baz") {
    obj.cProp.toUpperCase() // okay
  } else {
    obj.dProp // okay
  }
}

So you probably want to just use a discriminated union to start with. That implies your A interface might not be necessary (unless there are other base properties you want to inherit), and you can rename A to be the union:

interface B {
  foo: "bar"
  bProp: number;
}

interface C {
  foo: "baz"
  cProp: string;
}

interface D {
  foo: "qux"
  dProp: boolean
}

type A = B | C | D // | ...

function test(obj: A) {
  if (obj.foo === "bar") {
    obj.bProp.toFixed() // okay
  } else if (obj.foo === "baz") {
    obj.cProp.toUpperCase() // okay
  } else {
    obj.dProp // okay
  }
}

And now things really

Playground link to code