.gitignore

/node_modules/
/package-lock.json

dirs.tsx

import * as typedJSX from 'typed-jsx'
const { data } = typedJSX
 
enum FileType {
  File = 'file',
  Directory = 'directory',
  SymbolicLink = 'symlink',
}
 
interface Directory {
  type: FileType.Directory;
  name: string;
  children: Array<File | Directory | SymbolicLink>;
}
const Directory = (props: Omit<Directory, 'type'>) => ({ type: FileType.Directory, ...props });
 
interface File {
  type: FileType.File;
  name: string;
  data: Buffer | string;
}
const File = (props: Omit<File, 'type'>) => ({ type: FileType.File, ...props });
 
interface SymbolicLink {
  type: FileType.SymbolicLink;
  name: string;
  target: string;
}
const SymbolicLink = (props: Omit<SymbolicLink, 'type'>) => ({ type: FileType.SymbolicLink, ...props });
 
const files = (
  <Directory name="root">
    <Directory name="sub">
      <File name="file1" data="..." />
    </Directory>
    <Directory name="sub2">
      <File name="file2" data="..." />
      <SymbolicLink name="file3" target="../sub/file1" />
    </Directory>
  </Directory>
);
 
console.log(JSON.stringify(files, undefined, 2));

package.json

{
  "name": "typed-jsx-test",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "dirs.js",
  "scripts": {
    "build": "tsc"
  },
  "author": "flying-sheep",
  "license": "GPL-3.0",
  "dependencies": {
    "typed-jsx": "^0.1.1"
  },
  "devDependencies": {
    "@types/node": "^14.6.2",
    "typescript": "^4.0.2"
  }
}

tsconfig.json

{
	"compilerOptions": {
		"target": "ES2019",
		"moduleResolution": "node",
		"lib": ["ES2019", "DOM"],
		"jsx": "react",
		"jsxFactory": "data",
		"strict": true,
	},
	"include": [
		"*.tsx"
	]
}