JavaScript中的抽象/接口类

问题描述

我正在使用react进行前端开发。在iOS中，我们有一个叫做abstract class的东西，它是 PROTOCOL 的实现，在进行依赖注入时，我不必导入整个对象，我只需要导入协议即可使用它。 javascript / react中有类似的功能吗？

解决方法

听起来像您想要的TypeScript

TypeScript使您可以访问接口，并使JS成为强类型语言。然后将其转译为JS，但是在您的构建过程中。

您可以这样声明一个接口

var _ = require('lodash')

const data = {"timeline": [ { "series": "series1","data": [ { "date": "20200713T120000Z","value": 0 },{ "date": "20200714T120000Z","value": 8 },{ "date": "20200715T120000Z","value": 0 }] },{ "series": "series2",{ "series": "series3","value": 1 },{ "series": "series4","value": 2 },"value": 4 }] }] }

const t = _.flattenDeep(data.timeline.map(i => i.data.map(d => ({...d,series: i.series}))))

const result = t.reduce((acc,i) => {
    const index = acc.findIndex(a => a.date === i.date)
    if(index !== -1){
        acc[index] = {
            ...acc[index],[i.series]: i.value
        }

        
    }else {
        acc.push({
            date: i.date,[i.series]: i.value
        })
    }

    return acc
},[])

console.log(result)

并将这些道具分配给这样的组件

interface MyComponentProps extends React.ReactProps {
  id: string;
  name?: string; // notice the ?,this means it can be undefined
}

查看完整的文档here

,

JavaScript没有运行时类型系统-因此没有接口-也没有抽象类的概念。

如果要在React中实现依赖项注入，可以利用React上下文通过上下文和钩子或更高阶的组件传递依赖项，但是请注意，这会掩盖依赖项，并使事情变得更难测试。

通常，在JavaScript中，我们将模块系统用于“依赖注入”，并在运行时（在Jest或Webpack中）使用模拟模块。

尤其是在React中，很少像其他语言那样将服务对象传递给props-通常，我希望javascript基本体（原始值，数组，对象和函数）通过​​props传递，不是类实例。