So firstly, Object Rest/Spread is a proposed ECMAScript feature that is well on its way to being standardized, having reached Stage 4, and is in the process of being formally adopted.

As you know from its usage, it makes working with plain JavaScript objects, incredibly flexible.

Information about the typing of the feature is available in the TypeScript 2.1 documentation. As it very eloquently states:

Object rests are the dual of object spreads, in that they can extract any extra properties that don’t get picked up when destructuring an element:

And indeed there are actually two features in play, the one complementing the other.

Object Rest

When the Rest portion of the feature is used, it enhances object destructuring by enabling us to collect the rest of the properties into a new object comprised of them.

We can write the type annotation as we would for any other value. For example

interface GroupProperties {
  name: string;
  text: string;
  isRequired?: boolean;
  values: string[];
  flagged: boolean;
}

function Group({ name, text, isRequired, ...rest }: GroupProperties) {
  console.log(rest);
}

This informs the type system that name and text are of type string and that is required is of type boolean. Further the type system then knows that rest has two properties, values and flagged of types boolean and string respectively. The type of rest is deduced.

Object Spread

When the Spread portion of the feature is used it enhances object construction by enabling declarative construction of an object from multiple sources, effortless creating derivatives, as well as easy undefining and overriding.

The type system also understands the meaning of Spread expressions and infers the types they evaluate to.

const o = {x: 1, y: 'hello'};

const o1 = {
  ...o,
  y: 1
};

In the above, o1 has type {x: number, y: number}.

Answer from Aluan Haddad on Stack Overflow
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Operators › Spread_syntax
Spread syntax (...) - JavaScript | MDN
The spread (...) syntax allows ... array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created....
🌐
GitBook
basarat.gitbook.io › typescript › future-javascript › spread-operator
Spread Operator | TypeScript Deep Dive
The main objective of the spread operator is to spread the elements of an array or object.
Top answer
1 of 3
11

So firstly, Object Rest/Spread is a proposed ECMAScript feature that is well on its way to being standardized, having reached Stage 4, and is in the process of being formally adopted.

As you know from its usage, it makes working with plain JavaScript objects, incredibly flexible.

Information about the typing of the feature is available in the TypeScript 2.1 documentation. As it very eloquently states:

Object rests are the dual of object spreads, in that they can extract any extra properties that don’t get picked up when destructuring an element:

And indeed there are actually two features in play, the one complementing the other.

Object Rest

When the Rest portion of the feature is used, it enhances object destructuring by enabling us to collect the rest of the properties into a new object comprised of them.

We can write the type annotation as we would for any other value. For example

interface GroupProperties {
  name: string;
  text: string;
  isRequired?: boolean;
  values: string[];
  flagged: boolean;
}

function Group({ name, text, isRequired, ...rest }: GroupProperties) {
  console.log(rest);
}

This informs the type system that name and text are of type string and that is required is of type boolean. Further the type system then knows that rest has two properties, values and flagged of types boolean and string respectively. The type of rest is deduced.

Object Spread

When the Spread portion of the feature is used it enhances object construction by enabling declarative construction of an object from multiple sources, effortless creating derivatives, as well as easy undefining and overriding.

The type system also understands the meaning of Spread expressions and infers the types they evaluate to.

const o = {x: 1, y: 'hello'};

const o1 = {
  ...o,
  y: 1
};

In the above, o1 has type {x: number, y: number}.

2 of 3
2
function GetGroup({ name, text, isRequired, ...props }: { name: string; text: string; isRequired: boolean; other: number; arg: string }) {
  props.other // number
  props.arg // string
}

TypeScript is just about adding types.. and name, text and isRequired are normal arguments. props, on the other hand, are the rest of the arguments. So, whatever the remaining arguments, are assumed to be the rest of the declared types.

Top answer
1 of 4
86

So there is a little clause you may have missed:

Type checking requires spread elements to match up with a rest parameter.

Without Rest Parameter

But you can use a type assertion to go dynamic... and it will convert back to ES5 / ES3 for you:

function foo(x:number, y:number, z:number) { 
 console.log(x,y,z);
}
var args:number[] = [0, 1, 2];

(<any>foo)(...args);

This results in the same apply function call that you'd expect:

function foo(x, y, z) {
    console.log(x, y, z);
}
var args = [0, 1, 2];
foo.apply(void 0, args);

With Rest Parameter

The alternative is that it all works just as you expect if the function accepts a rest parameter.

function foo(...x: number[]) { 
 console.log(JSON.stringify(x));
}
var args:number[] = [0, 1, 2];

foo(...args);
2 of 4
14

I think @Fenton explains it very well but I would like to add some more documentation and possible solutions.

Solutions:

Function overload. I prefer this solution in this case because it keeps some kind of type safety and avoids ignore and any. The original method and function call does not need to be rewritten at all.

function foo(...args: number[]): void
function foo(x: number, y: number, z: number) {
  console.log(x, y, z);
}
var args: number[] = [0, 1, 2];

foo(...args);

Use @ts-ignore to ignore specific line, TypeScript 2.3

function foo(x: number, y: number, z: number) {
  console.log(x, y, z);
}
var args: number[] = [0, 1, 2];
// @ts-ignore
foo(...args);

Use as any.

function foo(x: number, y: number, z: number) {
  console.log(x, y, z);
}
var args: number[] = [0, 1, 2];

(foo as any)(...args);

Link with documentation regarding the spread operator:

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html

Discussions regarding this:

https://github.com/Microsoft/TypeScript/issues/5296 https://github.com/Microsoft/TypeScript/issues/11780 https://github.com/Microsoft/TypeScript/issues/14981 https://github.com/Microsoft/TypeScript/issues/15375

