安装了 npm 包但在浏览器中出现“不是函数”错误答案

【问题标题】：installed npm package but get "is not a function" error in browser安装了 npm 包但在浏览器中出现“不是函数”错误
【发布时间】：2019-11-02 21:01:27
【问题描述】：

我正在使用 Ionic 4 并尝试使用这个库：https://date-fns.org 来获取像 2019-11-01 07:23:22 这样的日期字符串，以便以人类可读的方式显示。

所以我已经安装了这个库：

npm install date-fns --save

然后在mypage.ts文件中

import { format, formatDistance, parseISO } from 'date-fns';

然后在mypage.html文件中

<div class="date">{{ formatDistance(parseISO(h.created_at)) }}</div>

所以我在浏览器控制台中收到此错误：

ERROR TypeError: _co.parseISO is not a function

它说该函数不存在，但它在文档中：https://date-fns.org/v2.6.0/docs/parseISO

我做错了吗？

【问题讨论】：

标签： angular typescript

【解决方案1】：

只有组件类的实例成员可以从视图中调用。

https://stackoverflow.com/a/41857120/7562674

在 Ts 文件中：-

import { Component } from '@angular/core';
import { format, formatDistance, parseISO } from 'date-fns';

export class AppComponent implements OnInit {

formatDistance=formatDistance;
parseISO=parseISO;  
date=  "2018-10-01";
d=new Date(2015, 0, 1)
constructor(){
  console.log(formatDistance(parseISO("2018-10-01"), new Date(2015, 0, 
  1)))
  }

在模板中：-

  <p>{{formatDistance(parseISO(date),d)}}</p>

我检查了这是否有效。

声明为变量并赋值，而不是注入构造函数参数。因为它是一个函数而不是一个类，为什么在构造函数中使用时显示错误不是类型。

【讨论】：

它会导致这个错误：error TS2709: Cannot use namespace 'formatDistance' as a type
更新了答案。您是否尝试过作为实例变量而不是在构造函数中注入。

【解决方案2】：

在 TS 文件中：

import { format, formatDistance, parseISO } from 'date-fns';

constructor(public formatDistance: formatDistance) {
}

这是 HTML

<div class="date">{{ formatDistance(parseISO(h.created_at)) }}</div>

【讨论】：

它会导致这个错误：error TS2709: Cannot use namespace 'formatDistance' as a type