262. Using Types with the HttpClient

Jul 21, 2026 06:02 · 5:07 · English · Whisper Turbo · 1 Дынамік

Тэрмін дзеяння гэтага перапісу скончыцца праз 7 дзён. Абнавіць для пастаяннага захоўвання →

Індэкс лекцыі

0:01

S… Speaker 1 (262. Using Types with the HttpClient)

The next step now,

0:03

S… Speaker 1 (262. Using Types with the HttpClient)

of course, is to output our posts.

0:04

S… Speaker 1 (262. Using Types with the HttpClient)

Before we do that,

0:05

S… Speaker 1 (262. Using Types with the HttpClient)

however, let me bring your attention to a tiny problem

0:10

S… Speaker 1 (262. Using Types with the HttpClient)

we have here or to a spot where we can improve our code.

0:13

S… Speaker 1 (262. Using Types with the HttpClient)

If we hover over posts here,

0:16

S… Speaker 1 (262. Using Types with the HttpClient)

in your IDE,

0:17

S… Speaker 1 (262. Using Types with the HttpClient)

you probably see the type of posts and you see that this is of type any.

0:21

S… Speaker 1 (262. Using Types with the HttpClient)

That,

0:23

S… Speaker 1 (262. Using Types with the HttpClient)

of course, means the TypeScript is not able to detect how our posts

0:27

S… Speaker 1 (262. Using Types with the HttpClient)

look like, the format of our posts,

0:29

S… Speaker 1 (262. Using Types with the HttpClient)

because your posts array also is of type any.

0:32

S… Speaker 1 (262. Using Types with the HttpClient)

Because the only thing TypeScript sees is that we add the

0:36

S… Speaker 1 (262. Using Types with the HttpClient)

ID key here,

0:37

S… Speaker 1 (262. Using Types with the HttpClient)

but other than that,

0:38

S… Speaker 1 (262. Using Types with the HttpClient)

the object we push is totally unknown to it because it doesn't know the format

0:42

S… Speaker 1 (262. Using Types with the HttpClient)

of our response data.

0:43

S… Speaker 1 (262. Using Types with the HttpClient)

There it only knows that it's an object,

0:45

S… Speaker 1 (262. Using Types with the HttpClient)

but not how this object looks like.

0:47

S… Speaker 1 (262. Using Types with the HttpClient)

We can tell TypeScript how it looks like.

0:51

S… Speaker 1 (262. Using Types with the HttpClient)

One way of doing it would be to assign a type

0:55

S… Speaker 1 (262. Using Types with the HttpClient)

here on the argument we're getting in map.

0:57

S… Speaker 1 (262. Using Types with the HttpClient)

So we could say,

0:58

S… Speaker 1 (262. Using Types with the HttpClient)

yeah, we know that this actually will be an object.

1:03

S… Speaker 1 (262. Using Types with the HttpClient)

where we have a randomly generated string.

1:07

S… Speaker 1 (262. Using Types with the HttpClient)

And now this syntax can look really weird in TypeScript,

1:11

S… Speaker 1 (262. Using Types with the HttpClient)

but in the end you use a placeholder

1:15

S… Speaker 1 (262. Using Types with the HttpClient)

property name for that by using square brackets here.

1:18

S… Speaker 1 (262. Using Types with the HttpClient)

And then you add key colon string

1:22

S… Speaker 1 (262. Using Types with the HttpClient)

in there.

1:23

S… Speaker 1 (262. Using Types with the HttpClient)

which simply means this is any string key we

1:27

S… Speaker 1 (262. Using Types with the HttpClient)

have here on that object.

1:29

S… Speaker 1 (262. Using Types with the HttpClient)

We don't know the exact property name because it's randomly generated or not

1:33

S… Speaker 1 (262. Using Types with the HttpClient)

randomly, but it's generated by Firebase and we do have many different properties,

1:36

S… Speaker 1 (262. Using Types with the HttpClient)

