TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript is open-sourced, it was developed and maintained by Microsoft. TypeScript may be used to develop JavaScript applications for both client-side and server-side execution.
TypeScript is a statically typed language. A language is statically typed if the type of a variable is known at compile time. For some languages this means that you as the programmer must specify what type each variable is (e.g.: Java, C, C++); other languages offer some form of type inference, the capability of the type system to deduce the type of a variable.
Declaring types prevent many runtime errors and allow IDEs to do their magic and show you where the errors lie. If you’re coming from a typed language background like Java, you’d be used to seeing examples like this:
class Main {
public static void main(String[] args) {
int[] numbers = {1,2,3,4,5};
}
}
In the example above, if a string was added to the array, the compiler will throw a Compilation Error. This is what TypeScript brings to JavaScript, error and type checking.
Using types
In TypeScript, the type of a variable is defined on the right-side before variable declaration. If we wanted to define the type of a variable name, it’ll look like the snippet below:
const name: string = 'John';
Types can be used:
- When declaring a variable
- In function parameters
- To type check the return value of a function
Variable declaration
When declaring a variable in TypeScript, we make use of the let and const keywords. You can type check Arrays, Strings, Numbers etc.
Arrays TypeScript, like JavaScript, allows you to work with arrays of values. Array types can be written in one of two ways. In the first, you use the type of the elements followed by [] to denote an array of that element type:
const names: string[] = ['John', 'Peter', 'Mark']; const ages: number[] = [23, 45, 56];
Also, we can use the generic Array type Array<elementType>, where elementType is the type of the element contained in the Array. An example looks like this:
const names: Array<string> = ['Mark', 'Peter', 'John']; const ages: Array<number> = [56, 45, 23];
Now if your Array will contain several types, the tuple comes into play.
Tuples Tuples allow you to declare an array where the type of a fixed number of elements is known, but need not be the same. For example, you may want to represent a value as a pair of a string and a number:
let names: [string, number]; names = ['peter', 23]; // Correct names = [23, 'John']; // Error names = [23, 'John', 33, 'Peter' ] // Correct
The last example is an Array with more than two characters, this didn’t error out because we supplied additional elements that were either a string or a number. If a boolean were to be added to the array, an error would be thrown.
names = ['Peter', 24, false] // error
names = ['John', 34, {} ] // error
Boolean A boolean is the most basic datatype. It is either true or false.
const isHappy: boolean = true; const canDrive: boolean = 34; // error
String Strings in TypeScript can be used in one of three ways:
- Double quotes.
- Single Quotes.
- Template literals.
Double quotes:
let name: string = "Peter";
Single quotes:
name = 'John';
Template literals: These are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called “template strings” in prior editions of the ES2015 specification. These strings are surrounded by the backtick/backquote (“`) character, and embedded expressions are of the form ${ expr }.
let color: string = 'green';
let amount: number = 3;
let car: string = 'Benz';
let sentence: string = `John has ${amount} cars. They are all ${color}, his favorite is the ${car}`.
Number In JavaScript, all numbers have the definitive type of number. All JavaScript numbers are floating point values, it is the same with TypeScript. TypeScript also supports binary and octal literals alongside hexadecimal and decimal values.
let hexadecimal: number = 0xf00d; let decimal: number = 23.34; let binary: number = 0b1010; let octal: number = 0o744;
Enum An enum is a friendly way of naming sets of numeric values. Enums begin numbering from 0 but you can manually set the value of one of the members.
enum Car {BENZ, TOYOTA, HONDA}
const myCar: Car = Car.TOYOTA;
Or we can manually set the values of the enum:
enum Car {BENZ = 2, TOYOTA = 4, HONDA = 6}
const myCar: Car = Car.HONDA;
A handy feature of enums is that you can also go from a numeric value to the name of that value in the enum. For example, if we had the value 6 but weren’t sure what that mapped to in the Car enum above, we could look up the corresponding name.
enum Car { BENZ=2, TOYOTA, HONDA=6 }
const myCar: string = Car[6];
Any There are time where we may not know the types we are working with. That’s when we can use the any type. The any type lets us opt out of type checking.
Learn more →let myCar: any = 'honda'; myCar = false; // correct myCar = 34; // correct
The any type is very flexible. Even more so than the JavaScript object. With the any type, you can continuously opt in and opt out of type checking in your code.
let car: any = 'honda'; car.start(); // compiles
Void Void is almost a direct opposite of any, it depicts the absence of a type. It is commonly used to define the return type of a function.
function startCar():void {
console.log('Car started');
}
When declaring variables, defining the variable type as void isn’t really useful as you can only set the variable to either undefined or null.
Null and Undefined Null and Undefined both have their respective types named after them. These types aren’t useful on their own because we can only assign Null and Undefined to a variable defined as a Null or Undefined type.
let n: null = null; n = 43; //compile error let u: undefined = undefined; u = 'string'; // compile error
Naturally, null and undefined are subtypes of any types. So you can assign null or undefined to number or string.
Never The never type represents the type of values that never occur. For instance, never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns; Variables also acquire the type never when narrowed by any type guards that can never be true.
The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, never (except never itself). Even any isn’t assignable to never. Some examples of functions returning never:
function throwIt(message: string): never{
throw new Error(message);
}
// Inferred return type is never
function fail() {
return error("Something failed");
}
Types on Functions We can define types for function parameters and function return values. We did something similar above when we used void on a function that doesn’t any values.
function returnValue(message: string): string{
return message;
}
Conclusion
We had a quick overview of TypeScripts types. There are more advanced applications of types in TypeScript, like creating declaration files etc. You can read more about creating declaration files here.
LogRocket: Full visibility into your web and mobile apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page and mobile apps.
