Çö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.
B

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
Kxaan
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.
Tarihe göre sırala Puana göre sırala
Artı 0 Eksi
Evet çalıştı.

İlk yaptığım çalışan kod ile bunun arasın da ki fark ne? Ve de biz niçin bu kadar uğraştık?

Hocam valla şu hata ile nerdeyse 1 gündür uğraşıyordum. Random denemeler yaparak çözdüm...
 
Artı 0 Eksi
BreaKSooN05 dedi:
Evet çalıştı.

İlk yaptığım çalışan kod ile bunun arasın da ki fark ne? Ve de biz niçin bu kadar uğraştık?

Hocam valla şu hata ile nerdeyse 1 gündür uğraşıyordum. Random denemeler yaparak çözdüm...
Genişletmek için tıkla...
Zor olacak ama anlatmaya çalışayım. Siz api isteği attığınızda geri gelen objede direkt haberler yok. Obje içerisindeki articles haberleri içeriyor. Typelari yanlis belirtmissiniz.
JavaScript: 
//Tek bir haber bu tipte.
export interface Article {
  source: Source;
  author: string;
  title: string;
  description: string;
  url: string;
  urlToImage: string;
  publishedAt: Date;
  content: string;
}

//Istek attiginizda geri donen obje ise bu.
export interface NewsType {
    status: string; //istek durumunu iceren kod
    code?: string; //hata varsa hata kodu
    error?: string; //hata varsa hatanin kendisi
    totalResults: number; //bulunan toplam sonuc sayisi
   
    articles: Article[];
    //ve sonunda articles, article lardan olusan bir liste seklinde tanimladik
}

//haber icerisindeki kaynak kismi source
export interface Source {
  id: string;
  name: string;
}
 
Artı 0 Eksi
Kxaan dedi:
Zor olacak ama anlatmaya çalışayım. Siz API isteği attığınızda geri gelen objede direkt haberler yok. Obje içerisindeki articles haberleri içeriyor. Typelari yanlış belirtmissiniz.
JavaScript: 
//Tek bir haber bu tipte.
export interface Article {
 source: Source;
 author: string;
 title: string;
 description: string;
 url: string;
 urlToImage: string;
 publishedAt: Date;
 content: string;
}

//Istek attiginizda geri donen obje ise bu.
export interface NewsType {
 status: string; //istek durumunu iceren kod
 code?: string; //hata varsa hata kodu
 error?: string; //hata varsa hatanin kendisi
 totalResults: number; //bulunan toplam sonuc sayisi

 articles: Article[];
 //ve sonunda articles, article lardan olusan bir liste seklinde tanimladik
}

//haber icerisindeki kaynak kismi source
export interface Source {
 id: string;
 name: string;
}
Genişletmek için tıkla...

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.

1672157177545.png
 
Artı 0 Eksi

Benzer konular

epeymen
Typescript indirilmiyor
Mesaj
2
Görüntüleme
89
delikarga
delikarga
533388
Typescript function overloadings nasıl yapılır ve nasıl çalışır?
2
Mesaj
17
Görüntüleme
342
533388
533388
Elvadort
Typescript komut dosyası devre dışı
Mesaj
1
Görüntüleme
151
Vavien.
Vavien.
asizby
React ve Node için TypeScript gerekli mi?
Mesaj
3
Görüntüleme
1B
Berkay Davas
Berkay Davas
TeknoEmir
JavaScript bilen bir kişinin TypeScript öğrenmesi ne kadar zaman alır?
Mesaj
3
Görüntüleme
665
Kxaan
Kxaan

Yeni konular

Yeni mesajlar

Geri
Yukarı