匿名用户

匿名用户 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

匿名用户 回答了问题 · 8月17日

解决Typescript枚举类型

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

关注 4 回答 3

匿名用户 提出了问题 · 8月13日

解决Typescript枚举类型

问题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:那如何实现上面的这种需求呢?

关注 4 回答 3

匿名用户 提出了问题 · 8月13日

解决typescript枚举

之前的例子举的不太好,重新描述一下:

假设已经定义了一个 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 ?最好是让它们能够相互关联。

关注 4 回答 2

匿名用户 回答了问题 · 8月11日

vue watch问题

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

1、实例化的时候,不存在的属性不是响应式的:
image.png

2、参考setup文档

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

再查看beforeCreate文档

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

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

关注 2 回答 1

匿名用户 提出了问题 · 8月11日

vue watch问题

请问一下,如下代码中当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,
    };
  },
}

关注 2 回答 1

匿名用户 赞了回答 · 8月5日

解决ts类型问题

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,
  }))
}

关注 1 回答 3

匿名用户 回答了问题 · 8月5日

解决ts类型问题

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

思考一下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[]) : [],

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

关注 1 回答 3

匿名用户 提出了问题 · 8月4日

解决ts类型问题

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,
  }));
}

以上代码类型报错如下,请问下为什么?
image.png

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

interface FooTreeNode extends BaseTreeNode {
    foo: string;
}

const fooTreeNodes:FooTreeNode[] = ...;

const antdTreeNodes = baseTreeNodesToAntdTreeNodes<FooTreeNode>(fooTreeNodes);

关注 1 回答 3

匿名用户 赞了回答 · 7月8日

如何把sourcemap还原成js,vue等文件?

你可以试一试 reverse-sourcemap

关注 9 回答 4

匿名用户 关注了问题 · 5月20日

解决vscode不显示eslint错误

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

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

image.png
image.png

--- 20200520 补充 ---

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

image.png

关注 1 回答 1

认证与成就

  • 获得 27 次点赞
  • 获得 46 枚徽章 获得 3 枚金徽章, 获得 13 枚银徽章, 获得 30 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-01-07
个人主页被 517 人浏览