Registry /
testing / typescript-to-proptypes
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
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.
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
})
}
*/
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'kind')
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.
fixEnsure 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
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.
fixVerify 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.
Audit
Dependencies
prop-typesrequiredRequired for generating valid React PropTypes expressions.
typescriptrequiredCore dependency for parsing TypeScript declarations using the TypeScript Compiler API.
@babel/typesrequiredUsed for constructing Babel AST nodes representing PropTypes definitions.
@babel/traverserequiredUsed for navigating and manipulating Babel AST during PropTypes generation.
@babel/generatorrequiredUsed to convert the generated Babel AST back into JavaScript code.