How To Declare Function With A Readonly Return Type In TypeScript

Posted on by Brent Johnson
How To Declare Function With A Readonly Return Type In TypeScript

Use Readonly Utility type can help you declare function with a Readonly return type in TypeScript. So how to do it? Let’s go into detail now.

Declare function with a readonly return type in TypeScript

Use Readonly Utility type

The Readonly utility type will help you to create a type with all properties of that Type set to readonly. Which means all properties of that construction cannot be reassigned.

Syntax:

Readonly<Type>

Example:

type detailInfor = {
    name: string,
    age: number,
    country: string
};

let person1: Readonly<detailInfor> = {
    name: "James",
    age: 28,
    country: "England"
};

let person2: detailInfor = {
    name: "Antong",
    age: 25,
    country: "Italy"
};

person1.name = "Techi"; // Cannot assign to 'name' because it is a read-only property
console.log(person1);

person2.age = 26;
console.log(person2);

Output:

[LOG]: {
  "name": "Techi",
  "age": 28,
  "country": "England"
} 
[LOG]: {
  "name": "Antong",
  "age": 26,
  "country": "Italy"
}

So we can apply the Readonly utility type to declare a function with a readonly return type in this way.

Example:

function returnLog(): Readonly<string> {
    return "Hello From Learn Share IT";
}

let log = returnLog();
console.log(log); // "Hello From Learn Share IT"
log = "Hi";
console.log(log); // "Hi"
  
function returnNumber(): Readonly<number> {
    return 9;
}

let anNumber = returnNumber();
console.log(anNumber); // 9
anNumber = 10;
console.log(anNumber); // 10

function returnArray(): Readonly<string[]> {
    return [
        "African Forest Elephant",
        "African Spurred Tortoise",
        "American Oystercatcher Bird",
    ];
}

let anArray = returnArray();
anArray[5] = "Cats"; // Index signature in type 'readonly string[]' only permits reading.

function returnObject(): Readonly<{
    name: string;
    age: number;
    country: string;
}> {
    return {
        name: "Antony",
        age: 30,
        country: "Italy",
    };
}

let anObj = returnObject();
anObj.name = "Hani"; // Cannot assign to 'name' because it is a read-only property.

Here I can reassign to string and number type but not with the element in object and array.

Use Readonly with specific typetype

Or you can also set the Readonly function returned by a specific type after Readonly. It works the same.

Example:

function returnArray(): ReadonlyArray<string> {
    return [
        "African Forest Elephant",
        "African Spurred Tortoise",
        "American Oystercatcher Bird",
        "Axolotl",
        "Black Mamba Snakes",
        "British Wild Cats"
    ];
}

const anArray = returnArray();
console.log(anArray);

Output:

[LOG]: ["African Forest Elephant", "African Spurred Tortoise", "American Oystercatcher Bird", "Axolotl", "Black Mamba Snakes", "British Wild Cats"]

Summary

In this tutorial, we have just explained how to declare function with a Readonly return type in TypeScript. You can use the Readonly utility type. We hope it is helpful to you. Thanks for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *