BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Angular 14 - Typed FormsとStandalone Components

Angular 14 - Typed FormsとStandalone Components

ブックマーク

原文(投稿日:2022/06/07)へのリンク

Angular 14は今月初めにリリースされ、Ivy以降で最も重要なアップデートが行われた。これには、待望の2つの機能(Typed Reactive FormsとStandalone Components)およびマイナーな改善がいくつか含まれている。

Stricly Typed Reactive Formsは、Angular 2リリースからの長年のコミュニティリクエストである。

Angular 14まで、Reactive Formsはそのクラスの多くに型定義を含んでいなかった。そのため、TypeScriptはコンパイル中に次の例のようなバグをキャッチしなかった。

 

const login = new FormGroup({
  email: new FormControl(''),
  password: new FormControl(''),
});

console.log(login.value.notanemail);

Angular 14では、FormGroup、formControl、関連するクラスに型定義が含まれている。これにより、TypeScriptが多くの典型的なエラーをキャッチできるようになった。

新たなTyped Reactive Formsへの移行は自動ではない。

既存のフォームコントローラー、グループなどには、アップグレード中にUntypedというプレフィックスが付けられる。これにより、以前のAngularバージョンの正確なタイプ定義が保持される。

新たなTyped Reactive Formsを利用するには、開発者はUntypedプレフィックスを手動で削除し、発生するエラーを修正する必要がある。

開発者は、Typed Reactive Formsのドキュメントで詳細を確認できる。

Angular 14における2番目に大きな変更は、Standalone Componentsの概念である。

Angular Modulesは長い間争われてきたテーマであった。多くのコミュニティメンバーは、Angularアプリケーション内を不必要に複雑化させてしまうと主張している。

Angular 14では、Componentデコレータでstandalone: trueプロパティを渡すだけでスタンドアロンコンポーネントを作成できるようになった。

@Component({
  selector: 'sample-component',
  standalone: true,
  template: ``,
  imports: [ ComponentOne, ComponentTwo, SampleDirective,
             SampleService, CommonModule]
  ],f
})
export class SampleComponent {
    ...
}

Angularの依存性注入が現状も必要なため、多くのモジュール定義がComponentデコレータに移動された。

コミュニティがこの新機能をどのように採用するかはまだ明確でなく、Angularチームはこの機能を開発者プレビュー版としてフラグ付けしている。将来のリリースでAPIが変更される可能性がある。

このリリースにはまた、新たに拡張診断フレームワークが含まれている。これにより、テンプレートエラーとベストプラクティスに関するフィードバックが改善される。

現在、フレームワークには新たに2つの警告が含まれている。1つはボックス内の逆banana-in-a-box ([])(banana-in-a-box [()]の逆)構文(有効ではあるが、何かが意図されることはほぼない)で、もう一つは入力がnull可能でない場合にNullish Coalescing(??)が不要となることである。

最後に、Angular 14では最新のTypeScript 4.7が使われており、デフォルトでES2020をターゲットとしている。

全変更リストを確認したい場合には、公式のリリース発表に進んでください。

Angularは、MITライセンスの下で利用できるオープンソースソフトウェアである。Angular GitHubリポジトリを通した貢献を歓迎する。

作者について

この記事に星をつける

おすすめ度
スタイル

BT