262. Using Types with the HttpClient

Jul 21, 2026 06:02 · 5:07 · English · Whisper Turbo · 1 Locutores
Haec pagina de translatio explicat. 7 dies. Despectus in Viam Permanentem →
Index communium praefecturae Leptis Magnae
Videtur solum
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.

Haec transcriptio a AI (recognitione automatica loci) generata est. Errores continere potest - contra audio originalem verificare ut criticum utentur. Politicae

❤️ STT.ai amoris?
Summa
Haec pagina de scriptura explicat, quae ad scripturam translativam pertinet.
Summa...
De hoc translatio scripsit.
Quod ad hoc adscriptum est, quod ad hoc adscriptum est, et adscriptum est.
Translatio