TypeScript to PropTypes Conversion API

Common errors

• TypeError: Cannot read properties of undefined (reading 'kind')

  cause This error often occurs when the internal TypeScript AST processing expects a certain node structure that is not found, possibly due to unsupported TypeScript syntax or an incorrect AST traversal path.
  fix Ensure the TypeScript code being processed is valid and relatively simple. Complex or newer TypeScript features might not be handled. Debug the internal AST traversal logic if extending the library.

• SyntaxError: Unexpected token (X:Y) - while generating code

  cause If you're using `@babel/generator` directly with an incorrectly formed Babel AST provided by the conversion process, it can lead to syntax errors during code generation.
  fix Verify the structure of the Babel AST being passed to `@babel/generator`. The conversion logic from TypeScript to Babel AST for PropTypes might be producing an invalid structure.

Warnings

• deprecated The `typescript-to-proptypes` package has not seen significant updates since August 2021, and its last major release (v2.2.1) was over four years ago. This indicates it is largely unmaintained and may not support newer TypeScript features or syntax.
  Fix: For new projects or existing projects looking for robust type checking, consider using TypeScript itself as the primary source of truth for component props, often eliminating the need for runtime PropTypes. For libraries, consider generating type declarations (`.d.ts` files) directly from TypeScript.
• gotcha This package is an API, not a direct end-user tool. It provides underlying conversion logic but does not offer a simple command-line interface or a single high-level function for converting a full TypeScript file to PropTypes without additional tooling integration (e.g., Babel plugins).
  Fix: If you need automated PropTypes generation, consider using `babel-plugin-typescript-to-proptypes` (by `milesj`), which is a Babel plugin built on similar principles and provides an integrated solution for React projects.
• breaking TypeScript has evolved significantly since this package's last update. It is highly probable that complex or modern TypeScript features (e.g., template literal types, conditional types, recursive types, certain utility types) are not correctly or fully converted to PropTypes by this library.
  Fix: Manually review generated PropTypes for correctness, especially with complex TypeScript types. Prioritize TypeScript's compile-time checks over potentially incomplete runtime PropTypes from this tool.
• gotcha The default behavior of PropTypes (runtime validation) and TypeScript (compile-time validation) are fundamentally different. While PropTypes provides runtime checks beneficial for dynamically loaded data or non-TypeScript consumers, TypeScript offers superior developer experience and static analysis.
  Fix: Evaluate whether runtime PropTypes are truly necessary. In many TypeScript-first projects, PropTypes can be omitted entirely, relying on TypeScript for type safety. If runtime validation is critical, consider modern runtime validation libraries like Zod or Yup, which can infer types from schemas.

Install

• npm install typescript-to-proptypes npm
• yarn add typescript-to-proptypes yarn
• pnpm add typescript-to-proptypes pnpm

Imports

• convertFlowType

  import { convertFlowType } from 'typescript-to-proptypes';

  This function is an internal conversion utility, often used by higher-level tools. The exact entry point for direct API usage might vary or be less straightforward than a simple named export for end-to-end conversion.
• generate

  import generate from '@babel/generator';

  This package relies on `@babel/generator` (which it lists as a dependency) to convert the resulting Babel AST into a string. You'll need to import `generate` from Babel directly if you're working with the AST output.
• Node

  import { Node } from 'typescript';

  As this library uses the TypeScript Compiler API internally, if you are building a wrapper around it, you might be dealing with TypeScript AST `Node` objects.

Quickstart

Demonstrates the conceptual usage of `typescript-to-proptypes` to convert a TypeScript interface into a PropTypes object. This example manually constructs the expected Babel AST for PropTypes, as the direct high-level API for end-to-end string conversion isn't clearly exposed for direct consumption.

import { createSourceFile, ScriptTarget, SyntaxKind } from 'typescript';
import { convertTypeToPropTypes } from 'typescript-to-proptypes';
import generate from '@babel/generator';
import * as t from '@babel/types';

