5 ways to convert any to string in typescript:
We have to use any type in many cases in TypeScript. For example, if the response data type is unknown for an API request or third-party module, we can use any as the data type.
But if we want the data as string type, we need to convert the any type to string. We have two different ways in TypeScript to convert any to string. Let’s have a look:
Method 1: By using the toString() method:
The toString() method converts a value to string. We can use it to convert a value of any type to string type. The below example shows how we can use the toString() method with different types of data, or with any type:
function getStringValue(value: any): string {
return value.toString();
}
console.log(getStringValue(19));
console.log(getStringValue(19.4890));
console.log(getStringValue('hello'));
console.log(getStringValue(true));It will print the below output:
"19"
"19.489"
"hello"
"true"In this example, we have used the toString() method with number, string and boolean values. Note that it will not work with undefined. For undefined, it will throw an error: TypeError: Cannot read properties of undefined (reading 'toString'). We can use the optional operator ? to handle that:
function getStringValue(value: any): string {
return value?.toString();
}
console.assert(getStringValue(19) === "19", 'Test 1');
console.assert(getStringValue(19.489) === "19.489", 'Test 2');
console.assert(getStringValue("hello") === "hello", 'Test 3');
console.assert(getStringValue(true) === "true", 'Test 4');
console.assert(getStringValue(undefined) === undefined, 'Test 5');
console.assert(getStringValue(null) === undefined, 'Test 6');Download this program on GitHub
The getStringValue method will return undefined for an undefined or null value.
Method 2: By using the String() constructor:
Using the string constructor, we can convert any to string. Let me re-write the same program with String:
function getStringValue(value: any): string {
return String(value);
}
console.assert(getStringValue(19) === "19", 'Test 1');
console.assert(getStringValue(19.489) === "19.489", 'Test 2');
console.assert(getStringValue("hello") === "hello", 'Test 3');
console.assert(getStringValue(true) === "true", 'Test 4');
console.assert(getStringValue(undefined) === "undefined", 'Test 5');
console.assert(getStringValue(null) === "null", 'Test 6');Download this program on GitHub
Note that for undefined and null, it returns 'undefined' and 'null' respectively.
Method 3: By appending an empty string:
If we append an empty string to another value, it will return a string. For example:
function getStringValue(value: any): string {
return value + "";
}
console.assert(getStringValue(19) === "19", "Test 1");
console.assert(getStringValue(19.489) === "19.489", "Test 2");
console.assert(getStringValue("hello") === "hello", "Test 3");
console.assert(getStringValue(true) === "true", "Test 4");
console.assert(getStringValue(undefined) === "undefined", "Test 5");
console.assert(getStringValue(null) === "null", "Test 6");Download this program on GitHub
Similar to the String() constructor, it will return 'undefined' and 'null' for undefined and null values.
Method 4: With string literal:
Starting ES6, we can also use string literal and the above example will look as below:
function getStringValue(value: any): string {
return `${value}`;
}
console.assert(getStringValue(19) === "19", "Test 1");
console.assert(getStringValue(19.489) === "19.489", "Test 2");
console.assert(getStringValue("hello") === "hello", "Test 3");
console.assert(getStringValue(true) === "true", "Test 4");
console.assert(getStringValue(undefined) === "undefined", "Test 5");
console.assert(getStringValue(null) === "null", "Test 6");Download this program on GitHub
It is similar to the previous example.
Method 5: How to handle JSON values:
If we use any of the previous methods, it will return [object Object] for any JSON object. To convert a JSON object to a string, we need to use the JSON.stringify() method. We can check the type of the parameter and based on its type, we can perform different operations.
For example,
function getStringValue(value: any): string {
if (typeof value === "object") return JSON.stringify(value);
return `${value}`;
}
console.assert(getStringValue(19) === "19", "Test 1");
console.assert(getStringValue(19.489) === "19.489", "Test 2");
console.assert(getStringValue("hello") === "hello", "Test 3");
console.assert(getStringValue(true) === "true", "Test 4");
console.assert(getStringValue(undefined) === "undefined", "Test 5");
console.assert(getStringValue(null) === "null", "Test 6");
console.assert(
getStringValue({ id: 1, name: "Alex" }) === '{"id":1,"name":"Alex"}',
"Test 7"
);Download this program on GitHub
We are using the typeof operator to get the type of a value. If it is an object, it will return the result of JSON.stringify() method.
