This article will discuss the differences between typescript and JavaScript, the problems they solve, and which is best to use.
I really like TypeScript, and I use it a lot. It solves so many of JavaScript’s problems and makes writing good JavaScript code much easier (once you’ve learned to use TypeScript).
So, this article is more about why you should use TypeScript (when you can use it), when/where you can use it, and the problems it solves.
This article goes well with the following articles, giving you an overview of a bunch of web-focused programming languages:
What’s the Difference Between JavaScript and Node.js? Which Should I Use?
Choosing Between PHP and JavaScript For Your Project
What is JavaScript?
JavaScript began life in the mid-1990s as a scripting language for adding interactivity to web pages.
Over time it has been developed into a full-featured programming language, which can even be run outside the web browser (more detail on this in our Node.js article).
What are ‘Types’?
In computer programming, a variable stores information – a value or collection of values, which we’ll refer to as data.
data can be anything – a number, a word, a sentence, a date – it could even represent a whole object and the attributes describing it as individual fields, all stored in a variable.
A variable has a type – a number, a word, a sentence, a date – all could be considered a variable’s type.
The type of the variable tells the programming language what can be done with the variable. Numbers can be assigned numeric values and multiplied, dates can be assigned date values, and days or hours can be added, etc.
JavaScript is notoriously loosely typed. You can pretty much do anything with any type of variable. This leads to unexpected results – words interpreted as numbers being used in mathematical equations being one of the most common. This makes JavaScript unwieldy for complex applications.
So what is TypeScript?
TypeScript is a superset of JavaScript. It adds strict typing – enforcing which values can be assigned to variables and what can be done to make code more reliable and adds a bunch of other improvements to make JavaScript better for building complex applications.
Superset means that it adds features to JavaScript whilst still being compatible with existing Javascript code. Think of it this way – all of the JavaScript features are also features of TypeScript, but JavaScript doesn’t contain the features added to TypeScript.
Typescript code is compiled before being run. It compiles (or converts) into regular old JavaScript – making it compatible with existing JavaScript compatible environments, like web browsers and Node.js.
Basically, it makes JavaScript better and runs wherever JavaScript already does. Cool stuff.
What Problems Does TypeScript Solve (Why You Should Use It)?
Strong Typing
Strong typing limits what you can do with variables of different types, but it’s not a limitation!
It just means that you can’t misuse a variable. It prevents you from giving a variable that should be a number a string value. This reduces errors and removes a lot of chances for easy mistakes to be made.
Custom Types
Most programming languages don’t have a car type, but you could define your own type, which contains all of the aspects of a car that you might wish to store.
You can create a type that stores information such as the color, make, year, or model of a car, assign an owner, or add your own functions to the class, which defines the car type.
You can go further and add helper functions and methods to your custom type – these would be available to be run on any variable of the car type, anywhere in your application.
Simplicity & Readability
TypeScript makes it super easy to split your code into separate files, so your custom car type could live in its own separate file – no hunting through long files to find and modify it.
Strongly enforced typing will mean that you know what a variable is and what can be done with it. Linting, the processes of scanning your code for errors, will highlight the misuse of variables (e.g., trying to do maths with a string).
ECMA Script 6 (ES6)
‘JavaScript’ isn’t really the official name of the programming language – it’s more of a brand, but it’s become the common term for ECMA Script (the ugly, official name for the language). TypeScript supports and encourages the use of all of the latest features of ECMA Script version 6.
Encourages Best Practices
TypeScript encourages you to structure your applications and use types correctly – helping you to build better applications.
Well-structured applications are self-documenting – if code is easy to read, its intent is clear, and you have to write less commentary explaining what it does.
Well-structured applications are less error-prone, too – saving you time.
Where Can I Use TypeScript / Who’s Using TypeScript?
- Angular
- Angular is a Google-developed framework built using the Angular framework and is used by Google to build a number of their mobile applications.
- Ionic
- Built on Angular, Ionic expands on it and adds many easy-to-use components and tools to make Mobile development more accessible.
- Microsoft
- Microsoft are actually the shepherds of the whole TypeScript project. They’ve led its development, and their Visual Studio programming suite is one of the best environments to code TypeScript (and it runs on Linux! ?)
- Slack
- Slack, the popular business messaging platform use TypeScript to build their chat clients
- Me!
- I’ve used TypeScript to build some pretty big projects which a) Definitely couldn’t have been built reliably in plain JavaScript and b) Would have resulted in completely unintelligible, bloated codebases if it wasn’t for TypeScript encouraging me to structure my code correctly.
How Do I Get Started?
As TypeScript needs to be compiled, some additional steps are required when developing with it.
There’s also a bit of a learning curve – some new practices and syntax to learn on top of the JavaScript you already know.
One of the best ways to get started is with the Ionic Framework.
Once installed, the Ionic framework sets up a full mobile application development environment, which can build apps for mobile and desktop operating systems (Linux included!).
The Ionic documentation is thorough, walking you through the development process for simple and complex mobile apps. And as it’s all written in TypeScript, you’ll learn TypeScript while you learn to build complete apps.