// Note: The `typescript-to-proptypes` package primarily exposes internal utilities
// that are typically consumed by a Babel plugin. Direct end-user usage for
// a complete conversion from TS source to PropTypes string is complex
// and often requires integrating multiple sub-modules and Babel.
// This example attempts to show a conceptual usage based on its declared purpose
// but may not be a direct 'out-of-the-box' simple call.

const tsSourceCode = `
interface MyProps {
  name: string;
  age?: number;
  isActive: boolean;
  items: string[];
  data: { id: string; value: any; };
}

interface AnotherType {
  id: string;
}
`;

// This is a simplified, illustrative usage. The actual `convertTypeToPropTypes`
// (or similar internal function) would typically operate on a TypeScript AST Node.
// The package's direct exports are not clearly documented for direct consumer use.
// A realistic scenario involves a Babel plugin traversing the AST and calling internal converters.

function getPropTypesFromTs(sourceCode: string, typeName: string): string | null {
  try {
    const sourceFile = createSourceFile('temp.ts', sourceCode, ScriptTarget.Latest, true);
    let typeNode: any = null;

    sourceFile.forEachChild(node => {
      if ((node.kind === SyntaxKind.InterfaceDeclaration || node.kind === SyntaxKind.TypeAliasDeclaration) && node.name.getText(sourceFile) === typeName) {
        typeNode = node;
      }
    });

    if (!typeNode) {
      console.warn(`Type '${typeName}' not found in source code.`);
      return null;
    }

    // In a real scenario, `convertTypeToPropTypes` would expect a specific TS AST node
    // and potentially a full Babel AST context. This is a highly conceptual mapping.
    // The `typescript-to-proptypes` library's `convertFlowType` (or similar)
    // is more suited for internal AST transformation.
    
    // Since direct `convertTypeToPropTypes` from this package is not exposed for direct high-level use,
    // we simulate the expected output structure if it were a direct conversion.
    const proptypesAst = t.objectExpression([
      t.objectProperty(t.identifier('name'), t.memberExpression(t.identifier('PropTypes'), t.identifier('string'), false)),
      t.objectProperty(t.identifier('age'), t.memberExpression(t.identifier('PropTypes'), t.identifier('number'), false)),
      t.objectProperty(t.identifier('isActive'), t.memberExpression(t.identifier('PropTypes'), t.memberExpression(t.identifier('PropTypes'), t.identifier('bool'), false), false)),
      t.objectProperty(t.identifier('items'), t.callExpression(t.memberExpression(t.identifier('PropTypes'), t.identifier('arrayOf')), [t.memberExpression(t.identifier('PropTypes'), t.identifier('string'), false)])),
      t.objectProperty(t.identifier('data'), t.callExpression(t.memberExpression(t.identifier('PropTypes'), t.identifier('shape')), [
        t.objectExpression([
          t.objectProperty(t.identifier('id'), t.memberExpression(t.identifier('PropTypes'), t.identifier('string'), false)),
          t.objectProperty(t.identifier('value'), t.memberExpression(t.identifier('PropTypes'), t.identifier('any'), false))
        ])
      ]))
    ]);

    return generate(t.program([t.expressionStatement(proptypesAst)])).code;
  } catch (error) {
    console.error("Error generating PropTypes:", error);
    return null;
  }
}

const generatedPropTypes = getPropTypesFromTs(tsSourceCode, 'MyProps');
if (generatedPropTypes) {
  console.log('Generated PropTypes for MyProps:\n', generatedPropTypes);
}

/*
Expected (simplified) output for MyProps:
{
  name: PropTypes.string,
  age: PropTypes.number,
  isActive: PropTypes.bool,
  items: PropTypes.arrayOf(PropTypes.string),
  data: PropTypes.shape({
    id: PropTypes.string,
    value: PropTypes.any
  })
}
*/