CODEWITHSUNDEEP
javascripttypescriptinterface
Joshua
Joshua

Reputation: 2682

Is it possible to combine members of multiple types in a TypeScript annotation?

It seems that what I am trying to do is not possible, but I really hope it is.

Essentially, I have two interfaces, and I want to annotate a single function parameter as the combination of both of them.

interface ClientRequest {
    userId:     number
    sessionKey: string
}

interface Coords {
    lat:  number
    long: number
}

And then, in the function, I want to do something like this:

function(data: ClientRequest&Coords) { ... }

So that my 'data' object could contain all of the members from both types.

I saw something referenced in a spec preview, under "Combining Types' Members", but it seems like this hasn't made it in yet.

If it isn't possible, my solution might look like this:

interface ClientRequest<T> {
    userId:     number
    sessionKey: string
    data?:       T
}

function(data: ClientRequest<Coords>) { ... }

Which would work in this case, although it's not as dynamic as I would like. I would really like to be able to combine multiple (2+) types in the annotation itself:

function(data: TypeA&TypeB&TypeC) { ... }

I would guess that the conventional solution is to define a type that extends those types, although that seems less flexible. If I want to add a type, I would have to either

Any TypeScript experts care to point me in the right direction?

Upvotes: 141

Views: 217972

Answers (7)

james
james

Reputation: 4573

This is a reusable utility type based on this answer, for combining a union of Record types

type MergeUnionOfRecordTypes<U extends Record<string, unknown>> = { [K in (U extends unknown ? keyof U : never)]: U extends unknown ? K extends keyof U ? U[K] : never : never}

type A = {
    a: string
}

type B = {
    b: number
}

type C = {
    c: boolean
}

type D = {
    c: A
}

type Combined = MergeUnionOfRecordTypes<A | B | C | D>

/*
type Combined = {
    a: string;
    b: number;
    c: boolean | A;
}
*/

const combined1: Combined = {
    a: 'test',
    b: 2,
    c: {
        a: ''
    }
}

const combined2: Combined = {
    a: 'test',
    b: 2,
    c: false
}

Playground example

Upvotes: 11

Martin
Martin

Reputation: 16302

ANSWER UPDATED ON 2018-10-30

TypeScript now has type intersections. So you can now simply do:

interface ClientRequest {
  userId:     number
  sessionKey: string
}

interface Coords {
  lat:  number
  long: number
}

function log(data: ClientRequest & Coords) { 
  console.log(
    data.userId,
    data.sessionKey,
    data.lat,
    data.long
  );
}

ORIGINAL ANSWER

The specific answer to your question is: no, there is not a single inline annotation to signify combined or extended types.

The best practice for the problem you are trying to solve would be to create third type that would extend the other two.

interface IClientRequestAndCoords extends IClientRequest, ICoords {} 

function(data: IClientRequestAndCoords)

Upvotes: 223

Thiago Oliveira Santos
Thiago Oliveira Santos

Reputation: 81

You can do something like this, now, with conditional types, if types P1 and P2 extends of object:

type P1UnionP2 = { [k in (keyof P1 | keyof P2)]: k extends keyof P1 ? P1[k] : k extends keyof P2 ? P2[k] : never }

The best approach is, if that's applies in your case, this:

interface P1UnionP2 extends P1, P2 { }

Upvotes: 3

smac89
smac89

Reputation: 43128

It's very possible if you use ES6 Object.assign. Assuming you have existing objects of those types.

First let's define the types

interface ClientRequest {
    userId:     number
    sessionKey: string
}

interface Coords {
    lat:  number
    long: number
}

Now the combination of both:

type Combined = ClientRequest & Coords;

Assuming you have two existing objects which you would like to pass to the function:

const foo: ClientRequest = {
    userId: 10,
    sessionKey: "gjk23h872ty3h82g2ghfp928ge"
}

const bar: Coords = {
    lat: -23,
    long: 52
}

You can combine them like this:

const myData: Combined = Object.assign({}, foo, bar);

Or simply create a new one like this:

const myData: Combined = {
    userId: 10,
    sessionKey: "gjk23h872ty3h82g2ghfp928ge",
    lat: -23,
    long: 52,
}

Previous method

Not type-safe.

The <Type> {...} syntax casts the object to the type specified in the angle brackets (Type), which bypasses Typescript's checker. See Type Assertion.

const myData = Object.assign({},
    <ClientRequest> {
        userId: 10,
        sessionKey: "gjk23h872ty3h82g2ghfp928ge"
    },
    <Coords> {
        lat: -23,
        long: 52
    }
);

Finally, call the function:

function myFunc(data: Combined) { ... }
myFunc(myData);

See this other question for even more ways of accomplishing this:

How can I merge properties of two JavaScript objects dynamically?

Upvotes: 28

James Trickey
James Trickey

Reputation: 1447

I just needed to do this and the following solution worked for me:

type MyFunction = () => void

interface MyFunctionWithProps extends MyFunction {
  prop1: string,
  prop2: number
}

// compiles fine
const MyMashup: MyFunctionWithProps = Object.assign(
  () => {},
  {
    prop1: 'hello',
    prop2: 1234
  }
)

Upvotes: 0

basarat
basarat

Reputation: 275927

I saw something referenced in a spec preview, under "Combining Types' Members", but it seems like this hasn't made it in yet.

I think you would be more interested in intersection types (not union). The difference is that the object passed in must support all of the properties and not one of.

Github issue : https://github.com/Microsoft/TypeScript/issues/1256#issuecomment-64533287

Upvotes: 2

Fenton
Fenton

Reputation: 250942

The interface answer is a reasonably graceful method of combining the two structures, but you mention that you want to know if it is possible to combine the type as part of an annotation.

A note on interfaces

I have supplied some descriptions of a few features related to your question, but first I would say that if you are put off of the interface solution because you think you'll have to create an ICoords interface (as in your question it looks more like a class) - rest easy - because an interface can extend a class too:

// Interface extending an interface and a class
interface IClientRequestAndCoords extends IClientRequest, Coords {}

The interface will even merge properties as long as they have the same name and type. (For example if they both declared a property x: string.

Here are notes on the other annotation features you allude to.

Union Types

The specification you may have read is the union type, which looks like this:

var x: IClientRequest | Coords;

But this only ensures that x is either one or the other, not a combination of the two. Your syntax of a merged type IClientRequest & Coords isn't on the roadmap as far as I know.

function go(data: IClientRequest | Coords) {
    var a = data[0]; // IClientRequest
    var b = data[1]; // Coords
}

// Allowed (even though it doesn't supply Coords data
go(myClientRequest);

// Allowed (even though it doesn't supply IClientRequest data
go (myCoords);

This also isn't part of the current release, but is coming later.

Tuple Types

Another possible part of the specification you may have seen is tuple types:

var x: [IClientRequest, Coords];

But this would change the shape of the data from being a structure to being like an array where element 0 is an IClientRequest and element 1 is an Coords.

function go(data: [IClientRequest, Coords]) {
    var a = data[0]; // ClientRequest
    var b = data[1]; // Coords
}

go([myClientRequest, myCoords]);

Uber-Annotation

And finally, if you really don't want to create a merged interface, you could just use an uber-annotation:

function go(data: { userId:number; sessionKey: string; x: number; y: number; } ) {

}

Upvotes: 15

Related Questions