什么是 IntlayerNode 类型？

IntlayerNode<T> 类型是由 intlayer 的软件包（如 next-intlayer、react-intlayer、vue-intlayer、preact-intlayer、solid-intlayer、angular-intlayer、svelte-intlayer、lit-intlayer 和 vanilla-intlayer）提供的特殊类型。

使用示例

import { t, type Dictionary } from "intlayer";
import type { ComponentChildren } from "preact";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Preact",
  },
} satisfies Dictionary;

export default appContent;

import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { title } = useIntlayer("app");  return title; // 返回类型：IntlayerNode<string>};

为什么 Intlayer 插入 IntlayerNode？

Intlayer 插入 IntlayerNode 是为了能够在 CMS / 可视化编辑器的上下文中渲染可视化编辑器的选择器（Selectors）。

IntlayerNode 是一个增强的 React/Vue/Preact/Solid/Angular/Svelte/Lit/Vanilla 节点，但也可以访问基础原始节点的属性。

例如：

const content = useIntlayer("app");// 字符串的情况content.title; // 返回 IntlayerNode<string>content.title.value; // 返回基础内容，这里是一个字符串content.title.toString(); // 返回字符串content.title.toLowerCase(); // 返回字符串String(content.title); // 返回字符串content.title.toUpperCase(); // 返回大写字符串content.title.replace("a", "b"); // 返回修改后的字符串// ...

访问 IntlayerNode 的属性是可行的，但会破坏在可视化编辑器中显示选择器的能力。

IntlayerNode 也可以包装数字或其他类型，如 IntlayerNode<number>