小编San*_*ord的帖子

我正在尝试用React,TypeScript和Webpack组建一个非常基础的项目.当我编译时,我从react文件夹中得到以下错误node_modules(我已经删除了堆栈跟踪和我的项目的简洁路径):

ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyFunction' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyFunction' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyObject' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyObject' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/invariant' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/warning' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.production.min.js …

我正在使用以下组件在我的应用程序中提交评论：

const App = () => {
    const [text, setText] = React.useState("");

    const send = React.useCallback(() => {
        setText("");
        console.log("sending", text);
    }, [text]);

    React.useEffect(() => {
        const handler = e => {
            switch (e.keyCode) {
                case 13: // enter
                    if (e.shiftKey) {
                        e.preventDefault();
                        send();
                    }
                    break;
            }
        }
        
        document.addEventListener("keydown", handler);
        return () => document.removeEventListener("keydown", handler);
    }, []);

    return <div className="App">
        <textarea
            className="App__text"
            value={text}
            onChange={e => {
                setText(e.target.value);
            }} />
        <button className="App__send" onClick={send}>send</button>
    </div>;
};

工作演示在这里

这是一个简单的文本字段和按钮。当按下按钮或 Shift-Enter 时，文本字段中的文本将被发送到服务器（这里只是console.log它）。 …

我正在解析返回的颜色字符串，getComputedStyle以从中获取R、G、B和A值。

到目前为止（在 Chrome 和 Firefox 中），颜色值似乎总是以易于解析的rgb或格式返回：rgba

const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);

然而，我无法在其MDN 页面上列出的任何规格中找到有关颜色格式的任何承诺。getComputedStyle

颜色格式有保证吗getComputedStyle？还是完全取决于浏览器的实现？

我不想检查 HEX 和 HSLA 值（实际上还有其他可能的值 - 我不完全确定）。

用于在控制台中测试颜色值的快速代码片段：

