Setup
The following instructions will get you up and running with TypeScript so you can try out the examples presented in this tutorial.
Installing the TypeScript compiler
The TypeScript compiler is responsible for converting TypeScript code into JavaScript that can be understood by browsers (or Node.js® on the server).
Installing the command line compiler is as easy as running the following npm
command in your terminal:
npm install -g typescript
TypeScript in the editor
Unless you’re using Visual Studio Code or alm (which were both written in TypeScript), you’re going to need a syntax highlighting add-on for your code editor, since most editors don’t recognize TypeScript natively (yet).
Here are some syntax highlighting add-ons for some popular editors:
TypeScript playground 🏸
Using a live scratchpad that runs your code immediately as you type and displays the execution results, can be extremely helpful when learning TypeScript. Here are a few options:
Official TypeScript playground (in the browser)
Quokka.js (recommended, in select editors)
tsconfig.json
tsconfig.json
The presence of a tsconfig.json
file in a directory indicates that the directory is the root of a TypeScript project. Its purpose is to specify the compiler options and files required by the project.
For example:
{
"compilerOptions": {
"target": "es2016",
"module": "esnext",
"moduleResolution": "node",
"strictNullChecks": true,
"noImplicitAny": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"noEmit": true
},
"include": [
"./config/typescript/**/*",
"./app/**/*",
"./client/**/*",
"./server/**/*",
"./packages/**/*",
"./tests/**/*"
],
"exclude": [
"./node_modules/**/*",
"./packages/@shopify/*/node_modules/**/*"
]
}
Details
If the
"compilerOptions"
property is omitted, the compiler’s defaults are used. See the full list of supported compiler options here.The
"include"
and"exclude"
properties take a list of glob-like file patterns.
Read more about tsconfig.json in the official TypeScript docs.
Last updated