# How to Use the Generated TypeScript Code with a Frontend Framework

> Learn to use generated TypeScript code with frontend frameworks. Import factory functions from microsoft/typescript-go and leverage the Emitter API to print syntax trees for seamless integration.

- Repository: [Microsoft/typescript-go](https://github.com/microsoft/typescript-go)
- Tags: how-to-guide
- Published: 2026-04-25

---

**Install the `@typescript/native-preview` package to import factory functions and AST types from the microsoft/typescript-go repository, then use the `Emitter` API to print constructed syntax trees into source strings that any frontend framework can consume.**

The `microsoft/typescript-go` repository provides a code generator that produces TypeScript AST definitions and factory helpers from the [`ast.json`](https://github.com/microsoft/typescript-go/blob/main/ast.json) schema. Because these artifacts ship as the public npm package `@typescript/native-preview`, you can use the generated TypeScript code with a frontend framework just like any other dependency, enabling dynamic code generation that remains fully typed and validator-compliant.

## What the Generator Produces

The code generator located at [`_scripts/generate-ts-ast.ts`](https://github.com/microsoft/typescript-go/blob/main/_scripts/generate-ts-ast.ts) reads the [`ast.json`](https://github.com/microsoft/typescript-go/blob/main/ast.json) schema and outputs plain TypeScript files to `/_packages/native-preview/src/ast/`. The generated codebase consists of three primary modules:

- **[`ast.generated.ts`](https://github.com/microsoft/typescript-go/blob/main/ast.generated.ts)** – Contains complete TypeScript AST **type definitions**, including interfaces for every node type, `SyntaxKind` enums, and utility types.
- **[`factory.generated.ts`](https://github.com/microsoft/typescript-go/blob/main/factory.generated.ts)** – Exports **factory helpers** such as `createVariableStatement`, `createFunctionDeclaration`, and `createIdentifier` for programmatically constructing AST nodes.
- **[`is.generated.ts`](https://github.com/microsoft/typescript-go/blob/main/is.generated.ts)** – Provides **type-guards and predicates** like `isIdentifier` and `isFunctionDeclaration` for runtime node validation.

Because the output is standard TypeScript, you import these modules directly into frontend projects without special loaders or native bindings.

## Installation and Configuration

Add the library to your project using your preferred package manager:

```bash
npm install @typescript/native-preview

```

The package uses ES modules with `module: "nodenext"` and `verbatimModuleSyntax`. Configure your [`tsconfig.json`](https://github.com/microsoft/typescript-go/blob/main/tsconfig.json) to match these requirements:

```jsonc
{
  "compilerOptions": {
    "module": "nodenext",
    "target": "es2022",
    "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "strict": true
  }
}

```

This configuration ensures the TypeScript compiler can resolve subpath exports like `@typescript/native-preview/ast` correctly.

## Creating and Emitting AST Nodes

Import the generated symbols from the `ast` subpath to access both the type definitions and factory functions:

```typescript
import {
  createVariableStatement,
  createVariableDeclarationList,
  createVariableDeclaration,
  createIdentifier,
  SyntaxKind,
} from "@typescript/native-preview/ast";
import { projectFromFiles } from "@typescript/native-preview";

```

Construct AST nodes using the factory helpers. For example, to build a variable declaration:

```typescript
const decl = createVariableDeclaration(
  createIdentifier("counter"),
  undefined,
  undefined,
  undefined
);

const stmt = createVariableStatement(
  undefined,
  createVariableDeclarationList([decl], /* flags */ 0)
);

```

Convert the AST back to source code by creating an in-memory project and invoking the emitter, as demonstrated in [`/_packages/native-preview/test/sync/api.test.ts`](https://github.com/microsoft/typescript-go/blob/main//_packages/native-preview/test/sync/api.test.ts):

```typescript
const project = await projectFromFiles({
  "/src/generated.ts": ""
});

const sourceFile = project.getSourceFile("/src/generated.ts")!;
sourceFile.statements = [stmt];

const printed = project.emitter.printNode(sourceFile);
console.log(printed);
// → "let counter;"

```

The `printNode` method returns a standard JavaScript string that you can pass to framework compilers, dynamic `eval` contexts, or code sandbox runners.

## Frontend Integration Example

You can integrate the emitter output directly into a React application to generate components dynamically. The following example constructs a function declaration programmatically and prints it to a string:

```tsx
import React from "react";
import {
  createFunctionDeclaration,
  createParameterDeclaration,
  createBlock,
  createExpressionStatement,
  createCallExpression,
  createIdentifier,
} from "@typescript/native-preview/ast";
import { projectFromFiles } from "@typescript/native-preview";

async function generateReactComponent() {
  // Build parameters: props
  const param = createParameterDeclaration(
    undefined,
    undefined,
    createIdentifier("props"),
    undefined,
    undefined,
    undefined
  );

  // Build JSX expression: React.createElement("div", undefined, "Hello, " + props.name)
  const jsx = createCallExpression(
    createIdentifier("React.createElement"),
    undefined,
    [
      createIdentifier(`"div"`),
      undefined,
      createIdentifier(`"Hello, " + props.name`),
    ]
  );

  // Build function body and declaration
  const body = createBlock([createExpressionStatement(jsx)], true, true);
  const fn = createFunctionDeclaration(
    undefined,
    undefined,
    undefined,
    createIdentifier("Greeting"),
    [param],
    body,
    undefined,
    SyntaxKind.Unknown
  );

  // Emit to source string
  const project = await projectFromFiles({ "/src/dynamic.tsx": "" });
  const sourceFile = project.getSourceFile("/src/dynamic.tsx")!;
  sourceFile.statements = [fn];
  const source = project.emitter.printNode(sourceFile);

  console.log(source);
  // Output:
  // function Greeting(props) {
  //   return React.createElement("div", undefined, "Hello, " + props.name);
  // }
}

```

In production builds, feed the emitted string through your standard TypeScript or Babel pipeline (e.g., `ts-loader` in Webpack) to enable type checking and source maps for the generated code.

## Summary

- The microsoft/typescript-go repository publishes generated AST types and factories to the npm package `@typescript/native-preview`.
- Import factory functions from `@typescript/native-preview/ast` to build AST nodes programmatically without string concatenation.
- Use `projectFromFiles` to create an in-memory project, then call `project.emitter.printNode()` to serialize AST nodes into executable JavaScript or TypeScript source code.
- The resulting strings integrate with any frontend framework by passing them to dynamic component compilers or build pipelines.

## Frequently Asked Questions

### What npm package contains the generated TypeScript code?

The package is named **`@typescript/native-preview`**. It contains the same files produced by the generator script [`_scripts/generate-ts-ast.ts`](https://github.com/microsoft/typescript-go/blob/main/_scripts/generate-ts-ast.ts), including [`ast.generated.ts`](https://github.com/microsoft/typescript-go/blob/main/ast.generated.ts) and [`factory.generated.ts`](https://github.com/microsoft/typescript-go/blob/main/factory.generated.ts).

### Which module resolution strategy is required for @typescript/native-preview?

You must use **`"module": "nodenext"`** and **`"moduleResolution": "nodenext"`** in your [`tsconfig.json`](https://github.com/microsoft/typescript-go/blob/main/tsconfig.json). The package relies on ES module subpath exports (e.g., `@typescript/native-preview/ast`) that require Node.js-style resolution.

### How do I convert AST nodes back to source code strings?

Create a project using **`projectFromFiles()`**, retrieve the source file handle, assign your AST nodes to `sourceFile.statements`, then call **`project.emitter.printNode(sourceFile)`**. This pattern is validated extensively in [`/_packages/native-preview/test/sync/api.test.ts`](https://github.com/microsoft/typescript-go/blob/main//_packages/native-preview/test/sync/api.test.ts).

### Can I use this package with React or Vue for dynamic component generation?

Yes. The factory functions allow you to construct function declarations, JSX elements, and component bodies programmatically. After printing the AST to a string with the emitter, you can feed the output into React's `React.createElement` or compile it with Babel/TypeScript for use in Vue render functions.