Types Identifier does not allow more than 1 string argument, typeAnnotation

[Seanmclem]

Hi, I am trying to create a set of TSX code with babel and babel-types. When I get to my variableDeclarator -I need to add a type to it. in this case React.FC<{}>, I am to pass my variableDeclarator an Identifier. Which would typically just be a string name of the variable.. However, since I'm using typescript -I can see in AST-Explorer that the React.FC<{}> I want to add is technically on the variableDeclarators first argument, the Identifier.

In AST Tools, the Identifier has a property TypeAnnotation. But my editor insists Identifier only takes 1 arg, a name/string.
So I dug into it's types, node_modules/@babel/types/lib/index.d.ts, and I found that it indeed should maybe take more args?

export interface Identifier extends BaseNode {
  type: "Identifier";
  name: string;
  decorators: Array<Decorator> | null;
  optional: boolean | null;
  typeAnnotation: TypeAnnotation | TSTypeAnnotation | Noop | null;
}

It looks like it should maybe take up to 4.. However, elsewhere in the types file, I do see what my editor sees -which is

export function identifier(name: string): Identifier;

So I tried updating that line with the missing args, and that solved VSCode's intellisense complaints.. Ended up with something like this..

   types.variableDeclarator( 
        types.identifier(
            "AstTools",
            null,
            null,
            types.typeAnnotation(
                types.genericTypeAnnotation(
                    types.qualifiedTypeIdentifier(
                        types.identifier("FC"),
                        types.identifier("React")
                    ),
                    types.typeParameterInstantiation([
                        types.objectTypeAnnotation([])
                    ])
                )
            )
        ),
        // ...
    )

but when I run the code I still get an error - Identifier: Too many arguments passed. Received 4 but can receive no more than 1

Is there something off with the compiler? Or am I missing something that would resolve all this?

Config

import { BabelFileResult, NodePath, transform } from '@babel/core'
import tsPlugin from "@babel/plugin-syntax-typescript"

    return transform(code, {
        ast: true,
        babelrc: false,
        plugins: [
            [
                tsPlugin,
                {
                    "isTSX": true,
                    allExtensions: true,
                }
            ]
        ],
        filename: "example.tsx"
    });

Expected Result
babel [types] should have a way to pass a typeAnnotation to an Identifier, or a working alternative

• "@babel/core": "^7.12.13",
• "@babel/plugin-syntax-typescript": "^7.12.13",
• Node/npm version: node v14.15.3 / npm 6.14.11
• OS: MacOS 11.2, M1

[babel-bot]

Hey @Seanmclem! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[nicolo-ribaudo]

The AST builder functions only take the most common AST properties as parameters. Specifically, all the builders for JavaScript nodes don't accept any Flow or TS property as parameter.

You can do something like

Object.assign(types.identifier("AstTools"), {
  typeAnnotation: types.typeAnnotation(
                types.genericTypeAnnotation(
                    types.qualifiedTypeIdentifier(
                        types.identifier("FC"),
                        types.identifier("React")
                    ),
                    types.typeParameterInstantiation([
                        types.objectTypeAnnotation([])
                    ])
                )
            )

});

[Seanmclem]

Thanks @nicolo-ribaudo @JLHwung , that worked! I feel like I didn't really get any of that info in https://babeljs.io/docs/en/babel-types#identifier .. the docs are kinda sparse at times and leave a lot to the imagination. But it works now. thanks again