With the surge in popularity of TypeScript, we are witnessing a humongous number of developers ditching JavaScript in favor of TypeScript. Often junior developers are left scratching their heads over why the shift is taking place and how to make the most of it.
This article will help you nail TypeScript and provide insights into why it is better than JavaScript.
Why TypeScript?
Before we start with Why, we should probably look at What is TypeScript?
TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript
TypeScript adds an additional layer of static typing
, which helps the developer avoid a lot of difficult to find bugs at development time instead of runtime. It also helps a lot in IntelliSense, providing precise code completion suggestions, so no more stumbling around in the dark.
TypeScript is nothing but JavaScript with some additional features and can be compiled as per ES5 and ES6 standards to support the latest browser. When combined with IDEs like VS Code, it can save developers hundreds of hours.
Getting Started
Installing TypeScript
Before writing any TypeScript code, we need to install the TypeScript package first.
npm install -g typescript
Keeping TypeScript installed as a global package is a good idea as it will allow node to execute TypeScript files directly using node <file.ts>
. But for a project, you should install it as a local package using
npm install -D typescript
Initializing a TypeScript Project
To initialize a TypeScript project, we need to create a tsconfig.json
file in the root directory of the project. You can auto-generate it using
tsc --init
Compiling TypeScript
To compile TypeScript files & watch for changes, navigate to the file directory and use
tsc -w
TypeScript Features
With TypeScript setup, let's take a look at the features TypeScript has to offer.
Types
Since TypeScript is a strongly typed language, it makes sense to start off with its type system. The variable types can be defined as follows
const userName: string = "John Doe";
let age: number;
age = 30;
const arr: number[] = [1, 2, 3]; // array
const tuple: [string, number] = ["John", 30]; // tuple (fixed size)
const nullValue = null; // infered type
NOTE: If you access index > 1
in the tuple above or assign a non-number value to age
, TypeScript compiler will throw an error, making sure you fix the code before execution.
You can also create custom types to suit your specific needs.
type User = {
name: string;
age?: number; // Optional property (`age` can be undefined)
(): number; // type is callable (returns number)
new (name: string): User; // can be called as a constructor
readonly id: string; // readonly property (cannot be modified after creation)
signIn: (retryCount: number) => void; // function (takes a number as a parameter & returns void)
customConstant: "constant"; // value can only be "constant"
get fullName(): string;
set username(name: string);
};
type UserAges = {
[id: string]: number; // index signature (unspecified values can accept numbers)
};
type Pi = 3.14; // value type
const pi: Pi = 3.14;
TypeScript also allows you to create union
, intersection
, and enum
types.
type Size = "small" | "medium" | "large"; // union type
type Coordinates = { x: number } & { y: number }; // intersection type ({ x: number; y: number })
enum SizeEnum {
Small,
Medium,
Large,
} // enum type (the values will be assigned from 0 to N)
enum SizeStringEnum {
Small = "small",
Medium = "medium",
Large = "large",
} // enum type (with string values)
const size: SizeEnum = SizeEnum.Small;
Generics
In case you don't know the type of the variable, you can use Generics
to allow the compiler to infer the type.
function clone<T>(o: T) {
return JSON.parse(JSON.stringify(o)) as T;
}
Interfaces
TypeScript also allows you to create interfaces
. An interface
defines the shape of an object.
interface User {
name: string;
age?: number;
(): number;
new (name: string): User;
readonly id: string;
signIn: (retryCount: number) => void;
customConstant: "constant";
get fullName(): string;
set username(name: string);
}
Looks similar to the type
definition above? Now let's look at the true power of interfaces
: they can be extended, used with Generics
, and even used with classes.
// Extend an interface
interface Animal {
leg: number;
}
interface Dog extends Animal {
bark(): void;
}
const dog: Dog = {
leg: 4,
bark: () => console.log("Woof!"),
};
// Generics
interface APICall<Response> {
data: Response;
}
const api: APICall<string> = {
data: "Hello",
};
Classes
Classes in TypeScript work very similar to JavaScript, with small differences. You have to declare the types of the properties in the class, the ability to combine interfaces, add access specifiers, and create abstract classes.
// Implement an interface
interface IStorage {
data: string;
}
class Store implements IStorage {
data: string;
constructor(d: string) {
this.data = d;
}
}
// Access Specifiers
class User {
public id: string; // default specifier for data & methods is public
private secret: string = "super secret string";
constructor(id: string) {
this.id = id;
}
}
// Abstract classes
abstract class Animal {
abstract getName(): string;
}
class Dog extends Animal {
getName() {
return "Dog";
}
}
Wrapping Up
Give yourself a pat on the back! You've now know TypeScript.
Finally, my disciple, you are ready to start writing TypeScript code. Go ahead and try it out! It is a bit difficult to get started, but once someone does, I have never heard them going back to JavaScript before!
Happy Developing!
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram
Follow my blogs for Weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles:
Top comments (3)
Thanks for investing so much time to improve the article :)
I do NOT see "real-world" problem being solved by using TypeScript.
All I see are silly examples of a "function that adds or divides 2 numbers' to justify "type checking". e.g., Who writes a function just to do basic math????
Next, developers are testing (aka runtime) their code LINE-BY-LINE anyway, so "compile-time" checking isn't all that beneficial in saving a developer time.
In other words, TypeScript add a layer of complexity that doesn't have that much benefit to JavaScript world.
NEWS FLASH:
Exactly what I was trying to say about this article :-)
(All except I don't use the hash mark)