TypeScript is a popular programming language that extends JavaScript with static typing. Static typing means that the type of a variable cannot be changed at any point in a program. This can prevent many common bugs and errors, and also make the code more readable and maintainable.
In this blog post, I will explain some of the core concepts of TypeScript, such as types, interfaces, generics, type casting, and more. By the end of this post, you will have a better understanding of what TypeScript can do and how to use it in your projects.
Types
One of the main features of TypeScript is that it allows you to annotate your variables and functions with types. For example, you can declare a variable as a string, a number, a boolean, an array, an object, or any other type that TypeScript supports.
// Declare a string variable let name: string = "Alice"; // Declare a number variable let age: number = 25; // Declare a boolean variable let isMarried: boolean = false; // Declare an array of numbers let scores: number[] = [90, 80, 70]; // Declare an object with properties let person: {name: string, age: number, isMarried: boolean} = { name: "Alice", age: 25, isMarried: false }; Type annotations help TypeScript to check the validity of your code at compile time. For example, if you try to assign a string to a number variable, TypeScript will give you an error.
// This will cause an error age = "twenty-five"; TypeScript also supports some special types, such as any, unknown, void, null, and undefined. The any type means that the variable can have any value, and TypeScript will not check its type. The unknown type is similar to any, but it requires you to explicitly cast it to another type before using it. The void type means that the function does not return any value. The null and undefined types represent the absence of a value.
// Declare a variable of any type let anything: any = "hello"; anything = 42; anything = true; // Declare a variable of unknown type let something: unknown = "world"; something = 99; something = false; // Cast an unknown variable to a string let str: string = something as string; // Declare a function that returns void function sayHello(name: string): void { console.log("Hello, " + name); } // Declare variables of null and undefined types let nothing: null = null; let missing: undefined = undefined; Interfaces
Interfaces are another way to define the shape of an object in TypeScript. They are similar to types, but they can be reused and extended by other interfaces or classes. For example, you can define an interface for a person, and then use it to declare a variable or a function parameter.
TypeScript
// Define an interface for a person interface Person { name: string; age: number; isMarried: boolean; } // Declare a variable of type Person let alice: Person = { name: "Alice", age: 25, isMarried: false }; // Declare a function that takes a Person as an argument function greet(person: Person): void { console.log("Hello, " + person.name); } Interfaces can also have optional properties, which are marked with a question mark. For example, you can define an interface for a car, and make some of the properties optional.
TypeScript
// Define an interface for a car interface Car { model: string; year: number; color?: string; // optional property TypeScript // Define an interface for a car interface Car { model: string; year: number; color?: string; // optional property owner?: Person; // optional property } // Declare a variable of type Car let myCar: Car = { model: "Toyota", year: 2020 }; // You can also assign values to the optional properties myCar.color = "red"; myCar.owner = alice; Generics
Generics are a way to make your code more reusable and flexible by allowing you to work with different types of values. For example, you can define a generic function that can accept and return any type of value, as long as it matches the type parameter.
TypeScript
// Define a generic function that swaps the values of two variables function swap<T>(a: T, b: T): [T, T] { return [b, a]; } // Call the function with different types of arguments let [x, y] = swap<number>(1, 2); // x = 2, y = 1 let [a, b] = swap<string>("hello", "world"); // a = "world", b = "hello" let [p, q] = swap<Person>(alice, bob); // p = bob, q = alice You can also define generic interfaces, classes, and types, and use them to create more specific types. For example, you can define a generic interface for a stack, and then use it to create a stack of numbers or a stack of strings.
// Define a generic interface for a stack interface Stack<T> { push(item: T): void; pop(): T; isEmpty(): boolean; } // Define a class that implements the Stack interface class ArrayStack<T> implements Stack<T> { private items: T[]; constructor() { this.items = []; } push(item: T): void { this.items.push(item); } pop(): T { return this.items.pop(); } isEmpty(): boolean { return this.items.length === 0; } } // Create a stack of numbers let numberStack: Stack<number> = new ArrayStack<number>(); numberStack.push(1); numberStack.push(2); numberStack.push(3); console.log(numberStack.pop()); // 3 console.log(numberStack.pop()); // 2 console.log(numberStack.pop()); // 1 // Create a stack of strings let stringStack: Stack<string> = new ArrayStack<string>(); stringStack.push("hello"); stringStack.push("world"); stringStack.push("!"); console.log(stringStack.pop()); // ! console.log(stringStack.pop()); // world console.log(stringStack.pop()); // hello Type Casting
Type casting is a way to tell TypeScript that you know the type of a value better than it does. For example, if you have a variable of type any or unknown, you can cast it to a more specific type, such as string or number.
There are two ways to perform type casting in TypeScript: using the as keyword, or using angle brackets. For example, you can cast a variable of type any to a string using either of these methods.
// Declare a variable of type any let input: any = "42"; // Cast it to a string using the as keyword let strInput: string = input as string; // Cast it to a string using angle brackets let strInput2: string = <string>input; Type casting can be useful when you are working with values that come from external sources, such as user input, API responses, or DOM elements. For example, you can cast a DOM element to a specific type, such as an HTML input element, and access its properties and methods.
// Get a DOM element by its id let element = document.getElementById("my-input"); // Cast it to an HTML input element let inputElement = element as HTMLInputElement; // Get the value of the input element let inputValue = inputElement.value; Conclusion
In this blog post, I have explained some of the core concepts of TypeScript, such as types, interfaces, generics, and type casting. These concepts can help you write more robust and maintainable code, and avoid common errors and bugs.
Top comments (0)