const [, r, g, b, a] = str.replace(/\s/g, "").match(/rgba?\((\d+(?:\.\d+)?),(\d+(?:\.\d+)?),(\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/i);

我正在设计一个小型 API。在其中，开发人员定义一个类和一个配置文件，允许他们在我的系统中使用它。

下面是我的代码的简化：

abstract class Box<T> {
    constructor(protected initialValue: T) {}

    public abstract getDefaultThing(): T;
}

type BoxType = typeof Box;

interface Config {
    boxType: BoxType;
    initialValue: any;
}

function loadConfig(config: Config) {
    // Need to "as any" this so TSC doesn't complain about abstract class
    return new (config.boxType as any)(config.initialValue);
}

Box这里我定义了带有泛型参数的抽象类T。我还提供了一个用于编写配置对象的接口，该对象需要对可实例化 Box 类的引用以及初始值。最后是一个小实现函数，它通过使用 value 创建 Box 的新实例来加载配置initialValue。

一个简单的用法如下：

class MyBox extends Box<string> {
    public getDefaultThing(): any {
        return `${this.initialValue} world`;
    }
}

const …

我正在使用 React 构建一个具有未知数量的子元素的元素，我需要对每个元素的引用。考虑以下代码：

class Items extends React.Component {
    constructor() {
        super();
        this.itemEls = [];
    }

    render() {
        return (
            <div>
                {
                    this.props.items.map((item, index) => {
                        return <div className="item" key={index} ref={(el) => this.itemEls.push(el)}>{item}</div>;
                    })
                }
            </div>
        );
    }

    componentDidMount() {
        console.log(this.itemEls.map((el) => el.innerHTML));
    }
}

ReactDOM.render(<Items items={["Hello", "World", "Foo", "Bar"]} />, document.getElementById('container'));

.item {
  display: inline-block;
  background: #EEE;
  border: 1px solid #DDD;
  color: #999;
  padding: 10px;
  font-family: sans-serif;
  font-weight: bold;
  margin: 10px;
  border-radius: 5px;
  cursor: default;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> …

我正在尝试使用 SCSS 设置进度条的样式。为了使其在 Webkit 和 Gecko 浏览器中都能工作，我需要同时使用-webkit和-moz前缀：

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
    
    &::-moz-progress-bar,
    &::-webkit-progress-value {
        background-color: orange;
    }
    
    &::-webkit-progress-bar {
        background-color: cyan;
    }
}

这呈现为

progress {
  height: 50px;
  -webkit-appearance: none;
  appearance: none;
  background: cyan;
}
progress::-moz-progress-bar, progress::-webkit-progress-value {
  background-color: orange;
}
progress::-webkit-progress-bar {
  background-color: cyan;
}

这在 Firefox 中效果很好，但 Chrome 似乎不喜欢它。比较以下两个实现：

逗号分隔选择器

progress {
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
    background: cyan;
    
    &::-moz-progress-bar,
    &::-webkit-progress-value {
        background-color: orange;
    }
    
    &::-webkit-progress-bar { …

我编写了以下简单的C#控制台应用程序来导出Excel工作簿中的所有图表.它工作得很好,除非打开文档后没有滚动到图表,在这种情况下会生成一个空图像文件.

using Excel = Microsoft.Office.Interop.Excel;
using System;
using System.Diagnostics;

namespace ExcelExporter
{
    class ChartExporter
    {
        const string EXPORT_TO_DIRECTORY = @"C:\Users\Sandy\Desktop\Excel\Charts";

        static void Main(string[] args)
        {
            Excel.Application app = System.Runtime.InteropServices.Marshal.GetActiveObject("Excel.Application") as Microsoft.Office.Interop.Excel.Application;

            ConsoleColor c = Console.ForegroundColor;
            Console.ForegroundColor = ConsoleColor.Green;
            Console.Write("Export To: ");
            Console.ForegroundColor = c;
            string exportPath = Console.ReadLine();

            if (exportPath == "")
                exportPath = EXPORT_TO_DIRECTORY;

            Excel.Workbook wb = app.ActiveWorkbook;

            foreach (Excel.Worksheet ws in wb.Worksheets)
            {
                Excel.ChartObjects chartObjects = (Excel.ChartObjects)(ws.ChartObjects(Type.Missing));

                foreach (Excel.ChartObject co in chartObjects)
                {
                    Excel.Chart chart = …

我在使用对象文字时使用泛型来帮助简化界面构建过程。因此，例如，我的所有使用字符串作为键的对象的基本接口是

interface IStringTMap<T> { [s: string]: T; };

如果我想用它来强制对象完全由函数组成，我会创建一个新接口

interface IStringFunctionMap extends IStringTMap<Function> { };

然而，有时我想使用更复杂的对象。例如，假设我想构建以下结构：

var obj = {
    "group_1" : {
        "func_1" : function() {},
        "func_2" : function() {}
    },
    "group_2" : {
        "func_1" : function() {},
        "func_2" : function() {}
    }
}

我可以很容易地从原始位构建这个界面

interface IFunctionGroups { [s: string]: { [s: string]: Function } };

我将如何使用现有的界面使其更具可读性IStringTMap？

我尝试过使用我的穴居人逻辑，但只是将一个界面推入另一个界面

interface IFunctionGroups extends IStringTMap<IStringFunctionMap>;

给我以下错误：

接口仅使用可选类型参数扩展标识符/限定名称。

JS小提琴

我有一个正方形，悬停时它向下移动 10px 然后旋转。当离开悬停时，我希望它向后旋转，然后移回 0px。

不幸的是，它不会以相反的顺序执行动画。

所以它应该，在悬停时：

1. 向下移动 10px。
2. 旋转 45 度。

关闭悬停：

1. 旋转回 0 度。
2. 移回0px的原始位置；

代码：

div{
  width: 100px;
  height: 100px;
  background: blue;
  top: 0;
  cursor: pointer;
  position: absolute;
  transition: top 0.3s ease;
  transition: transform 0.3s 0.3s ease;
}

div:hover{
  top: 10px;
  transform: rotate(45deg);
}

<div>

</div>

我正在破坏正则表达式匹配的结果

function getStuffIWant(str: string): string {
    const [
        fullMatch,   // [ts] 'fullMatch' is declared but its value is never read.
        stuffIWant,
    ] = str.match(/1(.*)2/);

    return stuffIWant;
}

getStuffIWant("abc1def2ghi");

正如评论所指出的，fullMatch从未使用过，TSC希望我知道。 有没有办法在不关闭所有未使用支票的情况下抑制此错误？

我也尝试将数组解压缩为一个对象：

const {
    1: stuffIWant, // Unexpected SyntaxError: Unexpected token :
} = str.match(/1(.*)2/);