DEV Community

Cover image for Don't be AFRAID of Typescript!
PRINCE KUKREJA
PRINCE KUKREJA

Posted on • Updated on

Don't be AFRAID of Typescript!

Introduction:
Welcome to the world of TypeScript, where static typing and advanced features make JavaScript development more robust and manageable. In this beginner-friendly blog, I'll walk you through TypeScript using real-world examples to illustrate its concepts and benefits. Let's dive in together!

  • Static Typing with Basic Types: One of TypeScript's standout features is its support for static typing. Let's start with some basic examples to illustrate this concept:
// Example 1: Static Typing with Basic Types
let name: string = "John";
let age: number = 30;
let isStudent: boolean = true;

console.log(`Name: ${name}, Age: ${age}, Student: ${isStudent}`);  
//Output: Name: John, Age: 30, Student: true
Enter fullscreen mode Exit fullscreen mode

In this example, we declare variables with explicit types (string, number, boolean). This allows the TypeScript compiler to catch type-related errors early in the development process, ensuring code reliability.

  • Interfaces and Type Annotations: Interfaces in TypeScript provide a way to define the shape of objects. Let's see how interfaces can be used with type annotations:
// Example 2: Interfaces and Type Annotations
interface Person {
  name: string;
  age: number;
}

function greet(person: Person): void {
  console.log(`Hello, ${person.name}!`);
}

let user: Person = { name: "Alice", age: 25 };
greet(user);
//Output: Hello, Alice!
Enter fullscreen mode Exit fullscreen mode

Here, we define an interface Person with name and age properties. The greet function takes an object that conforms to this interface as an argument, ensuring type safety.

  • Classes and Inheritance: TypeScript supports object-oriented programming concepts like classes and inheritance. Let's create a simple class hierarchy:
// Example 3: Classes and Inheritance
class Animal {
  constructor(public name: string) {}
  move(distance: number = 0): void {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

class Dog extends Animal {
  bark(): void {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.bark();
dog.move(10);
// Output: Woof! Woof!
// Output: Buddy moved 10 meters.
Enter fullscreen mode Exit fullscreen mode

In this example, we define a base class Animal with a move method, and a derived class Dog that extends Animal and adds a bark method. This demonstrates TypeScript's support for classical inheritance.

Conclusion:
TypeScript serves as a game-changer in modern web development, providing developers with powerful tools to create safer and more maintainable code. By embracing TypeScript's features such as static typing, interfaces, and classes, you can significantly improve productivity and code quality in your projects.

While we've covered some fundamental aspects of TypeScript in this blog, there's much more to explore.

Happy coding!

Top comments (8)

Collapse
 
kurealnum profile image
Oscar

Just a heads up that you can add highlighting to the code blocks if you'd like. Just change:

code block with no colors example

... to specify the language:

code block with colors example

More details in our editor guide!

Collapse
 
princekukreja profile image
PRINCE KUKREJA • Edited

Thanks @kurealnum! I've highlighted the code block based on the language. Appreciate the tip!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Typescript is amazing ! I can’t imagine not using it. Vanilla JS feels like coding blindly since I don’t get warnings, completions, etc.
Tip for your article: you can highlight the code using dev.to/hoverbaum/how-to-add-code-h...

Collapse
 
princekukreja profile image
PRINCE KUKREJA

Glad you're loving TypeScript! It does provide that extra safety net compared to Vanilla JS. Thanks for the tip on highlighting code.

Collapse
 
sebastianccc profile image
Sebastian Christopher

A really good article for anyone interested in learning typescript. One good reason and why I strongly recommend typescript, is your code becomes self documented, and later easier to read. 🙂

Collapse
 
princekukreja profile image
PRINCE KUKREJA

Thanks! Glad you found the article helpful!

Collapse
 
kevinbism profile image
Kevin Ramirez

Honestly, I'm afraid. Because I didn't work on a huge projects, I think is useful in that case. On small projects I'm still prefer Vanilla JS.

Collapse
 
princekukreja profile image
PRINCE KUKREJA

Starting with Vanilla JS for small projects is smart. TypeScript excels as projects grow bigger.
Happy Coding!