Typescript in a nutshell

Photo by Juanjo Jaramillo on Unsplash

Welcome back to my blog. Today, I’m going to talk about Typescript, what this programming language solves, how Typescript helps you improving your JS code and its main features.

Typescript can be seen as a form to validate your JavaScript code ahead of time with static type checking. On the other hand, JS is a dynamic programming language where we can do several things that other languages would not accept. I am talking about:

  • Reference variables that do not exist
  • Work with objects of an unknown “shape”
  • Code is interpreted by a browser, but if our code is broken, you won't catch it until runtime, when the browser throws an error.
Photo by AltumCode on Unsplash

Typescript prevents errors like the ones above to happen, by extending JS with types.

  • Typescript is a strict superset of JavaScript.
  • This means that when we write a .ts file, you can write plain JS with all of its extra features being completely optional.
  • For example, our IDE will provide feedback when using a variable that doesn’t exist.
  • That would allow us to fix code as we go, with instant feedback.

Typescript behaves like a compiled language, where JS is the compilation target.

We can run the typescript compiler using the tsc command, followed by the name of the file:

>> tsc index.ts
  • This command will take the .ts file and transpile it into vanilla JavaScript.
  • You can choose any “flavor” of JS you want if you need to target ancient browsers.
  • You can use the latest and greatest syntax features of JS without having to worry if they will be supported in an older environment.
Photo by Nubelson Fernandes on Unsplash

Typescript projects normally have a ts config file which provides an infinite number of ways to customize the behavior of the compiler.

The main goal of Typescript is to enable static typing:

  • A way to achieve this is that it allows us to annotate our code with types.
  • We can strongly type a variable using a colon followed by its type, like string, boolean, or number.
  • That is known as an explicit type.

If we then try to assign a value of a different type to a variable strongly typed, we would get an error.

Alternatively, if we set an initial value it will implicitly infer the type. There may be cases where you want to opt-out of this behavior. For that purpose, you can annotate with the “any” type. Example:

let appName: any = 'appname'

Another important thing is that when working with an array we use brackets to strongly type a list.

In addition, you can define your own custom types and interfaces. This would be especially useful when working with objects.

In a Typescript interface, we can define various types of properties on an object, and then, we can apply that interface to a plain JS object.

The benefit of strongly typed code is that we get autocompletion everywhere in the IDE. This way, we don’t have to jump back and forth to documentation.

More learning

Finally, during this week I had the opportunity to refresh my JS knowledge along with my knowledge of technologies such as NextJS, React, NestJS, and Node. Moreover, I also worked with tools such as DBeaver to manage and administrate a local database and learned more about Docker and the use of containers to allow us to contain our databases. At the same time, I got familiarized with the use of Bitbucket as a version control tool and collaborative work.

That’s it for this post, have a great week, and see you soon!

Photo by Hanny Naibaho on Unsplash

--

--

--

Engineer looking to help and contribute. Learning about Software development and Computer Science.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Restarting Terminal Processes When Resuming a Session

images/neovim-only.png

Handling Falsy Valued Emitted from Observables in Angular

NestJs — A Node.js web framework

25 JavaScript Tricks You Need To Know About

JavaScript coding interview — Promise — Part 9

React Server Side Rendering with ReactJS.NET

To-do list app with React Functional and Class Components

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eduardo Ahumada

Eduardo Ahumada

Engineer looking to help and contribute. Learning about Software development and Computer Science.

More from Medium

Blame In Software Development

The “Zero, One, Infinity” rule

Solid Design Principles In Javascript (Part 2) — Open-Closed Principle

SOLID Principles — Programmers’ Life Saver