ChatGPT解决这个技术问题 Extra ChatGPT

Property 'replaceAll' does not exist on type 'string'

I want to use replaceAll in typescript and angular 10.

But I get this error: Property 'replaceAll' does not exist on type 'string'.

This is my code:

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

Output: 13990608

How can fix my typescript to show me this function?

TypeScript can't magically add a function that your browser doesn't implement. You'll need to implement one of the replacement methods mentioned in the linked question in Michael D's answer.
date.split('/').join('_') you can use this as of now. Although you can update to chrome85.
I want to use in vscode I have this error in vscode
@behroozbc you can try with latest typescript version.

b
behroozbc

You should be able to add those typings through your tsconfig.json. Add "ES2021.String" to lib inside compilerOptions.

Your tsconfig should then look something like this:

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

The replaceAll method is defined inside lib.es2021.string.d.ts as follows:

interface String {
    /**
     * Replace all instances of a substring in a string, using a regular expression or search string.
     * @param searchValue A string to search for.
     * @param replaceValue A string containing the text to replace for every successful match of searchValue in this string.
     */
    replaceAll(searchValue: string | RegExp, replaceValue: string): string;

    /**
     * Replace all instances of a substring in a string, using a regular expression or search string.
     * @param searchValue A string to search for.
     * @param replacer A function that returns the replacement text.
     */
    replaceAll(searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string;
}

found the lib.esnext.string.d.ts file the functions are declared as in your code not sure what you mean by "add those typings through your tsconfig.json" can you elaborate
@KukulaMula I added a template to my answer. What I meant was, to add ESNext.String to lib inside you tsconfig.json.
This removes the lint error but when I try to run, I get an error saying An unhandled exception occurred: tsconfig.json:21:7 - error TS6046: Argument for '--lib' option must be: 'es5', 'es6', 'es2015',... with a long list of options but none of them are ESNext.String and it won't compile.
@StackUnderflow Maybe your TS version is too low, I believe it was added in TS 2.4, following this commit
@Josef mine is 3.8.3, not the latest but not too old.
Z
Zoe stands with Ukraine

You may solve the problem using RegExp and global flag. The global flag is what makes replace run on all occurrences.

"1399/06/08".replace(/\//g, "_") // "1399_06_08"

this doesn't "resolve the problem". This is another way to replace all the occurrences. But if you want to continue using replaceAll, this doesn't resolve the issue of the OP.
This question is about TypeScript compatibility with String.replaceAll() not a request for a workaround.
@bokkie In my case it solved the issue. I'm using react native and changing the compiler options doesn't actually update the javascript, so this is really the only solution.
r
ruth

From the docs:

As of August 2020 the replaceAll() method is supported by Firefox but not by Chrome. It will become available in Chrome 85.

Meanwhile you could find multiple other methods here.

Screenshot for possible future readers:

https://i.imgur.com/Ryvn6OL.jpg


how can fix my typescript to show me this function??
@behroozbc: AFAIK, replaceAll() is from ES2021 spec. If the latest version of TS doesn't support it, you can't do much except use one of the other methods.
D
David Ricardo Amaya Rojas

You can create a file

myOwnTypes.d.ts

at the root of your angular project and add the following code:

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

That will tell typescript that strings has this property.

Now replaceAll is supported in Chrome and Firefox but is always good to check the caniuse to check if it fits your needs.

https://caniuse.com/?search=replaceAll

If this works for you upvotes are more than welcome, Im starting with this stackoverflow account and would appreciate the support :)


M
Mansour Alnasser

Just Use this function

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


This was my first thought to solve my problem, but I'm sure there's a more efficient way. Using a RegEx seems the way to go
The question asked is "How can fix my typescript to show me this function?". A valid answer obviously is not "use my function instead", even more when there is a clean answer to that (fix the ES version) :)
N
Nathan Arthur

Chrome supports replaceAll so it is safe to use. However typescript still issues an error, so you may cast your string to any, in order to overcome that obstacle.

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

please do not suggest to use any
Changing to any is not a solution !!!
F
Farhan Kassam

According to MDN Web Docs,

"to perform a global search and replace, include the g switch in the regular expression".

So, you can try doing:

const date="1399/06/08" const forwardSlashRegex = /(\/)/g; console.log(date.replace(forwardSlashRegex, '_'));

This automatically replaces all forward slashes with the underscore. Make sure to also keep the /g global indicator at the end of the regex, as it allows JS to know that you want to replace ALL places where the forward slash occurs.

For more info on the use of regex indicators, refer to the following very useful guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions