Extending a string in TypeScript

Question

When using generics in TypeScript, you sometimes see a type Parameter such as:

T extends string

Isn’t this the same as using string directly? Can you subclass string? What would this be good for?

Answer 1

type narrowedString =  "foo" | "bar"

// type ExtendsString = true
type ExtendsString = "foo" extends string ? true : false 

"foo" and "bar" extend both the string type. For example that is useful, when you want to define enum like data structures (without the built in TypeScript enum type) or constants.

When a function offers a generic type parameter which extends string like T extends string, you can use that to enforce strong typing for your enums/constants.

function doSomething<T extends string>(t: T): {a: T} {
...
}

// invoke it
doSomething("foo" as const) // return {a: "foo"}

Don't make the mistake to lump extends in TypeScript's typesystem together with extends from ES classes - they are two complete distinct operators.

class extends corresponds to instanceof and exists in the runtime as a construct, whereas in the type system extends e.g. occurs with Conditional types,can be translated with "is assignable to" and is only for compile time.

Update:

You can find out more about String Literal Types in the TypeScript docs.

Answer 2

Here is a simple example of how you might extend a string and how hard coding the type would break it.

type Foo = string & Partial<{ meta: string }>

const foo: Foo = 'foo';
foo.meta = 'this string is important';

function hardCoded(x: string): string {
  return x;
}

hardCoded(foo).meta;  // this is an error

function generic<X extends string>(x: X): X {
  return x;
}
generic(foo).meta;  // but this works