TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.
However, not everyone knows how it actually works.
In this article, we’ll look at how TypeScript makes JavaScript projects better.
What is TypeScript?
TypeScript is a superset of the JavaScript language that lets us produce safe and predictable code.
The code that it produces can be run in any JavaScript runtime.
It provides us with type checks which JavaScript lacks.
Should We Use TypeScript?
TypeScript isn’t the solution to all the problems in JavaScript projects.
We should know what TypeScript is good for.
TypeScript is focused on developer productivity through static typing.
It makes JavaScript type system easier to work with.
It provides us access control keywords and enhances the class constructor syntax.
We can write TypeScript code with JavaScript or TypeScript-exclusive syntax.
All the code goes through the TypeScript compiler, which is built to JavaScript.
The combination of JavaScript and TypeScript provides us with a flexible combination of both.
We can apply TypeScript features selectively.
Limitations of the Productivity Features
Writing TypeScript is mostly writing JavaScript with some extra features.
TypeScript enhances the type system of JavaScript and provides flexible types just like JavaScript.
If we understand JavaScript’s type system, then we understand why TypeScript’s type system is the way it is.
TypeScript provides us not only with a static type system, but also more dynamic types like union types, intersection types, literal types, and more.
JavaScript Version Features
Older JavaScript runtimes don’t support many modern features that are universally supported.
Therefore, we need a compiler like a TypeScript compiler to transform code to the JavaScript runtimes that we’re targeting.
The compiler does a good job of most transforming to JavaScript code that’s more compatible.
Data Types of JavaScript
To understand TypeScript, we’ve to understand the data types of JavaScript.
We won’t be very productive with TypeScript id we don’t understand the type system of JavaScript.
Confusion by JavaScript
The foundation of data storage in JavaScript is variables.
We can declare variables with let or const .
let variables can be reassigned while const ones can’t.
JavaScript Types
JavaScript has a clear type of system. And the rules for it are applied consistently throughout the language.
The most basic JavaScript data types are primitive values and the object compound type.
The primitives are number, string, boolean, symbol, null, undefined.
object is a compound type.
number is a data type used for representing all numeric values. JavaScript doesn’t distinguish between integer and floating-point values.
string is a type used for representing text data.
boolean can either be true or false
symbol represents unique constant values, like keys in an object.
null represents a nonexistent reference.
undefined is used by a variable that’s defined but hasn’t been assigned a value.
object is the type used to represent compound values, formed bu individual properties and values.
Working with Primitive Data Types
In JavaScript, we don’t write out the data type explicitly.
It figures out the type of its variable on its own when we assign it a value.
For instance, we write:
let foo = "bar";
to declare a string variable.
If we need to check the type, we write:
typeof foo
to return the type of the variable.
typeof is an operator that identifies the value type and returns 'string' .
typeof null returns 'object' , which isn’t the correct behavior, but it’s already implemented in all runtimes and code, so we can’t use typeof to check for null .
Type Coercion
JavaScript does data type coercion of its variables when it does certain operations.
It produces consistent results, we just have to know how it works.
If we use the == operator to compare objects, then type coercion will be done before comparison operations are done.
For instance, we may have:
let applePrice = 1;
let orangePrice = '1';
if (applePrice == orangePrice) {
//...
}
Then both will be converted to numbers before comparison.
When we write:
let totalPrice = applePrice + orangePrice;
then both will be converted to strings before concatenation, which is probably not what we want.
Avoiding Unintentional Type Coercion
To make our lives easier, we should take steps to avoid unintentional data type coercion.
To do that, we can use the === operator for comparisons and convert types explicitly first before doing concatenation.
Conclusion
TypeScript works by adding enhanced syntax to JavaScript and then transforming it to JavaScript after the TypeScript compiler does its own checks.
It doesn’t change JavaScript’s type system. Instead, it adds more checks to it.
