Çö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.583
Çö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
JavaScript: 
export interface NewsType {
 source: Source;
 article: Article;
 author: string;
 title: string;
 description: string;
 url: string;
 urlToImage: string;
 publishedAt: Date;
 content: string;
}
NewsType bu şekilde güncelleyin.
 
Artı 0 Eksi
RaSGooL dedi:
New bir array. Hata aldığın satırdaki Artics'le kısmını silip direkt şu şekilde yaparsan sorun gidecektir.
News. Map((item)=> item. Author)
Genişletmek için tıkla...

Hocam öyle olmuyor. İçerikler Article'ın içinde.

Kxaan dedi:
JavaScript: 
export interface NewsType {
 source: Source;
 article: Article;
 author: string;
 title: string;
 description: string;
 url: string;
 urlToImage: string;
 publishedAt: Date;
 content: string;
}
NewsType bu şekilde güncelleyin.
Genişletmek için tıkla...

Sorunu farklı bir yol ile çözdüm ama nasıl çözdüğümü tam bilmiyorum. Typescript konusun da eğitim tavsiyeniz var mı?

2-3 gündür typescript ile ilgileniyorum ama hiç ısınamadım. Çok saçma geliyor her şey. C# daha önce de kullanmıştım aşinalığım var ama zaten JavaScript ile güzelce çalışıyordum. Bu tip belirlemeler gerçekten gereksiz işi uzatıp karmaşıklaştırıyor.
 
Artı 0 Eksi
BreaKSooN05 dedi:
Hocam öyle olmuyor. İçerikler Article'ın içinde.



Sorunu farklı bir yol ile çözdüm ama nasıl çözdüğümü tam bilmiyorum. Typescript konusun da eğitim tavsiyeniz var mı?

2-3 gündür typescript ile ilgileniyorum ama hiç ısınamadım. Çok saçma geliyor her şey. C# daha önce de kullanmıştım aşinalığım var ama zaten JavaScript ile güzelce çalışıyordum. Bu tip belirlemeler gerçekten gereksiz işi uzatıp karmaşıklaştırıyor.
Genişletmek için tıkla...
Maalesef eğitim önerim yok. Ama hatanın sebebi NewsType tipinde arcticle belirtmediğinizden kaynaklanıyordu. Bende Article tipini dahil ettim NewsType'a.
 
Artı 0 Eksi
Kxaan dedi:
Maalesef eğitim önerim yok. Ama hatanın sebebi NewsType tipinde Arctic'le belirtmediğinizden kaynaklanıyordu. Bende Artics'le tipini dahil ettim NewsType'a.
Genişletmek için tıkla...

Hocam sizin dediğiniz gibi yapınca. Sonuç böyle oluyor;

1672154550563.png


Benim bulduğum çözüm, articles: [] olarak güncellemek.

Sonrasında state içine data değil. Data. Articles eklemek. Eğer Articles'ı aşağı da alırsam hata devam ediyor.

Maalesef ben bu işi tam olarak çözemedim. Hala çok karışık geliyor. State içinde tip belirtiyoruz. Get yaparken tip belirtiyoruz. Yeri geliyor belirtme dizi yeri geliyor normal yapılıyor. API'dan API'a değişiyor. Çok karışık.
 
Son düzenleme:
Artı 0 Eksi
BreaKSooN05 dedi:
Hocam sizin dediğiniz gibi yapınca. Sonuç böyle oluyor;

Eki Görüntüle 1615534

Benim bulduğum çözüm, articles: [] olarak güncellemek.

Sonrasında state içine data değil. data.articles eklemek. Eğer articles'ı aşağı da alırsam hata devam ediyor.

Maalesef ben bu işi tam olarak çözemedim. Hala çok karışık geliyor.
Genişletmek için tıkla...
Typelari belirttiğiniz dosyayi atar misiniz? export ettiginiz.
 
Artı 0 Eksi
Kxaan dedi:
Typelari belirttiğiniz dosyayi atar misiniz?
Genişletmek için tıkla...
Çalışan halini atıyorum.

TYPE.JS
JavaScript: 
export interface NewsType {
  source: Source;
  author: string;
  title: string;
  description: string;
  url: string;
  urlToImage: string;
  publishedAt: Date;
  content: string;
  articles: [];
}

export interface Source {
  id: string;
  name: string;
}

REACT APP.TSX
JavaScript: 
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[]>([]);

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

  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.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;
 
Artı 0 Eksi
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.
 
Son düzenleme:
Artı 0 Eksi
Çözüm
Bu arada izlediğim Video'da başka API ile kullanıyordu. Ve get metodundan hemen sonra <NewsType[]> olarak belirtiyordu. Bende array olarak belirtince hata alıyorum.

State kısmında hata veriyor.

1672155693493.png


1672155686235.png


İçini boş yaptığım da news statei hata veriyor, Köşeli yaparsam da yine aynı hata devam ediyor.
 
Artı 0 Eksi

Benzer konular

epeymen
Typescript indirilmiyor
Mesaj
2
Görüntüleme
94
delikarga
delikarga
533388
Typescript function overloadings nasıl yapılır ve nasıl çalışır?
2
Mesaj
17
Görüntüleme
346
533388
533388
Elvadort
Typescript komut dosyası devre dışı
Mesaj
1
Görüntüleme
168
Vavien.
Vavien.
533388
Typescript "unknown file extension ".ts"" hatası
Mesaj
7
Görüntüleme
65
brkdnmz
brkdnmz
asizby
React ve Node için TypeScript gerekli mi?
Mesaj
3
Görüntüleme
1B
Berkay Davas
Berkay Davas

Yeni konular

Yeni mesajlar

Geri
Yukarı