TypeScript

Overview

KTUI is written in TypeScript and ships declarations for all public entrypoints. Prefer selective imports to keep initialization explicit and predictable.

Import Modes

• @keenthemes/ktui/components/<name>: best for single-component usage.
• @keenthemes/ktui/core: side-effect-free multi-component imports.
• @keenthemes/ktui/init-all: explicit full-library initialization mode.
• @keenthemes/ktui (root): legacy-compatible behavior.

Do not import from private paths such as src or lib/esm.

Recommended Pattern

import {
  KTTogglePassword,
  type KTTogglePasswordConfigInterface,
} from '@keenthemes/ktui/components/toggle-password';
 
const options: KTTogglePasswordConfigInterface = {};
KTTogglePassword.init();

Example: Typed Manual Instance

import {
  KTTooltip,
  type KTTooltipConfigInterface,
  type KTTooltipInterface,
} from '@keenthemes/ktui/core';
 
const tooltipEl = document.querySelector<HTMLElement>('#my_tooltip');
if (!tooltipEl) return;
 
const options: KTTooltipConfigInterface = {
  placement: 'bottom-start',
};
 
const tooltip: KTTooltipInterface = new KTTooltip(tooltipEl, options);
tooltip.show();
tooltip.hide();
tooltip.toggle();

Entry Examples

Use ESM imports so bundlers can tree-shake effectively.

import { KTRating } from '@keenthemes/ktui/components/rating';
import { KTRating as KTRatingCore } from '@keenthemes/ktui/core';
import { initAllComponents } from '@keenthemes/ktui/init-all';

Real-World Guidance

• Prefer component subpaths in SPA pages/features to avoid unrelated initialization.
• Use core if a module needs multiple KTUI components but still wants explicit control.
• Use init-all only when broad initialization is intended.

Strict TypeScript Guidance

KTUI targets strict TypeScript usage and recommends the same for consumers.

• Enable strict mode in your app/library tsconfig ("strict": true).
• Prefer explicit interfaces for public component options and events.
• Avoid unbounded any in application code that interacts with KTUI APIs.
• Narrow unknown values before use (for example, API responses or custom template data).

{
  "compilerOptions": {
    "strict": true
  }
}

Migration Tips

• Replace root imports with components/<name> or core where possible.
• Keep @keenthemes/ktui root import only when legacy auto-init behavior is required.
• For unknown nested values, guard with typeof value === 'object' && value !== null before property access.

See also

• JavaScript