小编shu*_*ksh的帖子

我试图通过使用Array.prototype.filter从数组中过滤null(undefined)元素,但TypeScript编译器似乎无法识别"过滤器"函数的派生数组并且未能通过类型检查.

假设遵循简化代码,其中我有一个带有(number | undefined)[]类型的数组,并希望过滤undefined以适合number []数组.

const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = arry
    .map((i) => {
        return typeof i === "number" ? i : void 0;
    })
    .filter((i) => i);

错误说:

类型'(number | undefined)[]'不能分配给'number []'.输入'号码| undefined'不能分配给'number'类型.类型'undefined'不能分配给'number'类型.

我可以将结果数组转换为数字[],如下所示,知道过滤器函数删除undefined.

const arry = [1, 2, 3, 4, "5", 6];
const numArry: number[] = (arry
    .map((i) => {
        return typeof i === "number" ? i : void 0;
    })
    .filter((i) => i) as Number[]);

除了铸造之外,还有更好的方法来实现这一目标吗？

环境:TSC2.1启用了strictNullChecks.

我正在使用Typescript为我的React项目编写一个高阶组件,它基本上是一个函数接受一个React组件作为参数并返回一个包装它的新组件.

然而,由于它按预期工作,TS抱怨"返回类型的导出函数已经或正在使用私有名称"匿名类".

有问题的功能:

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component,
) {
    return class extends React.Component<Props & State, {}> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

错误是合理的,因为没有导出返回的包装函数类,而其他模块导入此函数无法知道返回值是什么.但我无法在此函数之外声明返回类,因为它需要将组件传递包装到外部函数.

typeof React.Component如下所示明确指定返回类型的试验可以抑制此错误.

有明确返回类型的函数:

export default function wrapperFunc <Props, State> (
    WrappedComponent: typeof React.Component,
): typeof React.Component {                     // <== Added this
    return class extends React.Component<Props & State, {}> {
        public render() {
            return <WrappedComponent {...this.props} {...this.state} />;
        }
    };
}

但是,我不确定这种方法的有效性.它是否被认为是解决TypeScript中此特定错误的正确方法？(或者我是否在其他地方造成了意想不到的副作用？或者更好的方法是这样做？)

(编辑)根据丹尼尔的建议更改引用的代码.

假设您有以下组件接受一个或多个子 JSX.Elements 并在使用React.cloneElement(child, { onCancel: () => {} }.

有问题的组件（摘录）：

interface XComponentProps {
    onCancel: (index: number) => void;
}

class XComponent extends React.Component<XComponentProps> {
    render() {
        const { onCancel } = this.props;
        const children = typeof this.props.children === 'function' ?
            React.cloneElement(this.props.children, { onCancel: () => onCancel() }) :
            this.props.children.map((child, idx) => (
                React.cloneElement(child, { onCancel: () => onCancel(idx) })
            ));
        return <div>{children}</div>;
    }
}

正在运行的相关组件（摘录）：

interface UserComponentProps { caption: string }
const UserComponent = (props: UserComponentProps) => ( …

我试图通过将任意TypedArray作为输入来编写一个扩展/收缩TypedArray的函数,并返回一个具有不同大小的新的同型TypedArray并将原始元素复制到其中.

例如,当您通过new Uint32Array([1,2,3])新尺寸时5,它将返回new Uint32Array([1,2,3,0,0]).

export const resize = <T>(
    source: ArrayLike<T>, newSize: number,
): ArrayLike<T> => {
    if (!source.length) { return new source.constructor(newSize); }
    newSize = typeof newSize === "number" ? newSize : source.length;
    if (newSize >= source.length) {
        const buf = new ArrayBuffer(newSize * source.BYTES_PER_ELEMENT);
        const arr = new source.constructor(buf);
        arr.set(source);
        return arr;
    }
    return source.slice(0, newSize);
};

虽然代码按预期工作,但TSC抱怨1)ArrayType没有BYTES_PER_ELEMENT和slice,以及2)Cannot use 'new' with an expression whose type lacks a …