AngularのMockで日時（DatePipe）を扱いたい

Question

mockの中で日時を扱いたいのですが

mock-hoge-table.ts

import { DatePipe } from '@angular/common';


export const Hoge: Hoge[] = [
  { updated_at: DatePipe.transform('2020/04/14', 'yyyy/MM/dd')},
  { updated_at: DatePipe.transform('2020/04/15', 'yyyy/MM/dd')}
];

: error TS2339: Property 'transform' does not exist on type 'typeof DatePipe'.

このように怒られてしまいます。
回避する方法はございますでしょうか。
よろしくお願いいたします。

Comments

[miyabi_pudding]

まず、AngularJSと、Angularは、別物っていうぐらい仕様の互換性がないので、質問タグは適切にしてください。

これは・・・@angular/commonに、DatePipeというクラスがあるのでしょうか？
読み込むファイル間違ってる、とかはないでしょうか？？
（こちらが無知識だったらすみません）

[miyabi_pudding]

失礼しました！
DatePipe、ありますね。
調査させていただきます。

[baos]

AngularJSの件、ご指摘ありがとうございます。
お恥ずかしい限りです。

[baos]

ご返信ありがとうございます。
単純に、作ったHTMLにデータを突っ込みたいだけです。

よろしくお願いいたします。

[miyabi_pudding]

だったら、コンポーネントを通して、テンプレート上で変数の値をバインドする、本来のAngularの仕様に則った使い方をされるほうが一番早いと思いますよ。
serviceを上手く使うのも正規のやり方なのでそのほうがいいかと。

ルートに動的変数ってやりたくなるもんですけど、Angularでは、ルートでの変数は、動的変数にはなりませんので。

[miyabi_pudding]

か、もしくは、前行でインスタンス生成して、
そのインスタンスを使うとか・・・。

Answer 1

おそらく、transformメソッドがスタティックではないからでしょう。
つまり、質問者さんの構文のような使い方ができないメソッドなので、
一度インスタンス化する必要があります。

【Angular】DatePipeの使用方法

上記記事を参考に、
constructorにて、クラスのメンバとして、初期化する使い方が、正当なのかと思われます。

Comments

[baos]

ご指摘ありがとうございます。
そちらのページを参照させていただきました。

定義方法はわかったのですが
参照の仕方に苦しんでおります。

[miyabi_pudding]

参照の仕方ですか・・・。
質問のコードを見る限り、つまり、クラス内で使うのではなく、
ルートの変数の中で使用したい、ってことでしょうか？？

もしそうなら無理かと。
なぜなら、Angularは、最終的にJSにコンパイルするもので、
DatePipeクラスは、JSには存在しませんし、
ルートで変数を定義すると、JSにコンパイルされる時に、静的な値に変換されてしまいます。
つまり、TypeScriptでのエラーを回避したとしても、動的なメソッド付きのオブジェクトにはならないってことです。
（あくまで今回の定義の仕方の場合）

なんやかんやで、クラス通して、の正着の使い方を模索されたほうがいいかと。
service作って、その中でDatePipeクラスを使う、じゃダメなんでしょうか？