TypeScript String Data Type

In TypeScript, the string data type is useful to define variables to accept only textual data. Same like JavaScript, the TypeScript also use double quotes (") or single quotes (') to surround string data.

TypeScript String Type Syntax

Following is the syntax of defining the variables with string type in typescript.

 

[Keyword] [Variable Name]: [string] = [Value];

[Keyword] [Variable Name]: [string];

If you observe the above syntax, we added a string data type after the variable name to tell the compiler that the string type of data the variable can hold.

 

  • [Keyword] - It’s a keyword of the variable either var, let or const to define the scope and usage of variable.
  • [Variable Name] - Its name of the variable to hold the values in our application.
  • [string] - It’s a string type of data the variable can hold.
  • [Value] - Assigning a required value to the variable.

Now, we will learn how to use string data types in TypeScript with examples.

TypeScript String Data Type Example

Following is the example of defining the variables with string data type in typescript.

 

let uname: string = "Suresh Dasari";

let ulocation: string = 'Hyderabad';

let ueducation: string = "B.Tech"

 

console.log(uname); // Suresh Dasari

console.log(ulocation); // Hyderabad

console.log(ueducation); // B.Tech

If you observe the above string type example, we defined multiple variables with string type to hold the required values using both single quote (') and double quote (") based on our requirements.

TypeScript Template Strings

In ES6, the template strings have been introduced to support multiline and embedded expressions in strings. From 1.4 version, the TypeScript also supporting template strings to embed expressions into the string.

 

In typescript, the template strings can be created by surrounding the strings with backtick/backquote (`) character and the expressions can be embedded into strings by using $ character like ${expression}.

 

Following is the example of creating template strings with embedding expressions in typescript.

 

let uname: string = "Suresh Dasari";

let ulocation: string = 'Hyderabad';

// Normal string

let nstr: string = uname + " staying in " + ulocation;

// Template string

let tstr: string = `${uname} staying in ${ulocation}`

console.log(nstr); // Suresh Dasari staying in Hyderabad

console.log(tstr); // Suresh Dasari staying in Hyderabad

You can also create multi-line strings with embedded expressions by using template strings in typescript like as shown below.

 

// Multi-line Normal String

let msg: string = "Hello, " + uname + "\n" + "You are from " + ulocation + ". Enjoy Learning";

console.log(msg);

// Multi-line Template String

let msg1: string = `Hello, ${uname}

You are from ${ulocation}. Enjoy Learning`

console.log(msg1);

The above example will return the result like as shown below.

 

Hello, Suresh Dasari

You are from Hyderabad. Enjoy Learning

Hello, Suresh Dasari

You are from Hyderabad. Enjoy learning

This is how we can use template strings in typescript to define multi-line strings and embedded expressions in strings.

TypeScript String Type Methods

Following are the different type of methods available for string type in typescript.

 

MethodDescription
charAt() It will return the character at the specified index.
charCodeAt() It will return the Unicode value of the character at the specified location.
concat() It will return a string that contains the concatenation of two or more strings.
indexOf() It will return the position of the first occurrence of a substring.
match() It will match a string with a regular expression, and returns an array containing the results of that search.
replace() It will replace text in a string, using a regular expression or search string.
search() It will return the first substring match in a regular expression search.
split() It will split a string into substrings using the specified separator and return them as an array.
slice() It will return the section of a string.
startsWith() It will return true if string starts with specified substring otherwise it will return false.
endsWith() It will return true if string ends with specified substring otherwise it will return false.
substr() It will return a substring beginning at the specified location and having the specified length.
substring() It will return the substring at the specified location within a String object.
toLowerCase() It will convert all the alphabetic characters in a string to lowercase.
toUpperCase() It will convert all the alphabetic characters in a string to uppercase.
trim() It will remove the leading and trailing white space and line terminator characters from a string.
valueOf() It will return the primitive value of the specified object.

TypeScript String Type Methods Example

Following is the example of using string type methods in typescript.

 

let str1: string = 'Learn';

let str2: string = ' Typescript'

// concat() Method

console.log(str1.concat(str2)); // Learn Typescript

// Upper or Lower Case Methods

console.log(str1.toUpperCase()); // LEARN

console.log(str2.toLowerCase()); //  typescript

// IndexOf() Method

console.log(str1.indexOf('a')); // 2

console.log(str2.indexOf('p')); // 3

// chartAt() Method

console.log(str1.charAt(4)); // n

console.log(str2.charAt(6)); // c

// replace() Method

let str3: string = 'Hi Tutlane';

console.log(str3.replace('Hi', 'Welcome to')); // Welcome to Tutlane

// split() Method

let str4: string = 'Suresh, Rohini, Trishi';

console.log(str4.split(',')); // [ 'Suresh', ' Rohini', ' Trishi' ]

console.log(str4.split(',', 1)); // [ 'Suresh' ]

If you observe the above example, we used different methods of string type based on our requirements.

 

This is how we can use string type in typescript to define the variables to accept textual data based on our requirements.

Topics Covered