the Chromium logo

The Chromium Projects

Use Mojom Union in TypeScript and C++

TLDR: Use Mojom Union in TypeScript and C++ - add union to mojom file - in frontend, get union value with if statement - in backend, create mojom pointer object with union type function - check and get union value with union name functions


I need to create a mojom union and use it at both frontend and backend. For example, I add a RemappingAction union in mojom file and I want to use it at both frontend and backend.


Mojom change

  1. Add the union to ash/public/mojom/input_device_settings.mojom file. RemappingAction will only be AcceleratorAction or KeyEvent or StaticShortcutAction.

    union RemappingAction {
      ash.mojom.AcceleratorAction accelerator_action;
      KeyEvent key_event;
      StaticShortcutAction static_shortcut_action;

Frontend change

Key steps:

  1. When getting the union value, we need to include the remappingAction field.

    const acceleratorAction =
    const keyEvent = this.buttonRemapping_.remappingAction?.keyEvent;
    const staticShortcutAction =

    There should be only one value exists, so use if statement to unpack the value.

    if (acceleratorAction !== undefined) {
    } else if (keyEvent !== undefined) {
    } else if (staticShortcutAction != undefined) {

    The remappingAction object will be one of the following:

    remappingAction: {
      acceleratorAction: value,
    remappingAction: {
      keyEvent: value,
    remappingAction: {
      staticShortcutAction: value,

Backend change

Key steps:

  1. When creating the remapping_action mojom pointer object, we can directly call the function with union type to create the mojom pointer object.

        mojom::KeyEvent::New(::ui::KeyboardCode::VKEY_2, 4, 5, 6));

    There should be only one type of remapping_action, we can check and get it with the union name functions.

    if (remapping_action->is_accelerator_action()) {
    } else if (remapping_action->is_key_event()) {
    } else if (remapping_action->is_static_shortcut_action()) {

Example CL