TypeScript Kickstarter Script
December 29, 2020
Script
#!/bin/bash
mkdir my-project
cd my-project
npm init -y
npm install typescript --save-dev
npm install rimraf --save-dev
./node_modules/typescript/bin/tsc --init \
--outDir "./out" \
--rootDir "./" \
--sourceMap true \
--moduleResolution "node" \
--target "es5"
echo "console.log('hello');" > index.ts
jq '.scripts = { start: "node out/index.js", prestart: "rimraf out && npm run build", build: "./node_modules/typescript/bin/tsc" }' \
package.json > package.json.tmp && mv -f package.json.tmp package.json
Explanation
Most of this is pretty straightforward if you’ve worked on a Nodejs or TypeScript project before. First we’ll use npm init
in the project directory and install some dependencies. I typically use rimraf
for removing old transpiled files because it doesn’t argue with me about permissions, but you could use rm -rf
in your scripts
block as well.
npm init -y
npm install typescript --save-dev
npm install rimraf --save-dev
Next we’ll create tsconfig.json
using the TypeScript compiler (tsc
) we just installed. If you had TypeScript installed globally you could use that as well, but you should watch out for version mismatches. The important thing to note here is that the outDir
(where we want our transpiled JavaScript files to go) is called out
. We’ll reference that directory in our npm scripts commands. The TypeScript compiler allows you to set any values for the tsconfig.json
file you’d like via the command line, which is very handy (and fast).
./node_modules/typescript/bin/tsc --init \
--outDir "./out" \
--rootDir "./" \
--sourceMap true \
--moduleResolution "node" \
--target "es5"
Next we’ll just create a stub index.ts
and populate it with a simple console.log
for now. This index.ts
will be the main entry point for the application.
echo "console.log('hello');" > index.ts
This is where things get interesting. The npm cli does not currently has a way to set the value for the scripts block via npm init
. There are probably multiple ways you could update this, but I chose to use jq
since it is made for reading JSON. So here we are going to replace the entire scripts
block in package.json
with a new scripts
block. We’ll do this by reading the results of the jq
command into a temporary file, then replacing package.json
with the temporary file.
This portion of the script creates the new results. If you ran the command as displayed below it would simply print the results to the console without actually modifying the file.
jq '.scripts = { start: "node out/index.js", prestart: "rimraf out && npm run build", build: "./node_modules/typescript/bin/tsc" }' package.json ...
And this portion takes those results and writes them to the new file.
... > package.json.tmp && mv -f package.json.tmp package.json
The updated scripts block includes basic build, prestart, and start commands. Once you run the entire kickstart script, you should be able to run npm run start
from the root directory and see “hello” logged to the console. Depending on your system, you may need to install jq for this to work.