انگولار - فیلدهای استاتیک کلاس وارد شده تعریف نشدهاند

من سعی دارم تفاوت بین فیلدهای استاتیک و رفتار متدها در کلاسها در تایپاسکریپت و انگولار را بفهمم. کمک شما بسیار قدردانی خواهد شد :)

من کلاسی با فیلدها و متدهای استاتیک در مسیر src برنامه صادر کردهام، وقتی آن را وارد میکنم و تلاش میکنم از فیلدهای استاتیک استفاده کنم، آنها تعریف نشده هستند، اگر متدهای استاتیک را صدا بزنم، کار میکنند.

src/app/core/colors.ts

   export class SystemColors {

    static  _gray: {
        default: '#ABAFBE',
        darker: ['#7C8298', '#606473'],
        lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
    };


    public static get gray() {
        return {
            default: '#ABAFBE',
            darker: ['#7C8298', '#606473'],
            lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
        };
    }
}

src/app/app.component.ts

import {SystemColors} from '...';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, AfterViewInit {

    constructor() {}

    ngOnInit() {
        console.log(1, SystemColors.gray); // static get method has value
        console.log(2, SystemColors._gray); // static field undefined :(
    }
}

پاسخ شماره ۱

  static _gray: {
    default: '#ABAFBE',
    darker: ['#7C8298', '#606473'],
    lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
  };

این به این معنی است که «کلاس یک ویژگی استاتیک به نام _gray دارد که نوع آن [اینجا شیء را وارد کنید] است». با این حال، در واقع هیچ مقداری به آن اختصاص داده نشده است، فقط نوع آن مشخص شده است. از آنجا که اطلاعات نوع هنگام ترجمه حذف میشوند، همه این موارد از بین میرود. در عوض، شما باید این کار را انجام دهید، با علامت مساوی به جای دو نقطه:

 static _gray = {
    default: '#ABAFBE',
    darker: ['#7C8298', '#606473'],
    lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
  };

با این کد تغییر یافته، شما در واقع یک شیء واقعی به آن اختصاص میدهید، نه اینکه فقط نوعها را تعریف کنید. این ایجاد و اختصاص یک شیء همچنان پس از تبدیل کد به جاوااسکریپت اتفاق خواهد افتاد.

پاسخ شماره ۲

یک مشکل نحوی وجود دارد. ویژگیها با = در یک کلاس مقداردهی میشوند.

این را امتحان کن:

export class SystemColors {
  static _gray = {
    default: '#ABAFBE',
    darker: ['#7C8298', '#606473'],
    lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
  };

  static get gray() {
    return {
      default: '#ABAFBE',
      darker: ['#7C8298', '#606473'],
      lighter: ['#C8D1DA', '#E2E3ED', '#F5F6FA']
    };
  }
}

در اینجا یک نمونه کاری StackBlitz برای مرجع شما وجود دارد.