but we know it will be a property that can be interpreted as a string.

1:40

S… Speaker 1 (262. Using Types with the HttpClient)

And now the value held by that property is our actual

1:44

S… Speaker 1 (262. Using Types with the HttpClient)

post data,

1:45

S… Speaker 1 (262. Using Types with the HttpClient)

right? It's the same format we have here.

1:48

S… Speaker 1 (262. Using Types with the HttpClient)

Now, therefore to simplify this a bit for us,

1:51

S… Speaker 1 (262. Using Types with the HttpClient)

we can of course add a new model,

1:55

S… Speaker 1 (262. Using Types with the HttpClient)

let's say a post model here where I export the interface and

1:59

S… Speaker 1 (262. Using Types with the HttpClient)

I'll name this post.

2:00

S… Speaker 1 (262. Using Types with the HttpClient)

And this will just have that format here,

2:03

S… Speaker 1 (262. Using Types with the HttpClient)

title and content.

2:04

S… Speaker 1 (262. Using Types with the HttpClient)

And actually will optionally also have an ID.

2:08

S… Speaker 1 (262. Using Types with the HttpClient)

Let's add a question mark here to make clear that this is a string,

2:10

S… Speaker 1 (262. Using Types with the HttpClient)

but it's optional.

2:11

S… Speaker 1 (262. Using Types with the HttpClient)

And now we can use that here.

2:14

S… Speaker 1 (262. Using Types with the HttpClient)

So there we use

2:17

S… Speaker 1 (262. Using Types with the HttpClient)

Post,

2:17

S… Speaker 1 (262. Using Types with the HttpClient)

we just need to import that.

2:19

S… Speaker 1 (262. Using Types with the HttpClient)

So let's import post from our

2:24

S… Speaker 1 (262. Using Types with the HttpClient)

post model file here.

2:26

S… Speaker 1 (262. Using Types with the HttpClient)

So from .slash post

2:31

S… Speaker 1 (262. Using Types with the HttpClient)

.model.

2:32

S… Speaker 1 (262. Using Types with the HttpClient)

And now we know here we have that

2:36

S… Speaker 1 (262. Using Types with the HttpClient)

randomly generated ID,

2:37

S… Speaker 1 (262. Using Types with the HttpClient)

but that will then hold a post as a value.

2:41

S… Speaker 1 (262. Using Types with the HttpClient)

That's that nested element I showed you in the developer tools earlier.

2:46

S… Speaker 1 (262. Using Types with the HttpClient)

With that now,

2:48

S… Speaker 1 (262. Using Types with the HttpClient)

TypeScript suddenly knows what's inside of response data.

2:51

S… Speaker 1 (262. Using Types with the HttpClient)

And now we can also set the type here

2:55

S… Speaker 1 (262. Using Types with the HttpClient)

on our posts array and say,

2:57

S… Speaker 1 (262. Using Types with the HttpClient)

yeah, that will be a post array,

2:59

S… Speaker 1 (262. Using Types with the HttpClient)

which you set by using this type assignment,

3:02

S… Speaker 1 (262. Using Types with the HttpClient)

the name of the type and then square brackets to indicate that it

3:06

S… Speaker 1 (262. Using Types with the HttpClient)

will be an array of these types.

3:08

S… Speaker 1 (262. Using Types with the HttpClient)

This now is improved code because now we can clearly understand what's

3:12

S… Speaker 1 (262. Using Types with the HttpClient)

inside of posts array and we get better autocompletion.

3:15

S… Speaker 1 (262. Using Types with the HttpClient)

For example,

3:16

S… Speaker 1 (262. Using Types with the HttpClient)

if I try to access the first element,

3:18

S… Speaker 1 (262. Using Types with the HttpClient)

you see I can now access ID content and title because I now know that

3:22

S… Speaker 1 (262. Using Types with the HttpClient)

it has this format and that therefore is a recommended practice.

3:25

S… Speaker 1 (262. Using Types with the HttpClient)

However,

