TypeScript Tutorial #11 - The DOM & Type Casting

[@priyandarshana4830]

best full-stack developer i have ever seen

[@ademineshat]

The best part "selectooooor" 😂 I love it 😍

[@abdullahsuhaisk3694]

When i watching your series , I can grab all thing with easly, Thanks a lot man !

[@hojdog]

My favorite way to access optional values is with optional chaining console.log(anchor?.href) logs href if anchor is defined, or just logs undefined

[@miku4j]

And it's a shortcut for console.log(anchor.href | undefined)

[@george_bullock]

This is exactly the explanation I needed to drive this concept home. Thank you!

[@Shakeel714]

Thanks Shaun Pelling. This tutorial series is so helpful to follow along and learn TypeScript.

[@artur838]

Your pronunciation of the word querySelector sounds very fun 🙂. Nice tutor, thanks

[@PolskiArrow]

If you get an error in your browser while trying to print html element's properties in console *("Uncaught TypeError:* Cannot read properties of null (reading 'id')"), just move your script's link from to the end of field!

[@ironcito1101]

You can also use so the script runs only after the HTML has loaded and available in the DOM.

[@izzatullokanoatov370]

4:17. Queryselectoooor :-).

[@spellsaif]

always love hearing thaaaat!

[@aerial_silks_sierra]

Lmao I was JUST hyperfixating on that 😂 he always pronounces at least one word like that. "Over HAeiRR" keeps me on the edge of my seat 😍

[@zaph254]

He did the thing, he did the thing "selectoooooooor" I was specifically waiting for this, was not even concentrating, I was just waiting for this.

[@NetNinja]

Hahaha

[@sanjaydhande6573]

Excellent! , best explanation for the series. Thanks !

[@alexeyovriakh2450]

Amazing tutorial!! Thank you so much for sharing your expertise with us!! :)

[@somsubhra97]

Hello Shaun sir,greetings from India.I have been watching your tutorials for an year now,they all are properly explained,much better than other courses I have taken which brings me back to this channel.I have a small request to make though,can you prep a small course with GraphQL Yoga and react apollo...

[@adrean83]

Hey took me a minute but I wasn't seeing the console logs straight away. Remember to change you script tag in index.html if you change the name of the ts file.

[@Fleshlight_Reviewer]

Can you dive into some ts react or ts node express server

[@MrEvansjethro]

Shaun, the real Ninja!

[@runningsolution6154]

Thank you for the series!

[@bobbysingh99]

Hey, any chance you would do a Typescript and React tutorial? Would be awesome!

[@NetNinja]

At some point, yeah. Not just yet though!

[@omemester6985]

@@NetNinja Yes please!

[@dev_jeongdaeri]

Awesome man 😎 👏👏👏💪

[@aniketbhalla1521]

I want to be sure for this, we're using typescript predefined interfaces, in lib.something.d.ts, as object's type because interface knows all that's object's defined methods & properties. So when we use interface as type then typescript checks interface, given as type, and doesn't show us errors because those are for sure implemented in that object. Correct me if I'm wrong.

[@dyunior]

dang!, just learned that typeof number when its color blue in the console. :D

[@bushigi5913]

I love this chapter!

[@seanbenediqueauditor3947]

Thanks for this, man. Real good!

[@Jose-fr6lp]

I did not know about valueAsNumber 🤯

[@hiteshj2110]

Selectooooooahhhhh ❤️

[@MichaelSalo]

valueAsNumber is a new one for me

[@DodaGarcia]

Instead of the type casting would it have worked using a regular TypeScript signature on the variable assignment? For example: const form: HTMLFormElement = document.querySelector('.new-item-form')

[@ruchiii75]

when would you use as vs colon for typecasting?

[@harshkulkarni9478]

If we're unsure whether anchor.href exists or not, wouldnt an easier way of checking be with 'anchor?.href' instead of a tedious for loop, this way we also wouldnt have to explicitly tell the compiler that we know it exists for sure

[@naasim]

With the new optional chaining operator, here's another way: console.log(anchor?.href);

[@Jason-uv5tm]

Is there a reason why you wouldn't want to use an exclamation mark (in this example, and others)?

[@AliShokor-j1p]

bro you are the best

[@Nikiteshsingh]

Can we also use optional chaining here? something like "console.log(anchor?.href)"

[@josbexerr5166]

Gran curso Ninja.....gracias

[@shreyasjejurkar1233]

C# + JavaScript = Typescript

[@insteresting]

Nice tutorial, Shaun! Love your accent by the way.. At 07:20, I wonder why TypeScript doesn't complain about using "type" as a variable name, since it is a reserved keyword..

[@RichardBagnall1]

What if you use document.querySelector('form.new-item-form')? Does TyepeS cript infer HTMLFormElement?

[@shadmanmartinpiyal4057]

Hey gang.. you can also extract the form info by e.currentTarget.type.value and so on.....

[@himbary]

TS is just

[@farouktouil5036]

Hi, and thank you for the tutorial, I have a question How can I access a checkbox value in this form, I have tried but the typescript camplained about the value.

[@shakilkhanprogrammer]

When I hover on the document object its shows me this error Cannot find the name 'document'. Do you need to change your target library? Try changing the `lib` compiler option to include 'dom'.ts(2584)

[@Argha252]

Hey there! I had the same issue. Here's what I did: Go to the vscode settings page > search for typescript:tsdk > click on change settings.json > there should be a json key for "typescript.tsdk" > paste this value "/npm_modules/typescript/lib". Hope this helps! :D

[@ronit8067]

how is the Add button triggering this event? don't we have to assign a event listener to the button for this first? I don't get that part.

[@pashabiceps95]

button is by default has type "submit", this means that it will trigger submit event of the parent form

[@learningit2572]

Amauzing teacher cool tutorial!

[@NetNinja]

Thanks!

[@jonasd2860]

Good job

[@drewstifler1440]

almost 10k views with no dislikes!

[@Bencia_blindDev]

dude, your ways of speaking is so funny~ huhhuh, "querySELECTOR~~~~~" lesson#13 4:15

[@rikilamadrid]

For me my intellisense stopped working. document has a squiggly red line and when i hover it says: Cannot find name 'document'. Do you need to change your target library? Try changing the `lib` compiler option to include 'dom'.ts(2584)

[@papesldjnsjkfjsn]

you prob found the solution but for others it's a problem with the tsconfig, you need to include "dom" in the the lib compliler options

[@papesldjnsjkfjsn]

actually if you are setting the target to es3 you need to include: "lib": [ "DOM", "DOM.Iterable", "ScriptHost", "ES2015" ] for ts to know the main js functions and objects, otherwise it won't know anything about document or the console...

[@rikilamadrid]

@@papesldjnsjkfjsn Thank you so much. I cant remember well if I did. I will def try this. I appreciate you taking the time and posting, thanks!

[@ibrahimkholil6262]

Hello everyone! Recently i'm working with redux. But i am not getting one thing and that is i created a store and reducers and dispatching an action and then state gets change and i am subscribed to the store with a callback which gets called on state change now in this callback i put in a render method which will re-render my UI but my question is what if i have multiple section in my UI suppose i have a Todo list and Movie List those two are different module depends on different data and if Todo list gets updated i have to re render the whole UI again cause i subscribed to store with render method and render method take the state and basically rerender the whole UI again in this case i just updated Todo list what i want is to just rerender UI part related to Todo list not Movie list. But i can not do that cause i am subscribed to store with render method and that method basically rerender the whole UI. Now how can i only rerender specific part of UI? Do i need to create two store? One for Todo one for Movie then does redux core principle works here cause their is not single source of truth where i have two store that means two state. Or am i getting it wrong? One more thing i am not using any UI library instead vanilla Javascript. Off topic but need help

[@VishalSharma-rn7mt]

Awesome

[@bmeghani88]

Does anyone know why it doesn't work the first time round with the event "submit". I had to change it to 'click' and then back to 'submit', then it worked?

[@henrymatola592]

Putting a question mark before .href is also working. 👇👇 console.log(data?.href);

[@ridl27]

ty vm ;)

[@jeffinj7707]

Great

[@mohammadmousavi6046]

What the font editor ???

[@jssecrets]

super!

[@narasimhasriharshakanduri3325]

How does typescript know about HTML elements???. The answer is ther is afile called lib/lib.dom.d.ts (github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L8208) . so typescript is using this details so that it can give out the errors and help us code better. In case we don't mention the tag a generic will be inferred instead of the particular element. The entire video is about casting the variable types so that we can catch the errors before the runtime

[@sriramiyer9840]

what is the syntax at 2:43 called?? the exclamation in querySelector('a')!. where can i find the docs for it? could someone please link to it if possible

[@sriramiyer9840]

ok, I found it. its called a "non-null assertion operator": www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator

[@xxapoloxx]

What about radiobuttons?

[@kelvin513]

7:37 even when i explicitly use 'select#type' in the querySelectoooor, TypeScript still saying it is a normal Element

[@Nexus-rt1bm]

Yeah, I don't get it either

[@삶은계란-c2t]

4:15 Well, sensei...

[@Jason-uv5tm]

at 7:08, you made a variable called type. But type is a typescript keyword. Are you sure doing that is safe?

[@alisiraj2100]

AI tutorial plz

[@unknownworld9815]

query seeleectaur

[@rodyguzman9654]

FYI outdated info regarding the exclamation mark, it is or it will be deprecated in favor of optional chaining. Nice work on the series though!

[@chiboreache]

that's why you should use Vue -_-

[@ARZ10198]

what's the most popular library angular , react or vue im a beginner and i know how to work with html ,css , bootstrap , JavaScript but now im confused what to learn now jQuery , node js or JavaScript libraries?

[@mr.actapus4069]

@@ARZ10198 learn Vue, does not matter which is popular, what matters is speed and quality, and also boostrap is bad

[@mr.actapus4069]

@Tigran Khachaturian yeah of course

[@programmer4047]

😎

[@jaayaustin336]

Swifttttttt

[@programerz]

this tutorial is not mobile friendly and the fonts are Small

[@ajaymishra1511]

didnt knew we can do .valueAsNumber

[@interviews-land]

We can also use like this - console.log(ankor?.href) - still we will not get an error