🌐
GeeksforGeeks
geeksforgeeks.org › typescript › how-to-use-spread-operator-in-typescript
How to use Spread Operator in TypeScript ? - GeeksforGeeks
July 23, 2025 - ... type objType = { name: string, ... ... The spread operator in TypeScript simplifies array and object manipulation by enabling easy copying, combining, and property modification....
🌐
Reddit
reddit.com › r/typescript › spread operator with array and object
r/typescript on Reddit: Spread operator with array and object
April 27, 2022 -

Edit: This seems to be an issue since 2016, and apparently, no fix (yet? since 2016) because it seems like just an edge case.

Hi all, I accidentally mistyped [ with { at line 4 in the code below and it passes compiler check. Should this happen and why does it behave like that?

        type Foo = number // just an example
        
        let t: Foo[] = [] // [1,2,3] 
        let c: Foo[] = {...t}
        console.log(c.map(e=>-e))

It took me a few minutes in a sea of code to realise what's wrong. Needless to say, it was quite frustrating, I'm sorry if this is a stupid question.

playground link

here is my tsconfig.json

        {
          "compilerOptions": {
            "target": "es5",
            "lib": [
              "dom",
              "dom.iterable",
🌐
HowToDoInJava
howtodoinjava.com › home › typescript › typescript / javascript spread operator
TypeScript / JavaScript Spread Operator (with Examples)
July 3, 2023 - The spread operator is used to expand or spread an iterable or an array in Typescript or Javascript. The spread operator (in the form of ellipsis) can be used in two ways: Initializing arrays and objects from another array or object
🌐
Reddit
reddit.com › r/typescript › adding arbitrary attributes to object using spread operator
r/typescript on Reddit: Adding arbitrary attributes to object using spread operator
April 25, 2024 -

Why is it possible to add arbitrary attributes to an object? This should throw a Typescript error in my opinion.

type Params = {
    limit: number;
}

// Does not work
const params: Params = {
    limit: 20,
    q: "john"
}

// Does work
const spreadParams: Params = {
    limit: 20,
    ...({ q: "john" })
};

console.log(spreadParams.q);
// 'john'

https://www.typescriptlang.org/play/?ssl=18&ssc=10&pln=1&pc=1#code/C4TwDgpgBACghgJzgWwM5QLxQN4CgoFQA2AlsicAFxQB2ArsgEYQIDcuAvrrgPQ9QARAPYR0NIcCgB3IQgDWuAMZCaqSWEQpU1eEjSYc+QqXJUoAJgAMAGiMEAjtQBEAKyEALGk87c+gkegy8koqalCoYAgQcAAmulo6mvpYeITEZBTUVrZpAHT5ABTYUI5Qrh5eUBwAlJzsIapCRBC5REIA5gURUbHxaLn21ex+AORuniO4QA

Find elsewhere
🌐
Tim Mousk
timmousk.com › blog › typescript-spread-operator
How To Use The Spread Operator In TypeScript? – Tim Mouskhelichvili
March 27, 2023 - You may have seen a mysterious syntax of three dots when you open a TypeScript file in your day-to-day coding life. This syntax is called the spread operator. The spread operator allows to spread or expand iterable objects into individual elements.
🌐
GitHub
github.com › microsoft › TypeScript › issues › 32689
Spread operator for object types and interfaces · Issue #32689 · microsoft/TypeScript
August 2, 2019 - Provide an operator to be used in both {} types and interface types which inherits a set of properties from another object type whilst also allowing for those properties to be selectively overridden.
Published   Aug 02, 2019
🌐
+return
plusreturn.com › home › blog › tutorial › 6 awesome tricks with the spread and rest operators in typescript and javascript objects
6 Awesome Tricks with the Spread and Rest Operators in Typescript and Javascript Objects | +return
July 26, 2022 - Doing this will only create a reference of our cat object, meaning they are one and the same in memory. Modifying either of them will update the same memory allocation. What if we wanted to modify anotherCat without cat being affected? with the spread operator, we can quickly create a clone of our object!
🌐
Marius Schulz
mariusschulz.com › blog › object-rest-and-spread-in-typescript
Object Rest and Spread in TypeScript — Marius Schulz
July 11, 2019 - Just like Object.assign(), object spread only copies over property values, which might lead to unintended behavior if a value is a reference to another object. Note that none of the code snippets in this post contain any type annotations or other TypeScript-specific constructs.
🌐
Nicotsou
nicotsou.com › tltr-typescript-spread-operator
Master Spread Operator With TypeScript
The spread operator —spoiler alert— can spread the contents of an array or an object.
🌐
Execute Program
executeprogram.com › courses › everyday-typescript › lessons › object-spread
Everyday TypeScript: Object Spread
Learn programming languages like TypeScript, Python, JavaScript, SQL, and regular expressions. Interactive with real code examples.
🌐
Scaler
scaler.com › home › topics › typescript › spread syntax with ts tuples
Spread syntax with TS tuples - Typescript
May 4, 2023 - It is the opposite of rest syntax, ... The spread operator in typescript allows an iterable object like an array or a string to expand in places where 0+ arguments are expected....
🌐
Medium
medium.com › coinmonks › object-rest-and-spread-in-typescript-90d8739705ae
Object Rest and Spread in TypeScript | by Sumit kumar Singh | Coinmonks | Medium
April 18, 2023 - Object rest and spread are features in TypeScript that allow developers to easily manipulate objects in various ways. They are similar to the spread and rest syntax used in arrays, but they are used for objects instead.
🌐
Medium
pandey-sunil1987.medium.com › spread-operator-and-destructing-in-typescript-806bf8e3d5e6
Spread operator and destructing in typescript | by Sunil Pandey | Medium
January 2, 2023 - // Object concatination with common ... Finding maximum value is one example of it. Spread operator helps in defining a method having an unlimited number of arguments....