Sabrina Drashen @sdrashen

Tweets

3K
Followers

322
Following

430
Likes

236

Science girl @gunsnrosesgirl3

8 months ago

It’s still New Year’s Day 📹 sihirli_elleer_

127 2K 16K 2.6M 1K

Download Video

If you wrote a wrong commit message you can fix that using git commit --amend, edit the message you want (on my machine I had to press "i" to able to type), after fixing the msg, press esc then :wq. Then git push --force origin (branchName). Done! #git

1 0 1 82 1

Sabrina Drashen @sdrashen

2 years ago

The first ...props is called "Rest Operator" which brings all the remaining properties to the props object. The second {...props} is the "Spread Operator", which takes all the values in the first ...props and passes it to the img tag. Check the print! #typescript

0 0 0 53 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

| means "or" in Typescript. || means "or"in Javascript. #hint #javascript #typescript

0 0 0 31 0

Sabrina Drashen @sdrashen

2 years ago

... This HTMLImageElement is a global interface, that is, we don't need to import that from somewhere. (4/4) #typescript #Development #frontend

0 0 0 43 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

... it to have access to the props we provided and to the props that an HTML tag might have, we use what is referred to as 'property/props extension' within TS. And every time we use that kind of interfaces we gotta pass a generic to that. (3/4)

0 0 0 31 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

...can get. And there we can see another interface: HTMLAttributes, which are attributes that any HTML element can get. And they are a lot! Well, When we have a component whose output is an HTML tag, for example an 'img' tag, and we want the component that renders (2/4)

0 0 0 24 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

By pressing ctrl + space, we'll see that #React exports to us some attributes interfaces. In this case, we'll pick the ImgHTMLAttributes one. And pressing "ctrl" and clicking on it we'll see another file which shows us an interface of #typescript with all the props that ...(1/4)

0 0 0 27 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

The "?" indicates that the property is not obligatory. #Typescript

0 0 1 14 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

The function onDeleteComment doesn't return anything, so we type it "void". However, to this function is passed a param, so we need to pass that on the interface as well, using any name, we just need to let TS know that this function needs a param. Check the print! #Typescript

0 0 1 18 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

Content is an array and has got two types. #Typescript

0 0 1 17 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

The event on print was triggered by the fields in the form and we need to let Typescript know that 'cause Typescript's got something inside it called "generics" for typing which are the same as params in functions for JS. Check the print! #Typescript #javascript

0 0 0 20 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

#CSS can be tamed 🎠The inset property is a shorthand for setting an element's top, right, bottom and left properties, which control the spacing within an element relative to the edges of the containing box. There are 2 ways to set that. The short one is the most recommended.

0 0 0 17 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

Notice that the event remains in error. It's because it has type "any" and TS can't handle that. To solve it we gotta define a specific type for that. ctrl + space to see the options #React offers, after selecting 1 of them it usually imports automatically. Check the print!(2/2)

2 0 1 30 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

TS does not know "event" . To all functions triggered through events, by the user. For example, onClick. HTML applies to these kind of functions as first param the "event". But it keeps underlined in red because TS can't recognize what's the kind ... (1/2) #typescript

0 0 1 21 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

To fix that: Check the print! #typescript

0 0 0 15 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

The function Post doesn't know the format of the infos underlined in red. When talking about objects we can't define the type of each property but the type of the whole object. (1/2)

0 0 0 12 0

Download Image

Sabrina Drashen @sdrashen

2 years ago

"You are passing an element that may not exist". In fact, if we delete the root element it won't exist anymore. We need to assure TS of its existence. To do so, we use "!". Check the print! However, better avoid that. But to this case this solution applies very well.