【Angular】Pipe(パイプ)を使った日付の日本語表示【エラー】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
UdemyのAugular講座をしていたらエラー発生。
Uncaught TypeError: 2 arguments required, but only 1 present
ERROR in src/app/pipe/date.pipe.ts(11,41): error TS2740:
Type 'typeof import("date-fns/locale/ja")' is missing the following properties from
type 'Locale': formatDistance, formatRelative, localize, formatLong, and 4 more.
Type 'typeof import("date-fns/locale/ja")' is missing the following properties from
type 'Locale': formatDistance, formatRelative, localize, formatLong, and 4 more.
・・・この講座の推奨Angularバージョンは5なのですが、私は8でやっています。つまり、Angularかライブラリの仕様が変わったからこのエラーが出ているのではないかと思います(憶測です)
今回はこのエラーを解決していきます。
Angular(TypeScript)日付の日本語表示
localeとは？
少し話が逸れますが、そもそもlocaleの意味をちゃんと調べたことがありませんでした
ロケールとは、（物語の）舞台、現場、場所などの意味を持つ英単語で、ITの分野ではシステムやソフトウェアにおける言語や国・地域の設定のことをこのように呼ぶ。
エラー再現
今回はパイプを作っている時にエラーが発生しました。
また、前提条件としてパイプを必ず使う方法でエラー解決を行います。
パイプを作る練習がしたいので。
app.component.html
<small class="media-date">{{ comment.date | commentDate }}</small>
comment.ts
import { format } from 'date-fns';
import { User } from './user';
export class Comment {
user: User;
initial: string;
message: string;
date: string;
constructor(user: User, message: string) {
this.user = user;
this.initial = user.name.slice(0, 1);
this.message = message;
this.date = format(new Date());
}
}
date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { format } from 'date-fns';
import * as ja from 'date-fns/locale/ja';
@Pipe({
name: 'commentDate'
})
export class DatePipe implements PipeTransform {
transform(date: string): string {
return format(date, 'YYYY年MMMDo', { locale: ja });
}
}
エラー1
Uncaught TypeError: 2 arguments required, but only 1 present
エラー2
ERROR in src/app/pipe/comment-date.pipe.ts(11,41): error TS2740:
Type 'typeof import("date-fns/locale/ja")' is missing the following properties from
type 'Locale': formatDistance, formatRelative, localize, formatLong, and 4 more.
Type 'typeof import("date-fns/locale/ja")' is missing the following properties from
type 'Locale': formatDistance, formatRelative, localize, formatLong, and 4 more.
タイプ「typeof import（ "date-fns / locale / ja"）」に次のプロパティがありません
タイプ 'Locale'：formatDistance、formatRelative、localize、formatLong、その他4つ。
タイプ 'Locale'：formatDistance、formatRelative、localize、formatLong、その他4つ。
解決
私の推察です。
「date-fnsの仕様が変わった」
何故ならUdemyの講座では動いているから。
あとTypeScriptが変わったとは考えにくい。
date-fnsの仕様が変わった結果、パイプを作る程のことをしなくてよくなったと思います。
が、今回は練習なのでパイプは絶対に使います。
本題
・comment.tsからformatを削除
=>むしろcomment.tsにformatを適用させたら、パイプ必要ないです
・dateの型をstringからDateに変更
・jaのインポート文法を変更
・date.pipe.tsのformatの引数を「'yyyy月MMMdd日'」に変更
comment.ts
import { User } from './user';
export class Comment {
user: User;
initial: string;
message: string;
date: Date;
constructor(user: User, message: string) {
this.user = user;
this.initial = user.name.slice(0, 1);
this.message = message;
this.date = new Date();
}
}
date.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { format } from 'date-fns';
import { ja } from 'date-fns/locale';
@Pipe({
name: 'commentDate'
})
export class DatePipe implements PipeTransform {
transform(date: Date): string {
return format(date, 'yyyy月MMMdd日', { locale: ja });
}
}
comment.jsではあくまでも日付を「new Date()」で取得するだけにしました。
少し気になったのは、パイプで受け取っているdateの型がnumberでもDateでも大丈夫でした。
なぜだろ？？？
あとlocaleでjaを指定しても、引数では日本語を記入しないといけないのですね。
localeの意味笑
参考
素晴らしい記事に感謝いたします。
