这个问题上周研究了半天，大佬们回答的 断言 和 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,
  }))
}

后来又思考了一下，问题出在baseTreeNodesToAntdTreeNodes<T>(node.childNode)中的node.childNode和T之间。

思考一下node.childNode是什么类型？伪代码：

node ==> baseTreeNodes(T[]) ==> T
node.childNode ==> T.childNode

所以，问题出在没有说明T.childNode的类型就是T，前面泛型约束时只约束了T extends BaseTreeNode，也就是T.childNode === BaseTreeNode[]。

问题找到了，但是解决方法暂时没有想到。断言肯定是可以解决的，但是不太好：

children: node.childNode ? dmTreeNodesToAntdTreeNodes<T>(node.childNode as T[]) : [],

后续如果有想到解决方法我再补充。

interface BaseTreeNode {
  id: number | string;
  name: string;
  childNode: BaseTreeNode[];
}

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

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

以上代码类型报错如下，请问下为什么？

ps: 这里用泛型是因为BaseTreeNode是一个基类，还会有一堆派生类想共用此函数，比如：

interface FooTreeNode extends BaseTreeNode {
    foo: string;
}

const fooTreeNodes:FooTreeNode[] = ...;

const antdTreeNodes = baseTreeNodesToAntdTreeNodes<FooTreeNode>(fooTreeNodes);

你可以试一试 reverse-sourcemap

刚才用create-react-app创建了一个项目，发现没有波浪线错误提示了？打开之前创建的其它项目还是有提示的。

ps：这两个项目根目录都没有.eslintrc文件，都是通过create-react-app创建的，只是时间不同。

--- 20200520 补充 ---

验证了好久，发现用vscode同时打开多个项目会出现此问题。从第2个项目开始就没有eslint提示了。不知道是出于性能考虑特地优化的，还是bug。