What is TSNew?
TSNew is a strongly typed templating system to generate feature code.
It makes teams more efficient while enforcing existing project patterns and decisions.
Install the tsnew package (opens in a new tab) as a dev dependency with your preferred package manager:
npm install tsnew --save-dev
Installing as a dev dependency keeps a locked version scoped to your project, and provides the template API to define templates. If each developer installs TSNew globally, then they may run into issues across projects.
npx tsnew CLI to set up a basic template:
┌ 🆕 tsnew start│▲ You don't have any templates.│● Let's create your first one!│◇ What is the name of this template?│ component│◇ Created .tsnew/templates/component│└ 🆕 tsnew endYou can update your new templates here:.tsnew└─┬ templates└── componentAfter that, you can run your template:╭───────────────────────╮│ $ npx tsnew component │╰───────────────────────╯
You can view and run available templates now:
If you don't want to select a template each time, you can also run a template right away:
npx tsnew <name>
For example, you can run
npx tsnew component if you have a
The template API is simple yet powerful. We'll now walk through a more real world example.
Let's say we have the following template files:
It would be tedious to keep prompting for the same input in each template, so the
input is shared across multiple templates via imports. The satisfies keyword (opens in a new tab) is necessary because we want to retain the actual object type of the
input. This way, when you attempt to use
input.name it is known to be a valid string property.
Alright, let's run our
npx tsnew component
For this example, we'll create a
┌ 🆕 tsnew start│◇ What is the name of this component?│ Button│● Created components/Button/README.md│● Created components/Button/Button.tsx│● Created components/Button/Button.test.tsx│└ 🆕 tsnew end
Nice! The following files were created: