Setting a Compiler Target in tsconfig.json
The reason we were getting the error is because the target setting in the tsconfig.json compilerOptions was set to ES5, which doesn't support the replaceAll method.
Updating the target Setting
Changing the target setting to ES2022 resolves the error:
{ "compilerOption
Transcript
00:00 Okay, so the reason that this was breaking first of all is because we had our TS config setting on Target set to es5 now when we have targets set this indicates What kind of version of JavaScript we are targeting es5 we have es
00:18 2016 es2017 and we can choose es3 I think but I think this will error possibly in future versions of JavaScript or typescript. Sorry. So the one that I tend to recommend choosing is yes 2022 and now because we've got it sent to es 2022 if we look at string to replace all the error has actually gone away
00:40 But how on earth does that work? So because if we had it set to es5 Let's say and then we go back to string to replace all property replace All does not exist on type. Hello world. Do you need to change your target library? Try changing the lib compiler option to es2021 or later
00:57 Well, how does TypeScript like what is it doing like to understand that replace? All is a valid on one target, but not on another well replace all was added in a certain Time in JavaScript's history. It looks like yes
01:13 2021 is the one and so what TypeScript does is you can operate it at various versions of JavaScript and it will give you basically warnings if you're using the wrong methods So if we look at string here, if we actually like look up for the string definition
01:29 I think this will be easier if we actually fix the TS config or actually let's say we say String dot replace because this has been in JavaScript for a long time Let's come on click into that and now we can see that we end up in lib dot es 2015 dot symbol dot well known dot D dot TS
01:48 And let's have a look at the files in here. You can see that there are a bunch of dot D dot TS files which are Declaration files as we're used to seeing that describe a bunch of different things in TypeScript and you can see that there's lib ES 2017 dot full dot D dot TS in pull
02:08 object shared memory string type to raise a bunch of different features that you can add to your TypeScript and This is what target is doing. It's saying okay. You want to target ES 5? Okay. Well, you just get the stuff That's in lib dot ES 5 dot D dot TS and you can see inside here
02:28 We're saying declare function which puts something into the global scope and now we have access to parse int if we didn't Specify any of this stuff then we would basically get if we look at our TS config Just then You can I think actually specify like no lib true here
02:46 Yeah, no lib true and what we get is we would get like nothing here So replace doesn't exist anymore And if we were to look at all the methods on string we literally just have at it seems I'm sure where that's come from actually, but like so lib is basically the place where TypeScript decides
03:06 What global methods are available on strings functions Basically describes what the language is doing and because the language has evolved over time That means that when we specify different targets We can specify different features added into the global scope of TypeScript again. It doesn't change anything at runtime
03:26 It's just changing what's available to you on the type level So we have targets here, but we also have a second option The second option is to use lib and lib if I look at the second solution here, which is TS config here Inside this one. We're specifying targets, but we're also
03:44 Specifying lib here and lib lets us drill down a little bit more into things that we can add Including a DOM type here, which we'll look at soon so each inside here you can be really really specific with what you choose and If you don't specify lib then it sort of defaults to the target that you've got specified here
04:04 So if you have lib, do you need target is a final thought I've sort of not quite worked this out for myself But every time I talk to the TypeScript team the TypeScript team say oh, yeah Always specify a target always specify targets and I'm not quite sure like I think that's how that's the assumption
04:23 That TypeScript makes is that you're specifying a target and a lib and in general if you're working With node for instance, you want that target and lib to be yes 2022 which is usually the latest for node and if you're working on bundling TypeScript for a web application
04:40 Usually the bundler itself that you're using will handle this stuff. But using targets and lib Yes, 2022 is pretty safe. And yeah, I think that's everything we need to cover there So just to summarize we have lib.d.ts Which are a bunch of different files which we command click into string here
04:59 We can see tons and tons of stuff that basically describe what JavaScript was like at that point in time and you can target different versions of JavaScript by specifying lib and target in your TS config
