babel-plugin-react-directives icon indicating copy to clipboard operation
babel-plugin-react-directives copied to clipboard

x-for doesn't work with TypeScript

Open Ni55aN opened this issue 6 years ago • 4 comments

As I understand, a TypeScript transformer is needed to solve this problem. Are you planning to create it in the future?

image

Application created with create-react-app --typescript

Config extended with react-app-rewired

const {
    override,
    disableEsLint,
    useBabelRc
  } = require('customize-cra')
  
  module.exports = override(
    disableEsLint(),
    useBabelRc()
  )

.babelrc

{
    "plugins": [
      "react-directives",
      "@babel/transform-react-jsx"
    ]
}

Ni55aN avatar Oct 11 '19 09:10 Ni55aN

@Ni55aN I have reproduced this problem and will try to solve it. It may take some time.

peakchen90 avatar Oct 12 '19 06:10 peakchen90

@Ni55aN I may not be able to do anything for the typescript transformer, and not consider the syntax of typescript at the beginning of development. And for this case, you can declare item before used, like this:

declare let item: any;

It is not recommended to use x-for in typescript now.

There is a difference between Javascript and Typescript in the AST tree. For better support, it may be rewritten for Typescript in the future.

peakchen90 avatar Oct 12 '19 13:10 peakchen90

Has this issue been fixed? Since Typescript is so popular now, it'd be nice if this worked.

martinszeltins avatar Mar 29 '22 16:03 martinszeltins

@martinszeltins Haven't found a proper way to fix it yet, it is recommended not to use x-for in typescript

peakchen90 avatar Mar 30 '22 03:03 peakchen90