ts_for_core

This project provides Drupal core TypeScript definitions for Drupal frontend developing.

Supporting Drupal core version

Drupal 10, Drupal 11

How to use

1. Add this repogitory git url to the devDependencies using Node.js package manager like yarn or npm.
   • npm i -D git+ssh://[email protected]:project/ts_for_core.git#VERSION
2. Configure TypeScript module settings to tsconfig.json like below.
3. Add import type statement on your TypeScript code to load the Drupal core TypeScript definition. The library definition is almost same as core.libraries.yml definition but drupalSettings and once.js are not same. See below example code.

Example tsconfig.json:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
}

Example code:

// Import each library definition.
import type {} from 'ts_for_core/drupal';
import type {} from 'ts_for_core/drupal.ajax';

// The drupalSettings and once.js definitions are not same as the core library definitions.
import type {} from 'ts_for_core/drupal_settings';
import type {} from 'ts_for_core/@drupal__once'

Actually used project

• Dialog Native

Extends Drupal specific type

drupalSettings

declare global {
  namespace drupalSettings {
    const someVariable: string|number
  }
}

/*
 * If there is no export/import in a d.ts file, TS2669 error occurs by TypeScript.
 * See https://stackoverflow.com/questions/57132428/augmentations-for-the-global-scope-can-only-be-directly-nested-in-external-modul.
 */
export type {}

Drupal.theme

declare global {
  namespace Drupal {
    namespace theme {
      let someTheme: (arg1: string) => HTMLElement
    }
  }
}

export type {}

A behavior with additional properties

declare global {
  namespace Drupal {
    interface behaviorAdditionalPropsMap {
      someBehavior : {
        additionalProp: Array<string>
      }
    }
  }
}

export type {}

AjaxCommand

import type { ajaxCommand } from "drupal.ajax"

declare global {
  namespace Drupal {
    interface definedAjaxCommands {
      someCommand: ajaxCommand<
        'someCommand',
        {
          arg1: number,
          arg2: boolean,
        },
        string
      >
    }
  }
}