IntlayerNode 타입은 무엇인가요?

IntlayerNode<T> 타입은 next-intlayer, react-intlayer, vue-intlayer, preact-intlayer, solid-intlayer, angular-intlayer, svelte-intlayer, lit-intlayer 및 vanilla-intlayer와 같은 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는 CMS / 비주얼 에디터의 컨텍스트에서 비주얼 에디터 셀렉터(Selectors)를 렌더링할 수 있도록 IntlayerNode를 삽입합니다.

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>와 같은 다른 타입도 감쌀 수 있습니다.