4 Easy Ways to Start Playing with TypeScript

Whether you're working on the back end in Node.js or on the front end with React, learning TypeScript is the number one thing you can do to level up your ability to produce solid code.

(Okay, well maybe that and learning how to apply automated testing effectively... but we're here to talk about TypeScript).

But what about the mountain of build tooling? It's so complicated. "I don't want to learn webpack and gulp and npm and babel and and and..." you say.

I Just Want to TypeScript!

I understand completely. You want to start experimenting with TypeScript without having all the baggage. Undoubtedly, learning is easiest when there is no friction.

Here are some easy ways to get your toes wet with TypeScript before you dive in completely.

1. TypeScript Playground

The TypeScript Playground allows you to write TypeScript on the left and then it shows you the compiled JavaScript output on the right.

It also has a drop down with some prepopulated code snippets so you can see some TypeScript in action without having to know how to write any of it yet.

This is a great place to experiment!

Use when

• you have zero experience
• you want to try a feature quickly
• you want to see how TypeScript compiles down to JavaScript

2. JSFiddle / CodePen

JSFiddle w/ TypeScript is a step up from the TypeScript Playground. Here, you can enter HTML, CSS, and TypeScript and see the output in a fourth window. But it doesn't show you the generated JavaScript.

CodePen is a popular alternative to JSFiddle. You can enable TypeScript on CodePen under Settings > JavaScript preprocessor.

JSFiddle and CodePen both make adding third-party libraries easy.

Use when

• you have at least some web experience
• you're using TypeScript for front-end development
• you want to experiment with a third-party library quickly
• you want to be able to save your experiments

3. ts-node REPL

ts-node is a NodeJS module that takes care of translating your TypeScript into JavaScript on the fly to run in NodeJS. You can use it in REPL mode or pass files to it from a command line.

However, this takes a little more effort because you need to install a few things. I'm assuming you already have NodeJS (if not, go get it first).

npm i -g ts-node typescript

The above command installs ts-node and typescript globally on your machine. Next, run ts-node to enter the REPL.

Use this when

• you have some experience with NodeJS / npm
• you will be working with back-end code
• you like experimenting in a REPL environment

4. TypeScript Compiler

You can install TypeScript directly and use it to compile source code stored in a file.

npm i -g typescript

Once you have TypeScript installed, create a .ts file. For example, hello.ts

// hello.tsinterface Person {    name: string;    age: number;}const person: Person = { name: 'Alice', age: 24 };console.log(`hello ${person.name}`);

and then compile and run it

tsc hello.tsnode hello.js> hello Alice

Use when

• you want more control over your source code
• you're getting more serious about using TypeScript
• you want to experiment with multiple source files

Ready to Dive In?

When you're ready to take the next step with TypeScript, try creating a web application with React.

See Starting a React/Redux Project with TypeScript for help.