Adding to the Script with TypeScript

Kelly Xiong Chen — Tue, 07 Jan 2025 21:24:25 +0000

Cover image credit: Daria Kraplak

Introduction
Purpose of TypeScript
Comparing JavaScript and TypeScript
Conclusion

Introduction

Before diving into what TypeScript is, let’s talk about JavaScript first! Did you know that JavaScript was invented in 1995? I didn’t either.

During this time, it fulfilled the need of processing simple web pages in people’s browsers. Since 1999, JavaScript has been improved and can handle the fun and dynamic web pages we are building nowadays. In addition, it is a fairly easy-to-use programming language as it is flexible with (slight spoiler here) data types.

However, there was an issue that was not being addressed. Ironically, the reason why JavaScript is easy to use is the same reason why it can break our code. Here is where TypeScript can help us!

Purpose of TypeScript

TypeScript is a superset of JavaScript. What does this mean? Well, to some, TypeScript is not a programming language as it is utilized to assist with the pre-existing JavaScript code. Regardless, TypeScript helps us JavaScript users by reinforcing the structure of our code. This is done by ensuring the consistency in data types for each variable we have. This is beneficial when it comes to testing because it highlights potential bugs during development and warns us before the code is compiled into JavaScript.

Comparing JavaScript and TypeScript

They Share These Data Types

string
number
boolean
undefined
null

However, their implementation requires a different approach. Let me show you how!

Inferences

When defining a variable in JavaScript, its data type can change later on if we want it to. This is a different story for TypeScript as a variable’s data type is either inferred by TypeScript or explicitly stated by us. A variable’s data type can become any if it cannot be inferred or it is not explicitly stated!

// JavaScript 
let x = 6;  // x stores a number value.  
x = "Hello there";  // x is now storing a string value.  
// This is valid since JavaScript allows dynamic type reassignment.  

// TypeScript 
let x = 6;  // x stores a number value.  
// (For line below) Error: Type string is not assignable to type number.  
x = "Hello there";  
// The reassigned value below matches the inferred or declared type of 
// the variable. TypeScript is okay with this.  
x = 8;  

// For both 
// x stores a number value and does not allow reassignment here. 
const x = 20; 
// Error: Cannot assign to 'x' because it is a constant.  
x = 25;

Type Annotation

As a continuation of the subsection above, another way we can explicitly state a variable’s data type in TypeScript is by using type annotation. This means adding a colon and type (: <type>) after giving a variable its name.

// JavaScript 
// No need to state the data type here, just assign the variable a value. 
let color = ‘purple’;
// Since JavaScript is flexible, it is fine with this reassignment. 
color = ‘blue’;
// This is also the case even if the value changes to 10. 

// TypeScript 
// 'color' is declared and expected to have a string value.  
let color: string;
// Similar to the line above, except we assign a value as well.  
let color: string = 'red';
color = ‘purple’;  // 'purple' is a string value, so this is valid.  
color = ‘blue’;  // 'blue' is a string value, so this is valid.

Shapes

What does “shapes” mean in TypeScript? For example, when it comes to strings, their methods come with their own properties. These “properties” make up the “shape” or structure of the variable. To access a variable’s properties, we must first ensure that the method we are using provides the necessary information. JavaScript is not strict with this and allows variables to change their shapes when it comes to runtime. However, we have to be careful with TypeScript as it is searching for the exact properties of a variable. It is like fitting blocks into the outlines that match their shapes.

// JavaScript 
"Hello".length;  // Result: 5 
"there".toUpperCase();  // Result: "THERE"

// TypeScript 
"Hello".length;  // Result: 5 
"there".toUppercase();  
// Property 'toUppercase' does not exist on type '"there"'.  
// Did you mean 'toUpperCase'?

There are plenty more than these!

Conclusion

These were my first impressions of TypeScript thus far. It is safe to say that I am fascinated by how it can elevate what JavaScript can do for us already. I am eager to learn more and implement it into my JavaScript projects!

I hope this has piqued your interest in adding TypeScript to your sandbox/toolbox alongside JavaScript. Who wouldn’t want their code to be better structured?

DEV Community: Kelly Xiong Chen