Typescript throwing errors for spread operators

Question

I'm using typescript in react and following file is throwing a lot of errors, I'm not sure why (its working as js), but I suspect something here is to do with spread operators?

import React from 'react'
import { Subscribe } from 'unstated'

const getStoreAsProps = (storeArr) => {
  const storeProps = {}
  storeArr.map((value) => (storeProps[value.name] = value))
  return storeProps
}

const withStore = (...args) => (Element) => () => (
  <Subscribe to={[...args]}>{(...args) => <Element {...getStoreAsProps(args)} />}</Subscribe>
)

export default withStore

Errors thrown by tsc are

workspace/app/store/index.ts:11:14 - error TS1005: '>' expected.

11 {(...args) => } ~~

workspace/app/store/index.ts:11:16 - error TS1005: ')' expected.

11 {(...args) => } ~

workspace/app/store/index.ts:11:19 - error TS1109: Expression expected.

11 {(...args) => } ~~~

workspace/app/store/index.ts:11:26 - error TS1005: ',' expected.

11 {(...args) => } ~

workspace/app/store/index.ts:11:30 - error TS1136: Property assignment expected.

11 {(...args) => } ~

workspace/app/store/index.ts:11:40 - error TS1005: ';' expected.

11 {(...args) => } ~~

workspace/app/store/index.ts:11:52 - error TS1005: '>' expected.

11 {(...args) => } ~

workspace/app/store/index.ts:11:80 - error TS1109: Expression expected.

11 {(...args) => } ~

workspace/app/store/index.ts:11:81 - error TS1109: Expression expected.

11 {(...args) => } ~

workspace/app/store/index.ts:11:83 - error TS1110: Type expected.

11 {(...args) => } ~

workspace/app/store/index.ts:11:84 - error TS1161: Unterminated regular expression literal.

11 {(...args) => }

workspace/app/store/index.ts:12:1 - error TS1128: Declaration or statement expected.

12 ) ~

If it helps, syntax highlighting is breaking there as well

Try import * as React from "react";

cartant
– cartant

2018-07-22 10:52:02 +00:00
Commented Jul 22, 2018 at 10:52 — cartant
– cartant, Commented Jul 22, 2018 at 10:52

Estus Flask · Accepted Answer · 2018-07-22 11:01:50Z

3

The errors imply that JSX syntax wasn't recognized by the compiler. In order for it to be recognized, the file should have .tsx extension, while it currently has .ts extension.

jsx compiler option should also be enabled and set to react.

answered Jul 22, 2018 at 11:01

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

Comments

Readone Mohamed · Accepted Answer · 2018-10-23 15:23:54Z

1

I have the same issue: let temp: any = ...props.data.map((row:any) => {return row.json});

React is already imported like above:

import * as React from "react";

Also tsx option is set to react in tsconfig

And now I answer my own problem:

Ofc if you are working on an object you need to use Object.assign()

let temp: any =  Object.assign({}, props.data.map((row:any) => {return row.json}));

edited Oct 23, 2018 at 15:23

answered Oct 23, 2018 at 15:17

Readone Mohamed

335 bronze badges

Collectives™ on Stack Overflow

Typescript throwing errors for spread operators

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