https://github.com/styleguidist/react-docgen-typescript
react-docgen-typescript를 사용하여 파일을 parse 하면 다음과 같은 객체의 배열을 얻을 수 있다.
{
tags: {};
filePath: "/Users/jerrynim/Desktop/components/index.ts";
description: "";
displayName: "Component";
methods: [];
props: {
description: "",
name: "",
parent: {
fileName: "",
name: "",
},
declarations: [[Object]],
required: false,
type: { name: "boolean" },
}[];
}
궁극적으로 다음과 같은 형태의 객체를 구하려고 하는데
"Text": {
"size": { "type": "number", "defaultValue": 11 },
이를 위해 간단한 코드를 작성합니다
const propTypes = parse(path.resolve(__dirname, "./components/index.ts"))
const props = {}
const getTypefromProps = (props) => {
const newProps = {}
Object.keys(props).forEach((key) => {
newProps[props[key].name] = { type: props[key].type.name, defaultValue: props[key].defaultValue }
})
return newProps
}
propTypes.forEach((propType) => {
Object.assign(props, {
[propType.displayName]: getTypefromProps(propType.props),
})
})
이때 기본 react의 타입또한 포함되므로 필터링을 해주도록 합니다.
if (!(props[key].parent?.fileName ?? "").includes("node_modules/react")) {
