Client Collections

TypeScript Ambient Declarations (.d.ts)

Get complete IntelliSense, strict type inference, and compile-time validation across your entire frontend codebase without installing any third-party npm packages.

TypeScript .d.tsplayground-api.d.ts

Official Ambient Type Definitions

Contains all model interfaces (User, Post, Comment, Todo, PaymentIntent), request filters, and pagination envelopes under the global PlaygroundApi namespace.

Download playground-api.d.ts

Installation in Next.js, React, or Vite

Place the downloaded playground-api.d.ts into your project's types/ directory and ensure your tsconfig.json includes it:

tsconfig.json

{

"compilerOptions": {

"target": "ES2022",

"lib": ["DOM", "DOM.Iterable", "ESNext"],

"strict": true,

"moduleResolution": "bundler"

"include": [

"src",

"types/**/*.d.ts" // Recognizes playground-api.d.ts automatically

]

}

Using Ambient Types in React Components

No imports necessary — your editor will automatically autocomplete properties and validate response envelopes:

BlogFeed.tsx

// Global types are available without any import statement!

import { useState, useEffect } from 'react';

export function BlogFeed() {

// 1. Strongly typed state using PlaygroundApi namespace

const [posts, setPosts] = useState<PlaygroundApi.Post[]>([]);

const [pagination, setPagination] = useState<PlaygroundApi.PaginationMeta | null>(null);

const [loading, setLoading] = useState(true);

useEffect(() => {

async function loadData() {

const res = await fetch('https://playground.nileslabs.com/api/v1/posts?_limit=5', {

credentials: 'include',

});

// 2. Strongly typed JSON response envelope

const json: PlaygroundApi.PaginatedResponse<PlaygroundApi.Post> = await res.json();

setPosts(json.data);

setPagination(json.pagination);

setLoading(false);

}

loadData();

}, []);

if (loading) return <p>Loading articles...</p>;

return (

<div>

<h2>Blog Feed ({pagination?.total} total)</h2>

{posts.map((post) => (

<h3>{post.title}</h3>

</article>

))}

</div>

);

}

Namespace Interface Preview

A glance at the definitions provided inside the ambient namespace:

playground-api.d.ts

declare namespace PlaygroundApi {

export interface Post {

id: number;

title: string;

body: string;

userId: number;

tags?: string[];

createdAt?: string;

updatedAt?: string;

}

export interface User {

id: number;

name: string;

username: string;

email: string;

address: {

street: string;

suite: string;

city: string;

zipcode: string;

geo: { lat: string; lng: string };

};

phone: string;

website: string;

company: {

name: string;

catchPhrase: string;

bs: string;

};

}

export interface PaginationMeta {

total: number;

page: number;

limit: number;

totalPages: number;

hasNextPage: boolean;

hasPrevPage: boolean;

}

export interface PaginatedResponse<T> {

data: T[];

pagination: PaginationMeta;

}

Want full method autocomplete with zero boilerplate?

Check out our official TypeScript SDK package for isomorphic data fetching and retries.

View TypeScript SDK

PreviousInsomnia Workspace

NextAI Prompt Rules