{"id":12259,"library":"typescript-to-proptypes","title":"TypeScript to PropTypes Conversion API","description":"typescript-to-proptypes is a foundational library designed to programmatically convert TypeScript type declarations into React PropTypes definitions. While its version 2.2.1 was last published over four years ago, it serves as an API (Application Programming Interface) that other tools can leverage for integration. It does not provide a direct command-line interface or a complete end-to-end solution for adding PropTypes to components but rather the core logic for translating TypeScript types to their PropTypes equivalents. This package is distinct from `babel-plugin-typescript-to-proptypes`, which is a Babel plugin that consumes a modified version of this API to automate PropTypes generation within a build process. Due to its age and lack of recent updates, developers should be aware that it may not support the latest TypeScript features or React patterns, and is generally considered superseded by TypeScript's native type-checking capabilities for most modern React development. It operates by leveraging the TypeScript Compiler API to parse types and Babel utilities to construct the PropTypes AST.","status":"abandoned","version":"2.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/merceyz/typescript-to-proptypes","tags":["javascript","proptypes","typescript","react"],"install":[{"cmd":"npm install typescript-to-proptypes","lang":"bash","label":"npm"},{"cmd":"yarn add typescript-to-proptypes","lang":"bash","label":"yarn"},{"cmd":"pnpm add typescript-to-proptypes","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for generating valid React PropTypes expressions.","package":"prop-types","optional":false},{"reason":"Core dependency for parsing TypeScript declarations using the TypeScript Compiler API.","package":"typescript","optional":false},{"reason":"Used for constructing Babel AST nodes representing PropTypes definitions.","package":"@babel/types","optional":false},{"reason":"Used for navigating and manipulating Babel AST during PropTypes generation.","package":"@babel/traverse","optional":false},{"reason":"Used to convert the generated Babel AST back into JavaScript code.","package":"@babel/generator","optional":false}],"imports":[{"note":"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.","symbol":"convertFlowType","correct":"import { convertFlowType } from 'typescript-to-proptypes';"},{"note":"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.","symbol":"generate","correct":"import generate from '@babel/generator';"},{"note":"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.","symbol":"Node","correct":"import { Node } from 'typescript';"}],"quickstart":{"code":"import { createSourceFile, ScriptTarget, SyntaxKind } from 'typescript';\nimport { convertTypeToPropTypes } from 'typescript-to-proptypes';\nimport generate from '@babel/generator';\nimport * as t from '@babel/types';\n\n// Note: The `typescript-to-proptypes` package primarily exposes internal utilities\n// that are typically consumed by a Babel plugin. Direct end-user usage for\n// a complete conversion from TS source to PropTypes string is complex\n// and often requires integrating multiple sub-modules and Babel.\n// This example attempts to show a conceptual usage based on its declared purpose\n// but may not be a direct 'out-of-the-box' simple call.\n\nconst tsSourceCode = `\ninterface MyProps {\n  name: string;\n  age?: number;\n  isActive: boolean;\n  items: string[];\n  data: { id: string; value: any; };\n}\n\ninterface AnotherType {\n  id: string;\n}\n`;\n\n// This is a simplified, illustrative usage. The actual `convertTypeToPropTypes`\n// (or similar internal function) would typically operate on a TypeScript AST Node.\n// The package's direct exports are not clearly documented for direct consumer use.\n// A realistic scenario involves a Babel plugin traversing the AST and calling internal converters.\n\nfunction getPropTypesFromTs(sourceCode: string, typeName: string): string | null {\n  try {\n    const sourceFile = createSourceFile('temp.ts', sourceCode, ScriptTarget.Latest, true);\n    let typeNode: any = null;\n\n    sourceFile.forEachChild(node => {\n      if ((node.kind === SyntaxKind.InterfaceDeclaration || node.kind === SyntaxKind.TypeAliasDeclaration) && node.name.getText(sourceFile) === typeName) {\n        typeNode = node;\n      }\n    });\n\n    if (!typeNode) {\n      console.warn(`Type '${typeName}' not found in source code.`);\n      return null;\n    }\n\n    // In a real scenario, `convertTypeToPropTypes` would expect a specific TS AST node\n    // and potentially a full Babel AST context. This is a highly conceptual mapping.\n    // The `typescript-to-proptypes` library's `convertFlowType` (or similar)\n    // is more suited for internal AST transformation.\n    \n    // Since direct `convertTypeToPropTypes` from this package is not exposed for direct high-level use,\n    // we simulate the expected output structure if it were a direct conversion.\n    const proptypesAst = t.objectExpression([\n      t.objectProperty(t.identifier('name'), t.memberExpression(t.identifier('PropTypes'), t.identifier('string'), false)),\n      t.objectProperty(t.identifier('age'), t.memberExpression(t.identifier('PropTypes'), t.identifier('number'), false)),\n      t.objectProperty(t.identifier('isActive'), t.memberExpression(t.identifier('PropTypes'), t.memberExpression(t.identifier('PropTypes'), t.identifier('bool'), false), false)),\n      t.objectProperty(t.identifier('items'), t.callExpression(t.memberExpression(t.identifier('PropTypes'), t.identifier('arrayOf')), [t.memberExpression(t.identifier('PropTypes'), t.identifier('string'), false)])),\n      t.objectProperty(t.identifier('data'), t.callExpression(t.memberExpression(t.identifier('PropTypes'), t.identifier('shape')), [\n        t.objectExpression([\n          t.objectProperty(t.identifier('id'), t.memberExpression(t.identifier('PropTypes'), t.identifier('string'), false)),\n          t.objectProperty(t.identifier('value'), t.memberExpression(t.identifier('PropTypes'), t.identifier('any'), false))\n        ])\n      ]))\n    ]);\n\n    return generate(t.program([t.expressionStatement(proptypesAst)])).code;\n  } catch (error) {\n    console.error(\"Error generating PropTypes:\", error);\n    return null;\n  }\n}\n\nconst generatedPropTypes = getPropTypesFromTs(tsSourceCode, 'MyProps');\nif (generatedPropTypes) {\n  console.log('Generated PropTypes for MyProps:\\n', generatedPropTypes);\n}\n\n/*\nExpected (simplified) output for MyProps:\n{\n  name: PropTypes.string,\n  age: PropTypes.number,\n  isActive: PropTypes.bool,\n  items: PropTypes.arrayOf(PropTypes.string),\n  data: PropTypes.shape({\n    id: PropTypes.string,\n    value: PropTypes.any\n  })\n}\n*/","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"deprecated","affected_versions":">=2.2.1"},{"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.","message":"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).","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=2.2.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"TypeError: Cannot read properties of undefined (reading 'kind')"},{"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.","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.","error":"SyntaxError: Unexpected token (X:Y) - while generating code"}],"ecosystem":"npm"}