image credit: frank mckenna

4 Easy Ways to Start Playing with TypeScript

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

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

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

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

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.

Level up Your React + Redux + TypeScript

for free with articles, tutorials, sample code, and Q&A.