Add TypeScript support

[adambrgmn]

Hi,
First, thanks for a great tool! This together with Ink has made writing cli-tools a joy!

But I was wondering if you would be interested in a PR to enable Typescript-files as entrypoints for commands.

I've noticed that parcel is used to bundle the scripts and parcel has built in support for TS. And today I can use TS-files if they're imported deeper in the tree.

I did some fiddling and found a way to at least get started.

I just changed a few lines in lib/read-commands.js:

const readCommands = async (dirPath, buildDirPath) => {
	const paths = fs.readdirSync(dirPath);
	const commands = [];

	const promises = paths.map(async path => {
		// Since `readdir` returns relative paths, we need to transform them to absolute paths
		const fullPath = join(dirPath, path);
		const stats = await stat(fullPath);

		if (stats.isDirectory()) {
			const subCommands = await readCommands(fullPath, join(buildDirPath, path));
			const indexCommand = subCommands.find(isIndexCommand);

			commands.push({
				...indexCommand,
				name: path,
				subCommands: subCommands.filter(command => !isIndexCommand(command))
			});
		}

		if (stats.isFile()) {
			const {description, args} = await parseCommand(fullPath);

			commands.push({
				path: fullPath,
				// -------CHANGES BELOW-------
				buildPath: join(buildDirPath, path.replace('.tsx', '.js')), // This should probably be a more safe regular expression based replace
				name: basename(basename(fullPath, '.js'), '.tsx'),
				// -------CHANGES ABOVE-------
				description,
				args,
				subCommands: []
			});
		}
	});

	await Promise.all(promises);

	return commands;
};

This change deals with the first problem. Now at least both .js- and .tsx-files gets parsed.

But this solutions gives another problem, of course 🤔. If the entrypoint includes interfaces or other typescript features lib/parse-command.js wont be able to parse the file. I would need to dive into the world of Babel in order to see if it's enough to add @babel/plugin-transform-typescript to make it work, or if a separate typescript based parser is needed.

What do you think? Tell me if you would like me to try it out and see if I could get something working. If you're not interested, thats fine since I can use Typescript deeper in the tree!

[vadimdemedes]

I would definitely love to see TypeScript support! I had it on the roadmap myself, but please feel free to try implementing it :)

But this solutions gives another problem, of course 🤔. If the entrypoint includes interfaces or other typescript features lib/parse-command.js wont be able to parse the file.

Yeah lib/parse-command.js would need to be modified to parse TS correctly. Would be even more amazing if it parsed TS types, not just propTypes :) For example:

import * as React from 'react';

const Count: React.FunctionComponent<{
  count: number;
}> = (props) => {
  return <h1>{props.count}</h1>;
};

export default Count;

First, thanks for a great tool! This together with Ink has made writing cli-tools a joy!

❤️

[adambrgmn]

Thanks for the response! I'll try to dig into it sometime soon 😀

[sindresorhus]

Yeah lib/parse-command.js would need to be modified to parse TS correctly.

Shouldn't be difficult. Babel supports TypeScript.

Would be even more amazing if it parsed TS types, not just propTypes :)

That's a must! propTypes only exist because of lack of static types in JS.

[ChibiBlasphem]

Hello @vadimdemedes
Could you publish a new version with the support of typescript ?

[davej]

@vadimdemedes, sorry to bump this again. Would be great to get TS support published.

[msabramo]

Also looking for TS support

[msabramo]

For others looking for a workaround, I'm doing this in my package.json until @vadimdemedes releases a new official version:

...
  "devDependencies": {
...
    "pastel": "https://github.com/vadimdemedes/pastel/archive/20d9f4384960f6cacce089cf3d114041a7b1e14a.tar.gz",
...

[ChibiBlasphem]

Well this repo has not received any udpate for 1 year. I think it's pretty much dead with PRs and issues stacking

[vadimdemedes]

I just shipped Pastel 2.0 which supports both TypeScript and JavaScript-based projects 👍 Excuse me for the long wait, everyone.

[adambrgmn]

Awesome job! It looks really great @vadimdemedes! 👏 👏 👏

[vadimdemedes]

Thanks @adambrgmn 💛