什么是 TNode

组件库定义了一个新的 API 类型描述：TNode（TNode = Function + ReactNode + Slot）, 用来代替 Function/ReactNode/Slot 等类型。

Vue 实现包含 function 和 slot，function 优先级大于 slot ，形式为 () => VNode。

React 为 ReactNode 。

import * as React from '@types/react';
import * as Vue from 'vue/types/index.d.ts'; // Vue 2
import * as Vue from 'vue/dist/vue.d.ts'; // Vue 3

type TNode = React.ReactNode | ((createElement: Vue.CreateElement) => Vue.VNode) | Vue.Slot;

TNode，用于表示自定义节点

/**
 * TNode For React
 * TNode = ReactNode
 * TNode<params> = (params) => ReactNode
 */
type TNode<T = undefined> = T extends undefined ? ReactNode : (props: T) => ReactNode;

/** TNode For Vue2(props) */
type TNodeReturnValue = import('vue/types/vnode').ScopedSlotReturnValue;

type TNode<T = undefined> = T extends undefined
  ? (h: Vue.CreateElement) => TNodeReturnValue
  : (h: Vue.CreateElement, props: T) => TNodeReturnValue;

/** TNode For Vue3(props) */
type TNode<T = any> = (h: typeof import('vue').h, props?: T) => import('vue').VNodeChild;

/** TNode For Vue(slot) */
<template>
 <div><slot name='content' /></div>
</template>

/** TNode For Angular */
<div>
 <ng-content></ng-content>
</div>

/** TNode For Miniprogram */
<view><slot name='content' /></view>