What is TypeScript?
TypeScript is a superset of JavaScript created by Microsoft, which primarily provides optional static typing, classes and interfaces. One of the big benefits of using TypeScript is your ability to enable it in IDEs to provide you with a richer environment for spotting common errors as you type the code. In short, TypeScript is your syntax checker that helps you write more well defined code and to make JavaScript development more efficient.
Why would you want to use TypeScript?
In general, TypeScript allows you to write better code and be more productive at a cost. The cost being a bit more typing and a bit more time that you have to put in while writing code. "Wait what?", you may be asking yourself. Well, put simply, in the long run you are actually saving on typing time, and you and your project will benefit from it. Some of the key advantages of TypeScript become clear during development and implementation of the code, especially if you are not familiar with it. A developer’s life would be much easier if one could make an assumption that the library or piece of code one wants to use is bulletproof, and every line of documentation for it is descriptive, exhaustive and easy to understand. In this respect, TypeScript makes a developer's life that little bit easier.
TypeScript allows you to self-document the code by assigning types, and by doing so you are inherently creating documentation. Once you get familiar with TypeScript syntax and types, you will find yourself relying less and less upon code comments and doc blocks. Developers benefit from IDE integration where TypeScript catches any problems with the code through warnings and errors. Thanks to TypeScript, your code will become more explicit and well-defined, decreasing or even removing the possibility of mistakes and bugs.
Here are some of the basic examples of when TypeScript can help you:
a. Before TypeScript
const add = (a, b) => {
return a + b;
};
console.log(add(1, 2)); // result: 3
console.log(add("hello", "world")); // result: helloworld
b. After applying types
const add = (a: number, b: number): number => {
return a + b;
};
For
console.log(add("hello", "world"));
TypeScript will raise a warning: “Argument of type 'string' is not assignable to parameter of type 'number'”.
Interfaces are what makes TypeScript shine.
interface Student {
studentId: string;
studentName: string;
getGrade: (subject: string) => number;
getAttendence(): string;
age?: number; // ? makes the attribute optional
}
They help you define the shape of objects. Through types we benefit by making code less prone to being misused, whether it is on purpose or by accident.
I have recently run into an interesting situation while working with React & TypeScript on a project. I have been working with “edit user” functionality. Edit user form would be present for existing user as well as pending user. The difference between the two was that existing and pending user had slightly different form fields. Please take a look at the Interfaces and their respective implementations for both user and pending user in my example:
Interface:
interface PendingStudent {
name: string;
surname: string;
}
Implementation:
const pendingStudent: PendingStudent = {
name: "John",
surname: "Smith"
};
Interface:
interface Student {
studentId: string;
name: string;
age: number;
getGrade: (subject: string) => number;
getAttendence(): string;
}
Implementation:
const student: Student = {
studentId: "S001",
name: "John",
age: 26,
getGrade: (subject) => 9,
getAttendence: () => "good"
};
Going with an explicit rather than implicit approac,h thanks to the TypeScript, I was able to differentiate the data objects as well as well define them so they best fit the purpose.
<Dialog userData={pendingStudent} /> and <Dialog userData={student} />
The lesson learned here is that I was able to identify early the difference between pending and existing users. This has helped me architect and plan better implementation of these user objects and Dialog component.
Thanks to the TypeScript I was able to make the code less cluttered by making it work only with the data and functions at hand, as well as benefiting from better overall performance thanks to less data in the form and more well-defined objects.
By using TypeScript, I found myself writing the code slightly differently than I would normally, but by doing so I benefited in the approach.
I hope that you will share the same positive experiences using TypeScript. I hope that it will propel you as a developer to architect and plan through a tree of components and data that gets passed through a stack in far greater detail than you would normally do as in comparison of a non-TypeScript project.
If you still don’t feel convinced about benefits of TypeScript, please have a read about how Slack and their brilliant developers benefited from incorporating TypeScript https://slack.engineering/typescript-at-slack/
I highly recommend you give TypeScript a try, whether you are working on a brand new project or an existing one.
Previously from our Engineering Team:
Building our own office Jukebox using Mopidy, NodeJS and React by Duncan Robertson
How to manage a project-specific PATH with direnv by Andrew Peng
Why do we love Next.js so much? by Dave Quilter
Dev Talks: End-to-end testing with Cypress by Damian Boni
Things I wish I’d known before I started with React Native by Carmen Lopez Guerra
How Ruby if statements can help you write better code by Dave Cocks
How do you solve a problem like caching in Progressive Web Apps? by Dave Quilter