3:26

S… Speaker 1 (262. Using Types with the HttpClient)

with the Angular HTTP client,

3:29

S… Speaker 1 (262. Using Types with the HttpClient)

there is a more elegant way of assigning the type.

3:31

S… Speaker 1 (262. Using Types with the HttpClient)

You don't need to do this here.

3:33

S… Speaker 1 (262. Using Types with the HttpClient)

on the argument in map or in subscribe or whatever you're using

3:38

S… Speaker 1 (262. Using Types with the HttpClient)

to access your data instead the get method is a so -called generic

3:43

S… Speaker 1 (262. Using Types with the HttpClient)

method this means you can add angle brackets here and between the

3:47

S… Speaker 1 (262. Using Types with the HttpClient)

angle brackets you store the type which this response

3:51

S… Speaker 1 (262. Using Types with the HttpClient)

will actually return as a body once it's done so it's

3:56

S… Speaker 1 (262. Using Types with the HttpClient)

the response body type which you store here

3:58

S… Speaker 1 (262. Using Types with the HttpClient)

And that will then automatically be handled by the Angular HTTP client

4:03

S… Speaker 1 (262. Using Types with the HttpClient)

and TypeScript understands this and now knows that the response data

4:07

S… Speaker 1 (262. Using Types with the HttpClient)

will have this type format as you can tell.

4:09

S… Speaker 1 (262. Using Types with the HttpClient)

And this is also available on post requests.

4:12

S… Speaker 1 (262. Using Types with the HttpClient)

It's available on all requests.

4:14

S… Speaker 1 (262. Using Types with the HttpClient)

You can use these angle brackets to add this extra piece of information,

4:18

S… Speaker 1 (262. Using Types with the HttpClient)

which is totally optional,

4:19

S… Speaker 1 (262. Using Types with the HttpClient)

but recommended and helpful about the data you're getting back.

4:24

S… Speaker 1 (262. Using Types with the HttpClient)

And now here,

4:25

S… Speaker 1 (262. Using Types with the HttpClient)

you know, it'll be a JavaScript object.

4:27

S… Speaker 1 (262. Using Types with the HttpClient)

where you have a name property and the value of that will be

4:31

S… Speaker 1 (262. Using Types with the HttpClient)

a string because if you remember when you send a post this

4:35

S… Speaker 1 (262. Using Types with the HttpClient)

is a new post really new

4:39

S… Speaker 1 (262. Using Types with the HttpClient)

The data you get back is exactly such an object,

4:41

S… Speaker 1 (262. Using Types with the HttpClient)

name property and then a random string.

4:44

S… Speaker 1 (262. Using Types with the HttpClient)

And now we're making this really clear here so that we also notice in

4:48

S… Speaker 1 (262. Using Types with the HttpClient)

our subscribe function and if we had code that depends on the types,

4:52

S… Speaker 1 (262. Using Types with the HttpClient)

we get better autocompletion and avoid unnecessary TypeScript errors.

4:56

S… Speaker 1 (262. Using Types with the HttpClient)

So this is optional,

4:58

S… Speaker 1 (262. Using Types with the HttpClient)

but recommended.

4:59

S… Speaker 1 (262. Using Types with the HttpClient)

You can define the response data types here on these generic HTTP

5:03

S… Speaker 1 (262. Using Types with the HttpClient)

word methods.

Гэты тэкст быў створаны AI (аўтаматычнае вызначэнне мовы). Можа ўтрымліваць памылкі - праверце з арыгінальным гукам для выкарыстання. Палітыка AI

❤️ Любіш STT.ai? Раскажы сваім сябрам!

Кароткае апісанне

Націсніце "Сумаваць", каб стварыць падрабязнае апісанне гэтага транскрыпту.

Запытаць у AI пра гэты пераклад

Запытайцеся пра што-небудзь з гэтага перакладу — машынны інтэлект знойдзе адпаведныя раздзелы і адкажа.

Перапісаць іншае