How to use the Dev.to API with React and Typescript in 2022

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