TypeScript
angular
VSCode
VisualStudioCode

AngularコードのRegion切り:Component

私はAngular開発にはVisual Studio Codeを使っているんですが、
// #region XXXXX// #endregionで囲むと、行番号のとこに [-] マークが現れ、折りたためるようになります。

やっぱ便利ですよね。欲しかった人多いようです。
https://github.com/Microsoft/TypeScript/issues/11073

AngularのComponentは、ビューのためにいろんなコードが入ってきてわかりづらくなるので、次のようなRegionで区切っています。
大体いつも切ってるRegionを、既存コードからコピペするの面倒なので、メモ代わりに投稿します。

区切り方

@Component({
  selector: 'app-foobar',
  templateUrl: 'foobar.html',
})
export class FoobarComponent {
  // #region インタフェース

  @Input() ...
  @Output() ...

  // #endregion

  // #region コンストラクタ・ライフサイクル

  constructor(
    private http: HttpClient,
    private router: Router,
  ) {
    ...
  }

  ngOnInit() {
  ...

  // #endregion

  // #region ビューバインド

  @ViewChild('child') child: ChildComponent;
  ...

  public viewModel: any;
  ...

  // #endregion

  // #region イベント

  public onClickSearch() {
  ...

  // #endregion

  // #region プライベート

  private fixedArray: any[] = ['aaa', 'bbb', 'ccc'];
  private myMethod() {
  ...

  // #endregion
}

コピペ用

  // #reion インタフェース

  // #endregion

  // #region コンストラクタ・ライフサイクル

  // #endregion

  // #region イベント

  // #endregion

  // #region ビューバインド

  // #endregion

  // #region プライベート

  // #endregion

2018/03/23追記

ビューに表示するモデルをコンポーネントに保持しておく場合は、ビューモデルを別にするのがわかりやすそう。Regionは重ね掛けできます。

  // #reion インタフェース

  // #endregion

  // #region コンストラクタ・ライフサイクル

  // #endregion

  // #region ビューバインド

  // #region ビューモデル

  // #endregion

  // #endregion

  // #region イベント

  // #endregion

  // #region 内部メンバ

  // #endregion