第一个类型表示这个数组要么全都是 number，要么全都是 string，二者不可交叉出现。

第二个类型表示这个数组每个元素要么是 number，要么是 string，二者可以交叉出现。

而你用第一种类型的时候：

const arr: Arr = [];

此时 arr 里到底应该必须只存 number 还是必须只 string 是未知的，所以后面你必须先断言才可以 push。

type Arr = number[] | string[];
type Arr1 = Array<string | number>;

const arr: Arr = [];
arr.push('123');

请问，为何使用Arr1不报错，Arr报错？

请问，以下字符串如何拆分成数组，要求不能拆数组和对象：

const text = "a,b,c,[1,2,3],d,{a:1,b:2}";


const parseText = (text) => {
    //todo
}

parseText(text); //["a","b","c","[1,2,3]","d","{a:1,b:2}"];

- const a: Weekday = 100;
+ const a = 100 as Weekday;

- const b: Direction = 'DOWN';
+ const b = 'DOWN' as Direction;

我再补充一下，如果你想校验有效性可以这样：

if (a in Weekday) {}

if (b === Direction.Down) {}

这个问题上周研究了半天，大佬们回答的 断言 和 Direction.DOWN 取代 'DOWN' 也可以临时规避此问题。

此类问题在typescript github上有很多issue反馈，似乎是ts设计问题。

#32690中，提问者给出一种解决方法：

namespace MyEnum {
  export const Zero = 0;
  export type Zero = typeof Zero;

  export const One = 1;
  export type One = typeof One;
}
type MyEnum = typeof MyEnum[keyof typeof MyEnum];
const foo: MyEnum.Zero = 0 // okay as expected
const bar: MyEnum.Zero = 1 // error as expected

其它相关issues：#31834，#30629，#26362，#22464，#22311

问题1：如下写法为何不报错呢？我理解变量 a 的值应该是 1 ~ 7?

enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday,
}
//不报错
const a: Weekday = 100;

问题2：如下写法为何会报错呢？

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}
//error：不能将类型“"DOWN"”分配给类型“Direction”
const b: Direction = 'DOWN';

问题3：那如何实现上面的这种需求呢？

之前的例子举的不太好，重新描述一下：

假设已经定义了一个 Weekday 枚举：

enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
  Sunday
}

现在想定义一个 WeekdayName 类型，它的值是 string ，且刚好是 Weekday 的key，目前的写法是：

type WeekdayName = 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday' | 'Sunday';

问题：有没有什么更优雅、简便的方法来定义 WeekdayName 或者 Weekday ？最好是让它们能够相互关联。

经过一番搜索找到了答案，官方文档

1、实例化的时候，不存在的属性不是响应式的：

2、参考setup文档

从生命周期钩子的视角来看，setup 会在 beforeCreate 钩子之前被调用。

再查看beforeCreate文档

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

因此，setup执行时，响应式属性已经确定，所以之后添加的属性不是响应式的。

请问一下，如下代码中当changeData执行后，未触发watch，是为什么？ps：使用注释的那段代码是能够监听到的。

export default {
  name: 'App',
  setup() {
    const stateRef = reactive<any>({
      data: {},
    });
    
    // const stateRef = reactive<any>({
    // data: {a:0},
    // });

    const changeData = () => {
      stateRef.data.a = Math.random();
    };

    watch(
      () => stateRef,
      () => {
        console.log(stateRef.data.a);
      },
      {
        deep: true,
      },
    );

    return {
      changeData,
    };
  },
}

下面方法也不行，是为什么呢？

export default {
  name: 'App',
  setup() {
    const stateRef = reactive<any>({
      data: {},
    });
    stateRef.data.a = 0; // 新增此行
    
    const changeData = () => {
      stateRef.data.a = Math.random();
    };

    watch(
      () => stateRef,
      () => {
        console.log(stateRef.data.a);
      },
      {
        deep: true,
      },
    );

    return {
      changeData,
    };
  },
}

interface BaseTreeNode<T> {
  id: number | string
  name: string
  childNode: T[]
}

interface AntdTreeNode<T> {
  key: number | string
  title: string
  children: AntdTreeNode<T>[]
  data: T
  scopedSlots?: unknown
}

function baseTreeNodesToAntdTreeNodes<T extends BaseTreeNode<T>>(
  baseTreeNodes: T[],
): AntdTreeNode<T>[] {
  return baseTreeNodes.map(node => ({
    key: node.id,
    title: node.name,
    children: node.childNode
      ? baseTreeNodesToAntdTreeNodes<T>(node.childNode)
      : [],
    data: node,
  }))
}