CompileTab

How to bind events in Vue.js?

Vue.js makes use of v-on directive to listens to events. Using v-on we can call a method whenever an event is triggered. For example, to show a message when user clicks on a button. <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <div>Click to generate a random number</div> <button>Click Here!</button> </div> </body> </html> In this example, we have a button that generates a random number every time the user clicks the button....

How to output raw HTML using v-html in Vue.js?

When you output data in Vue.js using the double curly bracket {{}}, it is interpreted as plain text. For example, Let’s say we have a data property title that holds the title string along with some HTML tags in it. <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <div>{{title}}</div> </div> </body> <script> const { createApp } = Vue; createApp({ data() { return { title: "<h2> Getting started with Vue....

How to bind href attribute using v-bind in Vue.js?

In this article, we will look at how to use the v-bind directive to assign values to the href attribute. Let’s begin by writing a simple index.html that will contain an anchor tag for us to work with. We will be making use of Vue.js cdn in this example. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> Html code: <!DOCTYPE html> <html lang="en"> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <title>Vue.Js</title> </head> <body> <div id="app"> <a href="">Google</a> </div> </body> </html> Let’s create a new application instance using createApp() function in the same file inside a script tag....

How to implement generic classes in TypeScript?

Generic classes in TypeScript are useful when you want to deal with multiple data types. A generic class can be defined by having angle brackets containing a generic type parameter list after the class name. Let’s first look at how we define a regular class in TypeScript. class List { elements: string[] = []; addToList(value: string) { this.elements.push(value); } } let list = new List(); We have a class List with field elements and a method addToList() which simply pushes values passed to it....

How to implement generic functions in TypeScript?

Generic functions are functions that are capable of accepting different data types as arguments and are also capable of returning different data types as return values. In this article, we will look at how to declare and implement generic functions in TypeScript. Generic function We will first look at how functions are declared in TypeScript. We will start by creating a simple function that takes one argument and returns the argument value....

How to implement function overloading in TypeScript?

Function overloading allows us to declare multiple functions with the same name but with different parameters and implementations. It is possible to overload functions in TypeScript. function display(message: string | number) { if (typeof message === "string") { return message.toUpperCase(); } return message; } We have a function display() which takes a string or a number as a parameter. If the parameter is a string, it returns the string converted to uppercase, and if the parameter is a number, it simply returns the number....

What are discriminated unions and how to implement them in TypeScript?

A Discriminated union in TypeScript is used to discriminate between union types by having a property that holds a literal type as its value to help us identify the type of object we are working with. Let us look at an example, to understand this concept better. interface Developer { type: "developer"; language: string; } interface DBA { type: "dba"; database: string; } type Employee = Developer | DBA; function getInfo(employee: Employee) { switch (employee....

What are type guards and how to implement them in TypeScript?

Type Guard is simply a technique of checking if a certain property or method exists before we try to use it. To understand why we might need this feature in TypeScript, let’s look at an example, type Message = string; function display(message: Message) { console.log(message.toLowerCase()); } display("HELLO"); // hello In the above example, we have a function display() that takes a single parameter of type Message. The type of Message is a string for now....

What are intersection Types and how to implement them in TypeScript?

Intersection types in TypeScript are used when you want to combine multiple types into a single type. We make use of the & symbol to combine multiple types. For example, type Animal = { name: string, height: number, weight: number, }; type Nature = { friendly: boolean, }; type Dog = Animal & Nature; let dog: Dog = { name: "Bruno", height: 1, weight: 1, friendly: true, }; console.log(dog); // {name: 'Bruno', height: 1, weight: 1, friendly: true} In this example, we have a type Animal that has name, height, and weight properties....

TypeScript: How to declare optional properties in interfaces?

To declare a property of an interface as optional in TypeScript, we need to add ? after the property name. For example, if a property name is age and we want it to be optional then we need to write it as age?. interface Animal { name: string; age?: number; } let dog1: Animal = { name: "Bruno", }; let dog2: Animal = { name: "Rocky", age: 1, }; console.log(dog1); // {name: 'Bruno'} console....