TypeScript String: Interpolation, Multiline and Contains

A TypeScript string is a JavaScript string with the type string. For interpolation, write a template literal: backticks with ${expression} placeholders. Single and double quotes make plain strings with no interpolation.

const author: string = "Ada";
const year = 1843;

// String interpolation with a template literal
const intro = `${author} published her notes in ${year}.`;
console.log(intro);

// Any expression works inside ${ }
const price = 19.5;
const qty = 3;
console.log(`Total: $${(price * qty).toFixed(2)}`); // Total: $58.50
console.log(`${qty > 1 ? "items" : "item"} in cart: ${qty}`);

All three quote styles produce the same type, string. The first $ in $${...} is a literal dollar sign; only ${ starts a placeholder.

String Interpolation

Inside ${ } you can put a variable, arithmetic, a function call, a ternary or a nested template literal. The value is converted to a string the same way String(value) would convert it (a symbol is the exception: interpolating one is compile error TS2731, and it would throw a TypeError at runtime; write String(sym)).

type User = { name: string; roles: string[]; lastLogin: Date | null };

const user: User = {
    name: "grace",
    roles: ["admin", "editor"],
    lastLogin: new Date("2024-03-15T10:30:00Z"),
};

const capitalize = (s: string) => s[0].toUpperCase() + s.slice(1);

console.log(`User: ${capitalize(user.name)}`);
console.log(`Roles: ${user.roles.join(", ")}`);
console.log(`Last login: ${user.lastLogin?.toISOString() ?? "never"}`);
console.log(`Raw array: ${user.roles}`); // arrays join with commas

Interpolating an object prints [object Object], which is almost never what you want. Pick the fields, or use JSON.stringify(obj).

Multiline Strings

A template literal can span lines. The newlines are kept, and so is any indentation at the start of each line, because everything between the backticks is part of the string.

const poem = `Roses are red,
Violets are blue,
Types are erased,
And so are you.`;
console.log(poem);

function card(title: string, body: string): string {
    return `
    [${title}]
    ${body}`; // the leading spaces and first newline are in the string
}
console.log(JSON.stringify(card("Note", "Hi")));

// Alternatives without the indentation problem:
const lines = ["first line", "second line"].join("\n");
console.log(lines);

When the indentation of your code would leak into the string, build it with an array and join("\n"), or keep the template literal's lines flush with the start of the line.

Checking if a String Contains a Substring

includes answers "does it contain" with a boolean. startsWith and endsWith check the ends. indexOf gives the position, or -1 when the substring is absent. All of them are case-sensitive.

const file = "Report-2024.PDF";

console.log(file.includes("2024"));    // true
console.log(file.includes("pdf"));     // false: case-sensitive
console.log(file.toLowerCase().endsWith(".pdf")); // true
console.log(file.startsWith("Report")); // true
console.log(file.indexOf("-"));        // 6
console.log(file.indexOf("x"));        // -1

// A regular expression for patterns, with the i flag for case-insensitive
console.log(/report-\d{4}/i.test(file)); // true

includes also accepts a start position: file.includes("R", 1) only searches from index 1.

Common Methods and Their Types

TypeScript knows the return type of every built-in method. The ones that can come back empty are the ones to watch, because under strict you must handle null or undefined before using the result.

const log = "error=404 path=/users";

const match = log.match(/error=(\d+)/);
// match is RegExpMatchArray | null: check before indexing
if (match) {
    console.log(Number(match[1])); // 404
}

const last = "abc".at(-1); // string | undefined
console.log(last?.toUpperCase()); // C

const parts = log.split(" ").map((p) => p.split("="));
console.log(parts); // [ [ 'error', '404' ], [ 'path', '/users' ] ]

Plain indexing, s[5], has type string even when the index is past the end (where the value is undefined at runtime). The compiler option noUncheckedIndexedAccess makes it string | undefined instead.

Strings Are Immutable

You cannot change a character in place. TypeScript reports assignment to an index as error TS2542, Index signature in type 'String' only permits reading., and in the strict-mode JavaScript it compiles to, the same assignment would throw a TypeError at runtime. Every method that seems to modify a string returns a new one.

let word = "hello";

// @ts-expect-error: Index signature in type 'String' only permits reading.
const change = () => { word[0] = "H"; };

word = "H" + word.slice(1); // build a new string instead
console.log(word);          // Hello

To turn other values into strings, or strings into numbers, see string to number.

String Literal Types

string accepts any text. A string literal type accepts one exact value, and a union of them makes an enum-like set of allowed strings:

type Status = "draft" | "published" | "archived";

function label(status: Status): string {
    return `Post is ${status}`;
}

console.log(label("draft"));
// @ts-expect-error: Argument of type '"deleted"' is not assignable to parameter of type 'Status'.
console.log(label("deleted"));

The literal types are checked only at compile time; at runtime label("deleted") would still run and print Post is deleted, which is what the second line does here. Template literal syntax also works at the type level, as in type EventName = `on${string}`, which accepts any string that starts with on.