Introduction
TypeScript (TS) is JavaScript with syntax for types. It was developed and released by Microsoft in 2012 to provide stricter programming for JavaScript.
JS allows for great flexibility in its use, but often leads to unexpected behavior and problems at runtime. TS informs developers when a change in a specific area of a program will cause a break in another area through error handling. Pretty neat.
TypeScript is just JavaScript, but with additional features such as a type system to help catch errors, clarify structure, and refactor code. TS code is written in files with .ts extension and is written in a transpiler (converter) that checks for any errors before outputting an almost exact copy in JS format — .js. Code is executed using the tsc command in the terminal.
Basically, TypeScript = strict and JavaScript = flexible.
Type Inferences
Recall that JavaScript’s primitive data types are number, string, boolean, undefined, null, bigint, and symbol. JS allows us to assign any value to any variable, not to mention three different ways to declare one: var, let, and const.
Let’s see what happens when we try to do the same in TS.
We get an error stating that the variable str cannot be assigned a number because it is initialized as a string type data.
TypeScript expects the data type of the variable to be the same as what it was originally declared. If the str was initially declared as a string “Hello World”, then TS infers that str should only be assigned string values. This is called type inference.
Type Shapes
A data type’s shape refers to the inherent methods and properties of that type. For example, strings have a .length property and .toUpperCase() & .toLowerCase() methods.
By running the tsc command, TS will let you know of any errors associated with the shape.
Notice, the terminal does not only identify the errors, but also gives suggestions as to what it thinks you meant.
Type Annotations
Variables can have type annotations or type declarations added after their names. Designating a type annotation is simply typing “:” followed by “<data type>”. For example, if we run the following code with the tsc command in the terminal,
the output would be
Notice, since we declared that the variable str will be a string, num will be a number, bool will be a Boolean (true/false), and empty will be null, TS will expect that those data types (values) are correctly assigned to those variables, respectively. Otherwise, it will throw errors. bool was correctly assigned true so there was no error.
Lastly, if a variable is declared without being assigned an initial value, TS will not try to infer its data type and will assign it as a type any. This simply means that the variable can be assigned a value of any data type and can be changed at will, unless it was declared by const.
TLDR — TypeScript is essentially the same as JavaScript, with a few additional features. It enforces strict adherence to a certain set of rules while JS allows for more flexibility in the code but can lead to weird and unwanted behaviors during runtime.
Think of TypeScript as someone who checks over your work (JavaScript code) before you submit it. Why not, eh?
Credit & Inspiration: Codecademy’s Learn TypeScript course
