A brief TypeScript guide

An introduction to TypeScript and why this programming language could be a good choice.

Content of this guide:

• What is TypeScript?
• Types.
• TS compiler.
• Interfaces.
• Generics.
• Decorators.
• Modules and Namespaces.
• Conclusion.

What it is TypeScript?

TypeScript is a programming language created by Microsoft that is built on top of another language, JavaScript, it has the base and part of the structure that makes JS such a powerful language and adds extra functionality such as a structure for defining data types (some JS and some exclusively TS), generics, decorators, interfaces, and much more.

• TS code it is compiled to a JS file.
• It prevents errors and bugs in development.
• Main features: types, decorators, interfaces, etc.

Types

The types system checks the validity of values before they are saved or manipulated by a program. It makes sure that the code is returned as expected. Types include primitive types (string, number, boolean) and also accept other types such as arrays, tuples, objects, unknown, any, union, literal, etc.

As we can see, types help the programmer to define correctly the data types and avoid errors in the development environment. Here are some other examples of how to use the types

TypeScript has another type called Object. There are differences between Object and object

The object type represents all non-primitive values while the Object type describes the functionality of all objects and allows access to objects methods.

There are more types:

TS compiler

When we write code in TypeScript we do it in files with extension .ts TypeScript compiles the code and transforms it to JavaScript code, its mean that the code that is written in a .ts file will be “transformed” to JavaScript code in a file with extension .js and the advantage of this is that while in JavaScript errors appear at runtime, TypeScript first analyzes the code in development and tells us where there are errors or something that is not specified. Once everything is OK, approved by TS, then the compilation takes place and we get a JavaScript file that will have no problems in development environment.

More info: https://www.typescriptlang.org/docs/handbook/compiler-options.html

Interfaces

Interfaces describe the structure of the object, which means that it describes how the object should look like. In TS an interface contains the definition of methods and properties, not their implementation.

Other use-case of interfaces it is the possibility that forced that a class has a specific method. For example, if in the interface we define a method, that method in the interface it is a path for developer because it is very useful when a developer need information about what method a class need and what kind of type data must have.

Generics

It is a type that it is connected with other type and it is very flexible regarding which exact type the other type is. Are a way to make the code more reusable. Generics allow work with different data types and not restricted to one data-type. It allows the app could be more flexible and scalable. When a developer make a component or script that uses generics types, what it doing is give to the component or script the ability that accept and force typing that is passed when component is used, this give to the component more flexibility.

const names: Array<string | number> = []; // string

In the above example, an array of string it is created and if we try to use array and string methods that will be totally allowed.

Other example of that it is with functions:

Decorators

Decorators are simply functions that are prefixed @expression symbol, it is a declaration that can be applied to classes, methods, property, or parameter. Decorators are a way to add extra functionality and also they are a way to have meta-programming in TypeScript, which is a programming technique that enables the programmer to create code that uses other code from the application itself as data. The following is an example of class decorator:

Decorators it is an extensive topic, but here it is only a small use case. You could see more info in the documentation: https://www.typescriptlang.org/docs/handbook/decorators.html

Modules and Namespaces

Namespaces allows organize code in a clean way. Namespaces group the code in one file and allow export to other .ts files. Namespaces could be include classes, interfaces, functions, etc. The nomenclature has changed since old versions of TypeScript, where the name it was “internal modules”, now it is know as Namespaces.

Namespaces is a TypeScript feature that JavaScript does not have, it mean that the compiled code made by TS it not have a JS equivalence.

Then, when you want import that code in other file, it is necessary write the following code:

/// <reference path=”components/Validations.ts” />

This is a unique TS syntax that indicates where the file with the code you want to import is located. Then you be able to access and work with the code that you imported.

But if you are familiarized with ECMAScript 2016 you can use import/export like JavaScript, it is totally fine.

Conclusion

TypeScript is a programming language that provides to developers more control of the code and improves refactoring and bug-fixing times. Companies like Slack, CircleCI, Medium, Accenture, etc. are using TypeScript for their projects.

Well, TypeScript has a lot of features and things good to know as compatibility with JavaScript libraries, support for OOP, etc. In this article only mentioned some of them without much details.

If you feel that I should expand on some of the topics or I must should write about another TypeScript related topic please let me know in the comments.