image credit: frank mckenna

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

interface 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 . ts node 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.