Prototype Method - JavaScript Design Pattern

TypeScript Declaring this in a Function

Last Updated : 24 Apr, 2025

TypeScript Declaring this in a Function, where 'this' in TypeScript refers to an object's current instance in a function, granting access to its properties and methods. It's essential to declare 'this' types for safety while using functions in TypeScript and properly declare the type of 'this'.

Syntax:

const myFunction = (param1: number, param2: string) => {
    // 'this' automatically captures 
    // the surrounding 'this' context
    this.someMethod();
};

Parameters:

myFunction: This is the name of the function
param1, param2: These are the parameters that are passed to this function
number, string: These are types of param1, param2 respectively
this: This keyword will used to refer to the current instance of an object within a function

Example 1: In this example, we will see This TypeScript code showcases explicit 'this' type annotation within object methods, ensuring precise context adherence to defined interfaces, and enforcing strict typing for the 'this' keyword within objects.

JavaScript

interface Course {
    course: string;
    id: string;
    changeCourse: () =&gt; void;
}

const gfg: Course = {
    course: 'Typescript',
    id: '768',
    changeCourse: function (this: Course) {
        this.course = 'React';
    },
};

console.log(&quot;Previous Course: &quot; + gfg.course);
gfg.changeCourse();
console.log(&quot;New Course: &quot; + gfg.course);

Output:

Previous Course: Typescript
New Course: React

Example 2: In this example, The code demonstrates a personalized greeting function utilizing explicit context binding through TypeScript's this parameter, addressing users by name.

JavaScript

function greet(this: { name: string }, greeting: string) {
    console.log(`${greeting}, ${this.name}!`);
}

const person = { name: 'GeeksforGeeks' };
greet.call(person, 'Hello');

Output:

Hello, GeeksforGeeks!

Example 3: In this example, we will see 'this' is not working in the arrow function. In this example,We have an arrow function assigned to hello that is trying to access object property using this, but it cannot access. However, since arrow functions don't have their own this context, the this inside hello doesn't reference the obj object.

JavaScript

let obj = {
    username: ' GeeksforGeeks',
    hello: () =&gt; 'hello, ' + this.username
};
console.log(obj.hello());

Output:

Cannot read properties of undefined (reading 'username')

Conclusion : In this article we learnt that this keyword is used to refer to the current instance of an object within a function or method. It allows you to access properties and methods of the object from within the function.

Prototype Method - JavaScript Design Pattern

21mcsrltd

Improve

Article Tags :

Similar Reads

Explain the arrow function syntax in TypeScript

Arrow functions in TypeScript are implemented similarly to JavaScript (ES6). The main addition in TypeScript is the inclusion of data types or return types in the function syntax, along with the types for the arguments passed into the function. What is arrow function syntax in TypeScript?Arrow funct

TypeScript Assertion functions

TypeScript Assertion functions are nothing but the functions that allow us to mainly create the custom type guards that assert the type of a value on our specific criteria. The most suitable use of Assertion Functions is when we are working with the more complex data structures. Syntax:function asse

How to Declare a Function that Throws an Error in TypeScript ?

In this article, we are going to declare the functions that throw errors in TypeScript. A function can throw an error if the logic is not correct or you can deliberately declare the function that always throws an error. A function can be created with the different return types with the required type

How to Type an Async Function in TypeScript ?

To type an asynchronous function in TypeScript, you can use the Promise type to denote that the function returns a promise. Syntax:async function functionName(parameters: ParameterTypes): Promise<ReturnType> { // Asynchronous logic here return await someAsyncOperation(); // or any other asynch

TypeScript Function Type Expressions

In this article, we are going to learn about TypeScript Function Type Expressions in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. In TypeScript, a function type expression represents the type of a function, including its parameter types

What are Arrow/lambda functions in TypeScript ?

Arrow functions in TypeScript (also known as lambda functions) are concise and lightweight function expressions using the => syntax. Provide a shorter syntax for defining functions.Automatically bind the context of their surrounding scope.It is commonly used for callbacks, array methods, and simp

TypeScript - Generic Functions and Generic Classes

Generics in TypeScript enable functions and classes to work with multiple data types while ensuring type safety. Generic functions provide reusable logic that adapts to various inputs, while generic classes help define flexible and type-safe structures. Generic FunctionsA generic function allows you

TypeScript Function

TypeScript functions are blocks of reusable code designed to perform specific tasks. They support object-oriented programming principles like classes and polymorphism. Functions can include type annotations for parameters and return values, enhancing code clarity, safety, and maintainability. Syntax

TypeScript Functions Type

TypeScript function types define the structure of a function, including its parameter types and return type, ensuring consistent and type-safe usage. Help validate the types of parameters passed to a function.Ensure the function returns the expected type.Improve code clarity and prevent runtime erro

TypeScript Generic Functions

TypeScript generic functions allow you to create functions that work with various types while maintaining type safety. By using type parameters, defined within angle brackets (<T>), generics enable functions to operate on different data types without losing the benefits of TypeScript's type-ch