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

249873 · 27 Aralık 2022

Şö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

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

kaan.w · 27 Aralık 2022

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.

kaan.w · 27 Aralık 2022

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.

RaSGooL · 27 Aralık 2022

new bir array. Hata aldığın satırdaki article kısmını silip direkt şu şekilde yaparsan sorun gidecektir.
news.map((item)=> item.author)

249873 · 27 Aralık 2022

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)

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

kaan.w 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.

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.

kaan.w · 27 Aralık 2022

249873 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.

Maalesef eğitim önerim yok. Ama hatanın sebebi NewsType tipinde arcticle belirtmediğinizden kaynaklanıyordu. Bende Article tipini dahil ettim NewsType'a.

249873 · 27 Aralık 2022

kaan.w 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.

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

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.

kaan.w · 27 Aralık 2022

249873 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.

Typelari belirttiğiniz dosyayi atar misiniz? export ettiginiz.

249873 · 27 Aralık 2022

kaan.w dedi:
Typelari belirttiğiniz dosyayi atar misiniz?

Ç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;

kaan.w · 27 Aralık 2022

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.

249873 · 27 Aralık 2022

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.

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

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

Ayrıntılı düzenleme

249873

Kilopat

kaan.w

kaan.w

Megapat

RaSGooL

Kilopat

249873

Kilopat

kaan.w

Megapat

249873

Kilopat

kaan.w

Megapat

249873

Kilopat

kaan.w

Megapat

249873

Kilopat

Benzer konular