TypeScript benefits over vanilla JavaScript.
npm i
- install 3rd party libs using TS, like
axios
- use axios in
.js
- show code-completion of
axios.get()
- explain
d.ts
files -> where they come from - paste the code in
.ts
-> see error
- create
getProducts()
, move axios inside - call the api in
.js
-> show code-completion ofresponse.data
- type cannot be "guessed" for HTTP requests (read docs, execute + console.log, etc)
- set explicit
Product[]
return type in.ts
-
create
getOrder(productId)
function in.js
-
find the product
-
read
quantity
value from a DOM input -
calculate
total
-
return
Order
-
everything works in
.js
, but you get type errors in.ts
-
fix DOM query for
value
-
set
strict: true
to fixproductId
-> infer from usage -
fix DOM query fallback
-
fix product find
-
call
getOrder()
see error missing param
- see that we haven't specify types for:
products
,product
,price
,order
- we only need to explicitly specify them at the border: HTTP, DOM, 3rd party
- add new field on order return, see it inferred
- define explicit
Order
type, withtotal
instead ofprice
+ withoutquantity
- set it to
getOrder
-> see type errors
- manual rename
id
inuuid
-> get compile error - refactor rename
price
inunitPrice