TypeScript Quick Start Guide

August 29, 2018 0 Comments

TypeScript Quick Start Guide

 

 

This article will show you how to quickly get up and running with TypeScript, and we will discuss the pros and cons of using TS. TypeScript is a superset of JavaScript and the TC39 standard. With TS, We are able to define both simple and complex static types for the variables in our code.

TypeScript is simply JavaScript with the optional addition of types for your variables. You can write in modern JavaScript syntax (ES2015+) when coding in TypeScript, and the compiler will convert the TypeScript (.ts) into JavaScript (.js) as well as offering the ability to transpile the JavaScript to previous versions such as ES5.

Note that if you are using module resolution such as require() or import/export for the browser, you will still need to use a bundler for the browser like Webpack, Rollup, or SystemJS.

First install TypeScript using either npm:

npm install -g typescript

or yarn:

yarn global add typescript

Once installed globally, you will have the tsc command available in your terminal.

Using your terminal, create a new directory called ts-simple with the following command:

mkdir ts-simple

cd into this directory and create an index.ts file. Inside this file, we will create a function called sayHello with an argument name which is of type string.

Now use tsc to compile your index.ts:

tsc index.ts

This creates an index.js which has removed the typing from the sayHello function parameter as well as converted the file into ES5 code. The resulting JS file can be safely run on the browser or in Node. Your JavaScript file will look like the following:

To test this out, run the newly created file using the following command:

node index.js
// "Hello, gitconnected!"

One of the benefits of TypeScript is that it can catch bugs in your code automatically if types don’t match. For example, imagine in the example above, we want to call the .trim() function on the string we pass in. If we pass in a variable of any other type, it could result in our code throwing an error in production instead of catching it before. Let’s take a look at our updated example by incorrectly passing an array to the function:

This would result in the following TypeScript error when we run tsc index.ts:

If we didn’t have TypeScript protecting us and allowing us to fix the error before we shipped the code to production, then our users may have experienced the following bug when visited our website.

In addition to .ts files, you can also use .d.ts files to add types to pre-existing JavasScript libraries, or .tsx files for writing JSX syntax in TypeScript for React applications.

  • Catch bugs while coding instead of in production. Types allow us to recognize issues before they go wrong.
  • Intellisense and code completion. TypeScript is supported by most major IDE’s and text editors including VS Code and Atom. They offer powerful TypeScript integrations which complete code automatically, indicate function arguments without needing to look at the source, and provide inline error recognition.
  • Improved code readability. The structure provided by TS makes it much easier to reason about new code when you have strongly typed variables, functions, and objects. It removes much of the guessing game about what shape the data will take.
  • Write ES2015+. The TypeScript compiler handles all modern JavaScript and can compile backwards to previous versions of JS for compatibility.
  • Optional static typing. TypeScript doesn’t require everything be statically typed, so you can incrementally convert a project.
  • Great ecosystem. TypeScript has been around since 2012 and this time has allowed for it to develop a strong ecosystem. Many open source packages provide TypeScript types natively, making integration even easier.
  • Increase career opportunities. TypeScript is rapidly trending upwards in adoption, and it has been integrated by many large tech companies including Google and Microsoft. By understanding TypeScript, you increase your marketability when searching for a job.
  • Bonus: No need for PropTypes when using TypeScript with React. If you use TypeScript, you no longer need to manage PropTypes for React, allowing you to catch errors sooner and have a tighter coupling of props with the types used in your code.
  • Higher upfront cost to write new code. By requiring more code, it can slow down the development velocity of new features which may not be an ideal trade-off for every company/startup.
  • Another library to stay up to date with. If you want to stay current with TS, it will require some refactoring as new versions come out.
  • Learning curve for JavaScript engineers. TypeScript will take more time to ramp up engineers that have previously only been coding in JS.
  • Complex types can be tricky to figure out. If you are integrating TypeScript into an existing code base, you may run into trouble getting everything typed correctly and handling complex data structures that “just worked” when it was only JS.
  • More verbose code. While the structure is ultimately helpful, the trade-off is that you will be using many more characters to write the same amount of code compared to JavaScript.
  • You still need a bundler (ie. Webpack, SystemJS, etc.) for some syntax such as import / export for ES2015 modules.

Are you interested in using TypeScript with React? Check out this article >


Tag cloud