DEV Community

Alec V
Alec V

Posted on

Introduction to TypeScript for JavaScript Users

TypeScript is a free and open source language released in 2012 by Microsoft. It was created by Anders Hejlsberg, who developed Turbo Pascal, Delphi, C#, and the Microsoft .NET Framework. Development began in 2010, it was released to the public in 2012, and the first full version 1.0 was released in 2014. As of March 2023, Typescript is on version 5.0. Typescript is a superset of JavaScript, all valid JavaScript code is valid TypeScript, but can fail type-check during transpiling.

Typescript transpiles to JavaScript, but the process is often described as compiling. The transpiler is called the TypeScript Compiler. TypeScript was created to make JavaScript more suited to developing large applications. Typescript uses gradual typing, which means that variables can optionally be statically typed. Statically typed variables will be type-checked code is compiled or transpiled. TypeScript will transpile with errors, but it will tell you about the errors. In gradual typing, type errors in non-statically typed variables will throw errors at runtime. Static typing makes code more robust and reliable. Because TypeScript is a gradually typed superset of JavaScript, developers can gradually add static types or other TypeScript features to existing JavaScript code. Datatypes are assigned to variables like this:

let message: string = 'Hello, world!';
Enter fullscreen mode Exit fullscreen mode

In addition to the standard JavaScript datatypes, TypeScript includes four more: any, which can be any datatype, like a JavaScript variable; unknown, the datatype must be specified before it is used; never, the values stored in never cannot occur; and void, returns undefined, null, or nothing.

Any is useful if you want something to behave like it does in JavaScript. It can be useful when you are transitioning between JavaScript and TypeScript or when you are uncertain what datatype something will be, but it removes the static type check. Unknown will preserve the static type check on data whose datatype you are unsure of by requiring a type for the data before it is used. Never can be used to prevent conditions that should not be possible. Void can be used to ensure or indicate that nothing should be returned by something.

TypeScript also has interfaces, which define a structure and syntax for something. When the code is transpiled, the interface is type-checked against the things it defines. Interfaces describe the intended shape of data.

In addition to interfaces, TypeScript also supports developer composed types. These types can be composed by unions, declaring the possible types for data; generics, which assign a datatype to a variable; and structural or duck typing, which considers two objects that share the same structure to be of the same type.

A union:

type door = "open" | "closed" | "ajar";
Enter fullscreen mode Exit fullscreen mode

Above is a union in which the door type can either be open, closed, or ajar.

Generics:

type NumArray = Array<number>;

type StringArray = Array<string>;

type BoolObj = {
key: string;
value: boolean;
};
Enter fullscreen mode Exit fullscreen mode

Above is an array whose values must be numbers, an array whose values must be strings, and an object whose key must be a string and whose value must be a boolean.

TypeScript can make JavaScript code more robust and reliable, especially for larger scale projects. While writing code in TypeScript can require more lines of code and add complexity, TypeScript adds functionality to JavaScript and makes it easier to catch bugs early. TypeScript makes code easier to maintain and in the long run will decrease development time on large projects.

Documentation - typescript for JavaScript programmers. TypeScript. (n.d.). https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
The starting point for learning typescript. TypeScript. (n.d.-b). https://www.typescriptlang.org/docs/handbook

Top comments (0)