String replaceAll in TypeScript: Solutions and Configuration

The replaceAll() method provides a clean way to replace all occurrences of a substring in JavaScript strings, but TypeScript developers often encounter the error: "Property 'replaceAll' does not exist on type 'string'." This article explains why this occurs and presents the best solutions.

Problem: TypeScript Doesn't Recognize replaceAll

When you try to use replaceAll() in TypeScript:

let date = "1399/06/08"
console.log(date.replaceAll('/', '_')) // Error: Property 'replaceAll' does not exist

TypeScript throws an error because replaceAll() was introduced in ES2021, and TypeScript's default configuration may not include the latest ECMAScript features.

Solution 1: Configure TypeScript Compiler (Recommended)

The most sustainable solution is to update your TypeScript configuration to support ES2021 features.

Update tsconfig.json

Set the target and lib options in your tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2021",
    "lib": [
      "ES2021",
      "DOM" // Include DOM if working in browser environments
    ]
  }
}

Alternatively, if you only need string functionality:

{
  "compilerOptions": {
    "lib": [
      "ES2021.String"
    ]
  }
}

TIP

If you're already using a lib configuration, ensure it includes ES2021 features. Mixing specific libs with a target may override the default library inclusions.

Solution 2: Regular Expression Alternative

If you can't update your TypeScript configuration, use the traditional regex approach:

let date = "1399/06/08"
console.log(date.replace(/\//g, '_')) // Output: 1399_06_08

For dynamic replacements:

function replaceAll(str: string, search: string, replacement: string): string {
  return str.replace(new RegExp(search, 'g'), replacement)
}

let date = "1399/06/08"
console.log(replaceAll(date, '/', '_')) // Output: 1399_06_08

Solution 3: Split and Join Method

Another reliable cross-platform approach:

let date = "1399/06/08"
console.log(date.split('/').join('_')) // Output: 1399_06_08

Solution 4: TypeScript Interface Extension (Temporary Fix)

If you need a quick workaround, extend the String interface:

Create a custom.d.ts file:

interface String {
  replaceAll(input: string, output: string): string
}

Then use type assertion:

let date = "1399/06/08" as any
console.log(date.replaceAll('/', '_'))

WARNING

This approach only suppresses TypeScript errors but doesn't guarantee runtime compatibility. Ensure the method exists in your target environments.

Browser Compatibility Check

As of 2023, replaceAll() is supported in all modern browsers:

• Chrome 85+
• Firefox 77+
• Safari 13.1+
• Edge 85+

INFO

Check current browser support at caniuse.com/replaceall before using replaceAll() in client-side code.

Best Practices

1. Update TypeScript configuration for long-term maintainability
2. Consider target environments - if supporting older browsers, use alternative methods
3. Use regex escape properly when using the regex approach for special characters

// Properly escape special regex characters
function escapeRegExp(string: string): string {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

function safeReplaceAll(str: string, search: string, replacement: string): string {
  return str.replace(new RegExp(escapeRegExp(search), 'g'), replacement)
}

Conclusion

The replaceAll() method is now widely supported, but TypeScript requires proper configuration to recognize it. For most projects, updating tsconfig.json with "target": "ES2021" is the recommended approach. For environments where you can't control TypeScript configuration, the regex or split/join methods provide reliable alternatives.