Principle:Langgenius Dify Type Safety

Knowledge Sources	Dify
Domains	Frontend, TypeScript
Last Updated	2026-02-12 07:00 GMT

Overview

Dify enforces strong TypeScript typing across its frontend, spanning model type definitions, API contract types, context factories, and feature configuration types to catch errors at compile time rather than runtime.

Description

The Dify frontend organizes its TypeScript types into several distinct layers. Model types (models/common.ts, models/log.ts, models/explore.ts, etc.) define the shapes of data returned by the backend API, including user profiles, workspace configurations, model providers, log entries, and application definitions. These types are imported by service modules to provide typed return values for API calls, ensuring that components consuming API data receive compile-time guarantees about available properties.

API contract types are established through the service layer, where functions like get<T> and post<T> accept generic type parameters that flow through the React Query hooks to component props. The contract-router pattern ensures that route parameters and API payloads are typed end-to-end. Feature types (types/feature.ts) define the configuration shapes for application features such as opening statements, suggested follow-ups, speech-to-text settings, citation preferences, and moderation configurations.

The typed context factory (utils/context.ts) uses TypeScript generics to propagate context value types from the factory call site through to the consumer hook return type, making context access fully type-safe. Document path types (types/doc-paths.ts) provide compile-time safety for knowledge base document navigation paths. Throughout the codebase, as const assertions on query key arrays and enum-like objects ensure that TypeScript infers literal types rather than widened string or number types, enabling precise cache key matching and exhaustive switch statements.

Usage

Use this principle when:

Defining new API response shapes or request payload types for backend endpoints
Adding typed feature configuration options or extending existing feature type definitions
Creating typed React contexts, route parameters, or query key factories

Theoretical Basis

Strong typing implements the principle of Static Type Safety where the compiler serves as an automated correctness checker. The use of generics across the service layer, React Query hooks, and context factories follows the Parametric Polymorphism principle, enabling code reuse without sacrificing type precision. The layered type organization (models, types, contracts) reflects Domain-Driven Design type boundaries where each layer owns its type definitions and communicates through well-defined interfaces.

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment