fix: fix tree key ts type (#23348)

* fix tree key ts type

* revert snap

components/tree/DirectoryTree.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import debounce from 'lodash/debounce';
 import { conductExpandParent } from 'rc-tree/lib/util';
-import { EventDataNode, DataNode } from 'rc-tree/lib/interface';
+import { EventDataNode, DataNode, Key } from 'rc-tree/lib/interface';
 import { convertDataToEntities, convertTreeToData } from 'rc-tree/lib/utils/treeUtil';
 import FileOutlined from '@ant-design/icons/FileOutlined';
 import FolderOpenOutlined from '@ant-design/icons/FolderOpenOutlined';
@@ -20,8 +20,8 @@ export interface DirectoryTreeProps extends TreeProps {
 }
 
 export interface DirectoryTreeState {
-  expandedKeys?: string[];
+  expandedKeys?: Key[];
-  selectedKeys?: string[];
+  selectedKeys?: Key[];
 }
 
 function getIcon(props: AntdTreeNodeAttribute): React.ReactNode {
@@ -60,9 +60,9 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
   onDebounceExpand: (event: React.MouseEvent<HTMLElement>, node: EventDataNode) => void;
 
   // Shift click usage
-  lastSelectedKey?: string;
+  lastSelectedKey?: Key;
 
-  cachedSelectedKeys?: string[];
+  cachedSelectedKeys?: Key[];
 
   constructor(props: DirectoryTreeProps) {
     super(props);
@@ -93,7 +93,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
   }
 
   onExpand = (
-    expandedKeys: string[],
+    expandedKeys: Key[],
     info: {
       node: EventDataNode;
       expanded: boolean;
@@ -139,7 +139,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
   };
 
   onSelect = (
-    keys: string[],
+    keys: Key[],
     event: {
       event: 'select';
       selected: boolean;
@@ -167,7 +167,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     const shiftPick: boolean = nativeEvent.shiftKey;
 
     // Generate new selected keys
-    let newSelectedKeys: string[];
+    let newSelectedKeys: Key[];
     if (multiple && ctrlPick) {
       // Control click
       newSelectedKeys = keys;

components/tree/Tree.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import RcTree, { TreeNode, TreeProps as RcTreeProps } from 'rc-tree';
 import classNames from 'classnames';
-import { DataNode } from 'rc-tree/lib/interface';
+import { DataNode, Key } from 'rc-tree/lib/interface';
 
 import DirectoryTree from './DirectoryTree';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -34,7 +34,7 @@ export interface AntTreeNodeProps {
   disabled?: boolean;
   disableCheckbox?: boolean;
   title?: string | React.ReactNode;
-  key?: string;
+  key?: Key;
   eventKey?: string;
   isLeaf?: boolean;
   checked?: boolean;
@@ -76,13 +76,13 @@ export interface AntTreeNodeMouseEvent {
 }
 
 export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
-  expandedKeys: string[];
+  expandedKeys: Key[];
 }
 
 export interface AntTreeNodeDropEvent {
   node: AntTreeNode;
   dragNode: AntTreeNode;
-  dragNodesKeys: string[];
+  dragNodesKeys: Key[];
   dropPosition: number;
   dropToGap?: boolean;
   event: React.MouseEvent<HTMLElement>;
@@ -109,21 +109,21 @@ export interface TreeProps extends Omit<RcTreeProps, 'prefixCls'> {
   /** 默认展开对应树节点 */
   defaultExpandParent?: boolean;
   /** 默认展开指定的树节点 */
-  defaultExpandedKeys?: string[];
+  defaultExpandedKeys?: Key[];
   /** （受控）展开指定的树节点 */
-  expandedKeys?: string[];
+  expandedKeys?: Key[];
   /** （受控）选中复选框的树节点 */
-  checkedKeys?: string[] | { checked: string[]; halfChecked: string[] };
+  checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };
   /** 默认选中复选框的树节点 */
-  defaultCheckedKeys?: string[];
+  defaultCheckedKeys?: Key[];
   /** （受控）设置选中的树节点 */
-  selectedKeys?: string[];
+  selectedKeys?: Key[];
   /** 默认选中的树节点 */
-  defaultSelectedKeys?: string[];
+  defaultSelectedKeys?: Key[];
   selectable?: boolean;
   /** 点击树节点触发 */
   filterAntTreeNode?: (node: AntTreeNode) => boolean;
-  loadedKeys?: string[];
+  loadedKeys?: Key[];
   /** 设置节点可拖拽（IE>8） */
   draggable?: boolean;
   style?: React.CSSProperties;

components/tree/utils/dictUtil.ts

@@ -1,4 +1,4 @@
-import { DataNode } from 'rc-tree/lib/interface';
+import { DataNode, Key } from 'rc-tree/lib/interface';
 
 enum Record {
   None,
@@ -8,7 +8,7 @@ enum Record {
 
 function traverseNodesKey(
   treeData: DataNode[],
-  callback: (key: string | number | null, node: DataNode) => boolean,
+  callback: (key: Key | number | null, node: DataNode) => boolean,
 ) {
   function processNode(dataNode: DataNode) {
     const { key, children } = dataNode;
@@ -23,11 +23,11 @@ function traverseNodesKey(
 /** 计算选中范围，只考虑expanded情况以优化性能 */
 export function calcRangeKeys(
   treeData: DataNode[],
-  expandedKeys: string[],
+  expandedKeys: Key[],
-  startKey?: string,
+  startKey?: Key,
-  endKey?: string,
+  endKey?: Key,
-): string[] {
+): Key[] {
-  const keys: string[] = [];
+  const keys: Key[] = [];
   let record: Record = Record.None;
 
   if (startKey && startKey === endKey) {
@@ -37,11 +37,11 @@ export function calcRangeKeys(
     return [];
   }
 
-  function matchKey(key: string) {
+  function matchKey(key: Key) {
     return key === startKey || key === endKey;
   }
 
-  traverseNodesKey(treeData, (key: string) => {
+  traverseNodesKey(treeData, (key: Key) => {
     if (record === Record.End) {
       return false;
     }
@@ -71,10 +71,10 @@ export function calcRangeKeys(
   return keys;
 }
 
-export function convertDirectoryKeysToNodes(treeData: DataNode[], keys: string[]) {
+export function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[]) {
-  const restKeys: string[] = [...keys];
+  const restKeys: Key[] = [...keys];
   const nodes: DataNode[] = [];
-  traverseNodesKey(treeData, (key: string, node: DataNode) => {
+  traverseNodesKey(treeData, (key: Key, node: DataNode) => {
     const index = restKeys.indexOf(key);
     if (index !== -1) {
       nodes.push(node);