TypeScript

TypeScript lets you define strict interfaces that mirror each API's response format, catching bugs at compile time.

Base URL: https://v2.jkt48connect.com/api

Interfaces for JKT48 API (plain array responses)

// JKT48 returns plain arrays
interface JKT48Member {
  name: string;
  img: string;
  generation: string;
  status: string;
  is_graduate: boolean;
}

interface JKT48LiveStream {
  name: string;
  img: string;
  type: 'idn' | 'showroom' | 'youtube';
  started_at: string;
  streaming_url_list: { label: string; quality: number; url: string }[];
}

Interfaces for KLP48 API (wrapped object responses)

// KLP48 always wraps data in this structure
interface KLP48Response<T> {
  success: boolean;
  total: number;
  data: T[];
  message: string;
}

interface KLP48Member {
  id: number;
  name: string;
  generation: string;
  birthdate?: string;
}

interface KLP48NewsItem {
  id: number;
  headline: string;
  publish_date: string;
  content?: string;
}

JKT48 API: Fetch Members

const JKT48_KEY = 'YOUR_API_KEY';

async function getJKT48Members(): Promise<JKT48Member[]> {
  const res = await fetch(
    `https://v2.jkt48connect.com/api/jkt48/members?apikey=${JKT48_KEY}`
  );
  if (!res.ok) throw new Error(`HTTP ${res.status}`);

  const members: JKT48Member[] = await res.json();
  const active = members.filter(m => !m.is_graduate);
  console.log(`Active JKT48 members: ${active.length}`);
  return active;
}

JKT48 API: Fetch Live Streams

async function getJKT48Live(): Promise<JKT48LiveStream[]> {
  const res = await fetch(
    `https://v2.jkt48connect.com/api/jkt48/live?apikey=${JKT48_KEY}`
  );
  const streams: JKT48LiveStream[] = await res.json();

  streams.forEach(s => {
    console.log(`🔴 ${s.name} on ${s.type.toUpperCase()}`);
  });
  return streams;
}

KLP48 API: Fetch Members (Priority Token)

const PRIORITY_TOKEN = 'P-ABCD1234';

async function getKLP48Members(): Promise<KLP48Member[]> {
  const res = await fetch(
    'https://v2.jkt48connect.com/api/klp48/members', {
      headers: { 'x-priority-token': PRIORITY_TOKEN }
    }
  );

  const result: KLP48Response<KLP48Member> = await res.json();

  if (!result.success) throw new Error(result.message);
  console.log(`KLP48 members: ${result.total}`);
  return result.data;
}

KLP48 API: Fetch News with Pagination

async function getKLP48News(page = 1): Promise<KLP48NewsItem[]> {
  const res = await fetch(
    `https://v2.jkt48connect.com/api/klp48/news?page=${page}&perpage=10`, {
      headers: { 'x-priority-token': PRIORITY_TOKEN }
    }
  );

  const result: KLP48Response<KLP48NewsItem> = await res.json();
  if (!result.success) throw new Error(result.message);

  result.data.forEach(n => console.log(`📰 ${n.headline}`));
  return result.data;
}

Generic Reusable Helper

async function fetchKLP48<T>(endpoint: string, params = ''): Promise<T[]> {
  const res = await fetch(
    `https://v2.jkt48connect.com/api/klp48/${endpoint}${params ? '?' + params : ''}`, {
      headers: { 'x-priority-token': PRIORITY_TOKEN }
    }
  );
  const result: KLP48Response<T> = await res.json();

  if (!result.success) throw new Error(result.message);
  return result.data;
}

// Usage
const schedule = await fetchKLP48<any>('schedule', 'status=upcoming');
const releases = await fetchKLP48<any>('releases');
const birthdays = await fetchKLP48<any>('birthdays/3');

TypeScript

On this page