Let's take a look at how to do it.
First, create a React with Typescript project.
npx create-react-app . --template typescript
This time, let's using dev.to API
dev.to API return the posts information that you posted
And also, this time i'm using a fetch API.
App.tsx
fetch("https://dev.to/api/articles?username=username")
.then((response) => response.json())
.then((records) => console.log(records));
console
(To excerpt and just example)
canonical_url: "https://dev.to/username/title"
created_at: "2022-10-30T00:00:00Z"
description: "This is description..."
id: 1234567
published_at: "2022-10-30T00:00:00Z"
published_timestamp: "2022-10-30T00:00:00Z"
readable_publish_date: "Oct 30"
tag_list: (3) ['java', 'typescript', 'react']
tags: "java, typescript, react"
title: "This is title"
type_of: "article"
url: "https://dev.to/username/ownUrl"
...
The next step is to display this on page.
App.tsx
import React, { useState, useEffect } from "react";
import "./App.css";
function App() {
const [records, setRecords] = useState([]);
useEffect(() => {
fetch("https://dev.to/api/articles?username=username")
.then((response) => response.json())
.then((records) => setRecords(records));
}, []);
return (
<div>
{records.map((record) => (
<li key={record.id}>
<div>id: {record.id}</div>
<div>Name: {record.Name}</div>
</li>
))}
</div>
);
}
export default App;
This code is using "useState" and "useEffec"
I don't explain about these components now.
(if you don"t know these components ,you should search on google)
You load App.tsx at first time, useEffect do fetch API and store the data into "records".
and then, call setRecords function.
finally, you can access the json data.
In the return, using map method set the list.
but Typescript does not allow these code now.
Try to reproduce it in your local workspace.
You should see the following error
TS2339: Property 'Name' does not exist on type 'never'.
never type is basically a type that cannot be assigned a value.
because we are initializing the useState with an empty array.
Typescript infers that useState is always an empty array.
In other words, the type of useState must be specified.
This time a separate file for useState.
I'm going to create a model file and specify it.
records.model.ts
export interface recordsModel {
id: number;
title: string;
}
This time use only id and title.
import this file in the App.tsx
and specify the types of useState
App.tsx
import React, { useState, useEffect } from "react";
import "./App.css";
import { recordsModel } from "./records.model";
function App() {
const [records, setRecords] = useState<recordsModel[]>([]);
useEffect(() => {
fetch("https://dev.to/api/articles?username=username")
.then((response) => response.json())
.then((records) => console.log(records));
}, []);
console.log(records);
return (
<div>
{records.map((record) => (
<li key={record.id}>
<div>id: {record.id} </div>
<div>Name: {record.title}</div>
</li>
))}
</div>
);
}
export default App;
Using the model specifies the data types for data retrieved from json.
Otherwise Typescript will make incorrect inferences.
Remember to specify the model.
thank you
Top comments (0)