React and TypeScript - Component<Props & {}>

Question

What does this piece of code mean?

export class App extends Component<Props & { some: string; some2: string; }>

I mean... what is after the & sign

& { some: string; some2: string; }

It's an inline type, with keys some and some2 as strings. — Phix
– Phix, Commented Mar 6, 2019 at 22:44
but why there are ";" signs? Why not ","? This is not a part of the interface? — Adee
– Adee, Commented Mar 6, 2019 at 22:46

Morten Twellmann · Accepted Answer · 2019-03-06 23:18:13Z

2

It's an intersection type. When defining interfaces in typescript you can separate each property with a semicolon. You can also use commas. It doesn't matter.

https://www.typescriptlang.org/docs/handbook/interfaces.html

edited Mar 6, 2019 at 23:18

answered Mar 6, 2019 at 22:59

Morten Twellmann

1552 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phix · Accepted Answer · 2019-03-06 23:17:56Z

0

export class App extends Component<Props & { some: string; some2: string; }>

Is no different from

interface SomeInterface {
    some: string;
    some2: string;
}
export class App extends Component<Props & SomeInterface>

It's just written inline instead of creating a new interface for that one line.

answered Mar 6, 2019 at 23:17

Phix

10.1k4 gold badges39 silver badges65 bronze badges

Collectives™ on Stack Overflow

React and TypeScript - Component<Props & {}>

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related