No Time Dad

A blog about web development written by a busy dad

TypeScript Kickstarter Script

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.