Çözüldü Typescript API'deki verilere type nasıl verilir?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

BreaKSooN05

Kilopat
Katılım
17 Şubat 2019
Mesajlar
3.556
Çözümler
18
Şöyle bir types. TS dosyası oluşturdum.

JavaScript:
export interface Article {
 status: string;
 totalResults: number;
 articles: Article[];
}
export interface NewsType {
 source: Source;
 author: string;
 title: string;
 description: string;
 url: string;
 urlToImage: string;
 publishedAt: Date;
 content: string;
}
export interface Source {
 id: string;
 name: string;
}

Kullandığım API ise; News API – Search News and Blog Articles on the Web

code.png


Hata aldığım nokta fotoğrafta gözükmemiş ama article type'inden dolayı hata alıyorum.

1672133944990.png
 
Son düzenleyen: Moderatör:
Çözüm
JavaScript:
export interface Article {
  source: Source;
  author: string;
  title: string;
  description: string;
  url: string;
  urlToImage: string;
  publishedAt: Date;
  content: string;
}

export interface NewsType {
    status: string;
    code?: string;
    error?: string;
    totalResults: number;
    articles: Article[];
}

export interface Source {
  id: string;
  name: string;
}
JSX:
import React, { useEffect, useState } from "react";
import axios from "axios";
import { NewsType } from "./types";

function App() {
  const API_KEY = "xxxxx";
  const [news, setNews] = useState<NewsType | null>(null);

  const getApi = async () => {
    const { data } = await await axios.get<NewsType>(
      `https://newsapi.org/v2/everything?domains=wsj.com&apiKey=${API_KEY}`
    );
    setNews(data);
  };

  useEffect(() => {
    getApi();
  }, []);

  return (
    <div className="App">
      <>
        <h1 className="text-5xl m-3 text-center font-bold mb-10">NEWS</h1>
        <div className="flex flex-row flex-wrap gap-5 justify-center">
          {news?.articles.map((item, i) => {
            return (
              <div className="max-w-[350px]" key={i}>
                <h2 className="font-bold text-xl mb-4">
                  {item.title.substring(0, 44)}
                </h2>
                <img src={item.urlToImage} alt="" />
                <p className="py-2">
                  {item.description.substring(0, 75) + " [...]"}
                </p>
                <p className="float-right">{item.author}</p>
              </div>
            );
          })}
        </div>
      </>
    </div>
  );
}

export default App;
Bu şekilde değiştirip dener misin.
Ben bunu yapamadığım için JSON to type çeviren bir siteden yararlanmıştım. Tam düzgün çeviremediğini de anladım ama nasıl düzelticeğimi bilmiyordum.

Hocam peki burada ki kullanım da az önce {} kullandınız, izlediğim video da ise [] kullanılıyordu. Get yaparken de array olarak çekiyordu <NewsType []> gibi. Neden böyle bir kullanım da bulunuyor? Bunu neye göre düzeltiyoruz biraz açıklarsanız çok sevinirim.

Eki Görüntüle 1615578
Anlatayım hocam. Biz direkt geri dönen tüm objeyi state'e verdik NewsType tipiyle. useState'de direkt newsType tipinde olabilir dediğimiz zaman varsayılan değer veremediğimiz için typescript ee hani bu newsType değil içi boş diyor. Bizde ya newsType olabilir yada null olabilir diyip varsayılan değere null verip o hatayı hallettik. Daha sonra aşağıda bu objenin içi boş olabilir biz buna nasıl erişeceğiz hatası alıyorduk onuda ? operatörü ile hallettik. Obje doluysa articles listesini maple demiş olduk yani. Umarım anlatabilmişimdir.
 

Geri
Yukarı