TypeScript Variable, Annotation and Inference
In this article, we will discuss variables in TypeScript, including variable declaration and initialization, type annotations, and type inference. We will provide examples to help you better understand how variables work in TypeScript.
¶Variable Declaration and Initialization
In TypeScript, variables can be declared using the let, const, or var keywords and is actually same as JavaScript. Mainly the code which works in JavaScript, would also works in TypeScript.
Here’s an example of declaring a variable using let
:
let message: string;
message = "Hello TypeScript!";
console.log(message); // Hello TypeScript!
In this example, we declare a variable called message
using the let keyword. We also specify the type of the variable as string. Then, we assign a value of “Hello TypeScript!” to the variable, and log the value to the console.
We can also declare and initialize a variable in a single statement, like this:
let greeting: string = "Hello World!";
console.log(greeting); // Hello World!
In this example, we declare a variable called greeting
and assign a value of “Hello World!” to it in the same statement. The type of the variable is inferred from the assigned value.
¶Type Annotations
Type annotations are used to specify the type of a variable, function parameter, or function return type. They are useful for adding clarity to your code and catching type-related errors early.
Here’s an example of using type annotations to specify the type of a variable:
let age: number;
age = 30;
console.log(age);
In this example, we declare a variable called age and specify its type as number using a type annotation. Then, we assign a value of 30 to the variable, and log the value to the console.
Now, if we want to assign like without a number value, then it will give us the errors -
age = "10"; // ❌
Type annotations can also be used to specify the types of function parameters and return types. Here’s an example:
function multiply(a: number, b: number): number {
return a * b;
}
let result = multiply(2, 3);
console.log(result);
In this example, we define a function called multiply
that takes two parameters, both of type number. We also specify the return type of the function as number. Inside the function, we multiply the two parameters and return the result.
¶Type Inference
Type inference is a feature of TypeScript that allows the compiler to automatically determine the type of a variable based on its assigned value. This can help to reduce the amount of code you need to write, and make your code more concise and readable.
Here’s an example of using type inference to determine the type of a variable:
let username = "john.doe";
console.log(`Welcome, ${username}!`);
In this example, we declare a variable called username
and assign a value of “john.doe” to it. We do not specify the type of the variable, so TypeScript infers that it is a string. We then log a welcome message to the console using string interpolation.
Type inference can also be used with function parameters and return types. Here’s an example:
function greet(name: string) {
console.log(`Hello, ${name}!`);
}
greet("John");
In this example, we define a function called greet
that takes a parameter of type string
. We do not specify a return type for the function, so TypeScript infers that it returns void. Inside the function, we log a greeting
message to the console using
Typescript
All Tutorials in this playlist
Popular Tutorials
Categories
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
8
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
CSS
2
-
Design Pattern in PHP
2
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
11
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
7
-
Python
1
-
React Js
19
-
React Native
1
-
Redux
2
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Bash Scripting
- Business
- C
- C-sharp programming
- C++
- Code Editor
- CSS
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development