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

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

1 possible answer(s) on “Types Identifier does not allow more than 1 string argument, typeAnnotation

  1. 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([])
                        ])
                    )
                )
    
    });