TypeScript is a strict superset of ECMAScript 2015, which is itself a superset of ECMAScript 5, commonly referred to as JavaScript. As such, a JavaScript program is also a valid TypeScript program, and a TypeScript program can seamlessly consume JavaScript. - Wikipedia
One of the best features of TypeScript is, wait for it, Types! However, one of the most cumbersome features of TypeScript, for newbies, is Types! Let's talk about what they are, why you should use them, and the problems they can cause.
Table of Contents
What are Types? 🤔
TypeScript is a strongly typed, object-oriented, compiled language. Conversely, JavaScript is not strongly typed. In JavaScript, a variable can take many forms. A variable can be any type of object. For example a String or a Number. However, in TypeScript an object can only be one or the other.
// this is valid in JavaScript
let name = "Phillip";
name = 4;
let name: String = "Phillip";
name = 4;
Why should you use Types?
Types are great! They allow you to see which fields are available for an object. It also prevents developers from assigning the wrong value to a field.
A wonderful example is refactoring. I recently had to make major updates to an Angular application. Since we use Types we were able to easily modify fields and the compiler allowed us to easily make the appropriate changes to fix them! ALL HAIL TYPESCRIPT! 🙌🏽
What does a Type look like?
A Type in TypeScript is a simple interface. You define fields and the distinct type of the field.
interface User {
id: number;
name: string;
dateOfBirth: date;
age: number;
funFacts: string[];
activeFlg: boolean;
mother: User;
father: User;
someObj: any;
idk: unknown;
}
What are the downsides of using Types?
A strongly typed language means there is less flexibility. You need to define what your interfaces will look like. Based on how you configure your compiler there may be some strict rules to follow.
I have helped many developers debugs errors having to do with implicitly any. This means that a type for a parameter has not been explicitly defined.
Here are some examples of errors I have seen:
parameter 'req' implicitly has an 'any' type
parameter 'res' implicitly has an 'any' type
parameter 'res' implicitly has an 'any' type.ts(7006)
error ts7006: parameter 'req' implicitly has an 'any' type
error ts7006: parameter 'res' implicitly has an 'any' type
parameter 'user' implicitly has an 'any' type.ts(7006)
This is a great example of code that I found on StackOverflow which would produce one of these beautiful exceptions.
const users = [...]
let user = users.find(user => user.id === query);
The parameter user is being used in the find method but its type is unknown. Therefore, id may not be a valid attribute.
How do you fix this? 🔎
You can EXPLICITLY use any! The any type allows us to assign literally “any” particular value to that variable, simulating vanilla JavaScript.
const users = [...]
let user = users.find((user: any) => user.id === query);
The best thing to do would be to use a type to define the users array or the find method.
interface User {id: number;...}
...
...
const users: User[] =[...]
let user = users.find(user => user.id === query);
In your tsconfig.json, add "noImplicitAny": false to "compilerOptions":{}.
What is tsconfig.json?
You will see this file is all TypeScript projects! This specifies the root files and the compiler options required to compile the project.
{
"compilerOptions": {
...
"noImplicitAny": false,
...
},
"files": [
"core.ts",
...
]
}
Conclusion
TypeScript is awesome! Almost all of the projects I work on today leverage TypeScript. I feel the pros far outweigh the cons of using TypeScript over vanilla JavaScript. I highly recommend giving it a try on your next project!
Pro Tip: If you know JavaScript you already know TypeScript! 😉
Bonus Content
If you are interested in getting started with TypeScript read my article on How to Convert Express.js to Typescript!
Resources
