Typescript
TypeScript Variable, Annotation and Inference Learning
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
Basic TypeScript Types to learn - Complete Types in TypeScript
TypeScript Function, Return types, Rest Parameters
All Tutorials in this playlist
Popular Tutorials
Categories
-
Artificial Intelligence (AI)
11
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
14
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
Computer Engineering
3
-
CSS
28
-
Data Structure and Algorithm
18
-
Design Pattern in PHP
2
-
Design Patterns - Clean Code
1
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
12
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
8
-
Python
12
-
React Js
19
-
React Native
1
-
Redux
2
-
Rust Programming
15
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Artificial Intelligence (AI)
- Bash Scripting
- Business
- C
- C Programming
- C-sharp programming
- C++
- Code Editor
- Computer Engineering
- CSS
- Data Structure and Algorithm
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- Rust Programming Language
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development