peakchen90 / babel-plugin-react-directives

A babel plugin that provides some directives for react(JSX), similar to directives of vue.
https://peakchen90.github.io/babel-plugin-react-directives
MIT License
96 stars 13 forks source link

x-for doesn't work with TypeScript #1

Open Ni55aN opened 4 years ago

Ni55aN commented 4 years ago

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"
    ]
}
peakchen90 commented 4 years ago

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

peakchen90 commented 4 years ago

@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.

martinszeltins commented 2 years ago

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

peakchen90 commented 2 years ago

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