Skip to content

Courses
Tutorials
Practice
Contests

TypeScript Tutorial
TS Exercise
TS Interview Questions
TS Cheat Sheet
TS Array
TS String
TS Object
TS Operators
TS Projects
TS Union Types
TS Function
TS Class
TS Generic

TypeScript Type Annotations on Variables

What is Type Annotations in TypeScript ?

Last Updated : 21 Jan, 2025

Comments

Improve

Suggest changes

Like Article

Like

Report

TypeScript Type Annotations allow developers to explicitly define the types of variables, functions, and other elements in the program.

They help catch mistakes early by ensuring the right data type is used.
They make the code easier to understand and follow.
Type Annotations help avoid errors and make the code more reliable.

JavaScript

const str: string = "GeeksforGeeks"; const num: number = 6; const arr: (number | string)[] =      ["GFG", "TypeScript", 500, 20];  console.log(typeof str); console.log(typeof num); console.log(arr);

str is assigned the type string, so it will only accept string values.
num is a number type, ensuring it will only store numbers.
arr is an array that can hold both number and string types.

Output:

string number ["GFG", "TypeScript", 500, 20]

More Examples of Type Annotations

Function with Type Annotations

JavaScript

function greet(name: string): string { return `Hello, ${name}!`; }

The greet function accepts a parameter name of type string and returns a string.
This ensures that both the input and output are of the expected types, preventing type-related errors.

Object with Type Annotations

JavaScript

const person: { name: string; age: number } = { name: "Alice", age: 30 };

The person object is explicitly typed to have a name of type string and an age of type number.
This enforces the structure of the object, ensuring it adheres to the specified types.

Array with Type Annotations

JavaScript

const numbers: number[] = [1, 2, 3, 4, 5];

The numbers array is annotated to contain only number elements.
This prevents the inclusion of elements of other types, maintaining type safety.

Class with Type Annotations

JavaScript

class Rectangle {     width: number;     height: number;      constructor(width: number, height: number) {         this.width = width;         this.height = height;     }      area(): number {         return this.width * this.height;     } }

The Rectangle class has width and height properties, both of type number.
The area method returns a number, representing the area of the rectangle.

TypeScript Type Annotations on Variables

A

abhish8rzd

Improve

Article Tags :

JavaScript
Web Technologies
TypeScript
JavaScript-QnA
WebTech-FAQs

Similar Reads

What is the Function type in TypeScript ?

TypeScript is a JavaScript-based programming language with a typed syntax. It provides improved tools of any size. It adds extra syntax to JavaScript. This helps in facilitating a stronger interaction between you and your editor. It also helps in catching the mistakes well in advance.Â It uses type

What is Type Erasure in TypeScript?

TypeScript is a very mighty superset of JavaScript, which adds static typing to the language and allows developers to catch errors early on as well as write more maintainable code. This being said a TypeScript type system erases type information at compile time (or during the compilation), a phenome

TypeScript Return Type Annotations

TypeScript Return Type Annotations allow you to define the expected return type of a function, enhancing code clarity and type safety. By specifying the return type (functionName(): ReturnType), you ensure the function returns the correct type, catching mismatches and reducing potential errors durin

TypeScript Type Annotations on Variables

TypeScript is a statically typed superset of JavaScript that brings the benefits of strong typing to the JavaScript ecosystem. One of its key features is the ability to add type annotations to variables, which helps developers catch type-related errors at compile time rather than runtime. In this ar

What is Declaration Merging in Typescript ?

In Typescript, the term "declaration merging" refers to the compiler combining two declarations with the same name into a single definition. Both of the initial declarations are present in this combined definition. It is possible to merge Interfaces, namespaces and enums and so on but classes cannot

TypeScript Parameter Type Annotations

TypeScript Parameter type annotations are used to specify the expected data types of function parameters. They provide a way to explicitly define the types of values that a function expects as arguments. Parameter type annotations are part of TypeScript's static typing system, and they help catch ty

What is Type Predicates in Typescript ?

In this article, we are going to learn about the type predicates in Typescript. TypeScript is a statically typed programming language that provides many features to make your code more efficient and robust. Type predicates in TypeScript are functions that return a boolean value and are used to narro

TypeScript - Type Annotations and Type Inference

TypeScript is a superset of JavaScript that adds static typing, helping developers catch errors early. Two core features are type annotations- where developers explicitly define variable, parameter, and return types, and type inference, where TypeScript automatically deduces types based on values or

What are intersection types in Typescript ?

In Typescript, Although intersection and union types are similar, they are employed in completely different ways. An intersection type is a type that merges several kinds into one. This allows you to combine many types to create a single type with all of the properties that you require. An object of

Explain Type assertions in TypeScript

In TypeScript, type assertions allow developers to override the compiler's inferred type, informing it of the specific type of a value. Type assertions are purely compile-time constructs and do not alter the runtime behavior of the code. They are particularly useful when interfacing with APIs or thi

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences