小编wen*_*jun的帖子

我有一个这样的枚举：

export enum Colors {
    RED = "RED COLOR",
    BLUE = "BLUE COLOR",
    GREEN = "GREEN COLOR"
}

你能告诉我如何按值获取枚举键吗？即，我需要通过“BLUE COLOR”并获得“BLUE”。

Colors["BLUE COLOR"] 给出错误 Element implicitly has an 'any' type because expression of type '"BLUE COLOR"' can't be used to index type 'typeof Colors'. Property 'BLUE COLOR' does not exist on type 'typeof Colors'.

我试图react-router-dom在我的一个测试用例中进行模拟，以便useHistory钩子在我的测试中起作用。我决定使用jest.mock模拟整个模块，并jest.requireActual保留我可能不想模拟的其他属性。

jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useHistory: () => ({
    location: {
      pathname: '/list',
    },
  }),
}));

这实际上源自对以下问题的高度评价的解决方案之一：How to mock useHistory hook in jest？

但是，TypeScript 编译器在以下行中标记以下错误 ...jest.requireActual('react-router-dom'),

TS2698：传播类型只能从对象类型创建。

有趣的是，我只在将 jest 和 ts-jest 更新到最新版本（jest v26）后才遇到这个问题。当我使用 jest 24.xx 时，我没有遇到任何这些问题

"@types/jest": "^26.0.4",
"jest": "^26.1.0",
"ts-jest": "^26.1.1",

有谁知道如何为最新的 jest 版本解决这个问题？

有以下（只是一个简单的例子）：

observable.pipe(map( s => s.anything ))
          .pipe(filter(t => t > 5))
          .pipe(map( t => t+5))
          .subscribe( XXX )

为什么我应该使用 1 个管道？

    observable.pipe(
                   map( s => s.anything ), filter(t => t > 5),map( t => t+5))
              .subscribe( XXX )

对我来说，第一种情况下的代码更漂亮、更易读。但不知道这是否会影响行为。

我正在练习打字稿。对于后端，我使用了 node express typescript，对于前端，我使用了 react typeScript。我从后端获取数据并尝试在我的浏览器上呈现它。我收到一个错误：property 'name' does not exist on type 'never'. TS2339。我认为这个错误来自打字稿。这是错误可视化

这是我的后端设置

import express = require("express");
import cors = require("cors");
const app = express();
app.use(cors());
const port = 8080;
app.get("/", (req, res) =>
  res.send([
    {
      name: "John",
      age: 36
    },
    {
      name: "alex",
      age: 27
    }
  ])
);

app.listen(port, () => console.log(`server running port ${port}`));

这是我的 React 组件

    import React, { useEffect, useState } from "react";

interface StateProperties {
  name: string;
  age: number;
} …

我正在使用 Angular (v6) 服务从后端获取数据并将其存储在变量中。我只想调用 api 一次，并在不同组件需要时提供数据。

问题是我从不同的组件调用服务中的 getPlans() 函数来获取数据，并且对于每个调用，我在浏览器的网络选项卡中看到一个 api 调用。

如何避免每次调用 getPlans() 函数时都调用并提供调用 api 一次的数据并将其存储到变量中？

export class PlansService {
  private plansData:any = {};

  constructor(private httpCallService: HttpCallService, private http: HttpClient) { 

    this.plansData = this.httpCallService.getHttpResponse("GET_PLANS");

  }
  getPlans(): Observable<any>{
    return this.plansData;
   }

}

我正在使用 Angular 8（在 Visual Studio 2019 中启动了一个项目）并拥有fabric.init.ts包含以下内容的文件：

import 'fabric';
import * as fabric from 'fabric/fabric-impl';

// (TS) Property 'DPI' does not exist on type 'typeof import(..@types/fabric/fabric-impl)'
fabric.DPI = 213;
....

接下来就可以了，因为它符合 d.ts 定义：

// Override fabric to meet ourrequirements
fabric.util.object.extend(fabric.Object.prototype, {
  centeredRotation: true,

如何忽略DPITS2339 错误。拥有自动补全功能真是太棒了，特别是对于学习结构而言。

我的package.json：

"private": true,
"dependencies": {
  "@angular/core": "8.2.14",
  ....
  "@angular/router": "8.2.14",
  "@types/fabric": "3.5.1",
  "fabric": "3.5.1",
  ...
},

编辑

现在我通过添加这一行解决了这个问题：

// @ts-ignore
fabric.DPI = 213;

我知道这不是最好的解决方案，我更喜欢@wentjun 的解决方案。

通过更改此：我import * as fabric from …

这是使用rxjs运算符的示例代码，我想打印/获取倒数第二个值。

打字稿

import { from } from 'rxjs';
import { map, last } from 'rxjs/operators';

//emit (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
//add 10 to each value
const example = source.pipe(map(val => val + 10)).pipe(last());
//output: 11,12,13,14,15
const subscribe = example.subscribe(val => console.log(val));

目前它可以打印，15但我希望它改为打印14。

product我在 React 组件中有一个类型：

type TProduct = {
  name: string,
  price: string,
  stock: string
}

我希望通过输入框更改我的组件中的值：

const AddProductCard: React.SFC = () => {
  const classes = useStyles();
  const [product, setProduct] = React.useState({ product:{} as TProduct})
  return (
     <input 
      onChange={e => setProduct({...product ,product: {name: e.target.value }})}
     />
     <input 
      onChange={e => setProduct({...product ,product: {stock: e.target.value }})}
     />
     <input 
      onChange={e => setProduct({...product ,product: {price: e.target.value }})}
     />
    )
  }

我认为通过添加...product它会复制其中所有相同的值product，并仅更改我想要的值，但这似乎不起作用。它将设置一个新的产品对象，尽管它只会使用最近输入的输入重写该对象的全部内容。

然后我尝试了一种不同的界面方法，其中：

interface IProduct {
  name: string;
  price:  string;
  stock: …

我目前正在探索Deno作为概念验证，并且我正在尝试找到合适的方法来在项目中设置 linting。

这是我正在考虑设置的 eslint 配置的一部分，但我确实理解由于 Node.JS 和 Deno 之间的差异，这可能会导致更多问题：

parser: '@typescript-eslint/parser',
extends: [
  'eslint:recommended',
  'plugin:@typescript-eslint/eslint-recommended',
  'plugin:@typescript-eslint/recommended',
],

话虽如此，在 Deno/TypeScript 项目中设置 linting 和格式化的一些实践/方法是什么？

我知道deno lint仍在进行中，缺乏文档阻碍了我目前采用它。

在旧版本的 webpack-dev-server（即 3 及以下）中，我们可以通过设置 的值，使用ngrok隧道简单地暴露 webpack 和 webpack-dev-server 的 websock devServer.public，如下所示：

// WDS v3
devServer: {
  public: 'react-tunnel.ngrok.io',
  // other webpack devServer config
}

这在 React 等框架中开发应用程序时特别有用，因为我们可以创建从本地机器到公共 URL 的安全隧道，以便轻松测试 Web 应用程序。

但是，在最新版本的 webpack-dev-server (v4) 中，该public属性已被替换为有利于client.webSocketURL对象 ( source )。我无法找到任何资源来使用 ngrok 进行这项工作，因为当我将 指向devServer.client.webSocketURL.hostname我的 ngrok 隧道时，websocket 没有正确连接。

// WDS v4

devServer: {
  client: {
    webSocketURL: {
      hostname: 'react-tunnel.ngrok.io',
    },
  },
}

上述实现只是部分解决方案，因为 websocket 没有正确设置，因此它不会热重载。

有谁知道解决这个问题的方法是什么，这样 ngrok 将再次与 webpack-dev-server 一起工作？