Illust & Music 月の高いところ

今日のプリン言

謎のプリン語る。
一人書く人増えました。

【Angular】コンポーネント間共通定数を定義(改善Ver)

2020年02月04日

みやびプリン 140 87

500 320

【Angular】コンポーネント間共通定数を定義(改善Ver) - サムネイル

どうも、お昼、行こうとしたスープカレー屋さんが激混みで入れず、不機嫌なみやびです。

どうでもいいってな。

さて、表記の件。
前回同じものやったのだが、
【Angular】コンポーネント間共通定数を定義 / 今日のプリン言 | イラストポートフォリオWebサイト - 月の高いところ
今見ると、Angular的にはそうするしかなくても、TypeScript的にはナンセンスな定義だったので、
Linterにも注意されない改善案を出しておこうと思って、今回のエントリーだ。
主にまずかったのは下記の部分。

import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst } from 'app.const.tsがあるディレクトリまでの相対パス/app.const';

@Component({
    selector: 'app-sitetop',
    templateUrl: './sitetop.component.html',
    styleUrls: [
        './sitetop.component.scss'
    ]
})
export class SitetopComponent implements OnInit {
    // AppClass型変数を定義
    AppConstClass: AppConst;
    // 最終的に使用する型なしの変数定義
    AppConst;
    constructor() {
        // スタティックで使うのに、newさせてる
        // クラスがconstructor定義なしだから、()つけれないが、TypeScript的に怒られるに決まってる。
        // というふうにとにかくいろんな面でダメダメ
        this.AppConstClass = new AppConst;
        // インスタンスのメソッドを実行し、staticなクラスを代入
        this.AppConst = this.AppConstClass.main();
    }

    ngOnInit() {
    }
}

ようは、静的なクラスとして定義してんのに、newでインスタンス生成してるとことか、もういろいろダメなわけだ。

ロードス島戦記オンライン - メイン

じゃぁ、どうするかというと、interfaceを使うってわけだよ。

export interface AppConstInterface {
    readonly PAGE_CHARSET: string;
    readonly AUTHOR: string;
    readonly COPYRIGHT: string;
    readonly PAGE_TITLE: string;
    readonly APP_TITLE: string;
}

export const AppConst: AppConstInterface = {
    PAGE_CHARSET: 'utf-8',
    AUTHOR: 'みやびプリン',
    COPYRIGHT: 'Highmoon CO., LTD.',
    PAGE_TITLE: '月の高いところ',
    APP_TITLE: 'イラストサイト'
}

要は、変数の型として、readonlyにしちゃって、変数として定義しちゃうってわけ。
コンポーネント、ならびにビューで使うには下記だ。

import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst, AppConstInterface } from 'app.const.tsがあるディレクトリまでの相対パス/app.const';

@Component({
    selector: 'app-sitetop',
    templateUrl: './sitetop.component.html',
    styleUrls: [
        './sitetop.component.scss'
    ]
})
export class SitetopComponent implements OnInit {
    // AppConstInterface型変数を定義
    public AppConst: AppConstInterface = AppConst;
    constructor() {
        // あとはなんも考えずに、テンプレート内で使用可能
    }

    ngOnInit() {
    }
}

ほんとに、interface便利すぎやで。

必ずテレビアニメに出演できる唯一の声優養成所【インターナショナル・メディア学院】 - メイン

トラックバック(0)

トラックバックURL:

コメントする