我们可以在外部 .ts 文件中声明我的类中所需的所有变量吗？答案

【问题标题】：Can we declare all variables required in my class in external .ts file?我们可以在外部 .ts 文件中声明我的类中所需的所有变量吗？
【发布时间】：2020-09-11 14:06:00
【问题描述】：

所以我正在开发一个 Ionic 应用程序，并且在我的类 (WelcomeAunthenticatedUser.ts) 中有很多变量声明，这些变量在我的类函数中使用。但我试图在外部 .ts 文件中声明所有这些变量，然后导出该文件并将其导入我的类中。这是有没有办法做到这一点？

这是我要导出到我的班级的 Variables.ts 文件。


export var Variables: {
    currentUser: string
    scannedCode: string
    currentAccessToken: string
    imageUrl: string
    product: number
    cartCode: number
    productQuantity: 1
    //barcodeDataFields Vars
        barcodeDataFieldsName: string
        barcodeDataFieldsProductCode: string
        barcodeDataFieldsDescription: string
        barcodeDataFieldsImage: string
        barcodeDataFieldsPrice: string

    //productCart Vars
        Quantity: number
        Status: string

    // userCart Vars
        userCartName: string
        userCartCode: number
        userCartProductCode: number
        userCartPrice: number
        userCartTotalPrice: number
        userCartQuantity: number
        userCartEntryNumber: number
        userCartVisibility: boolean

    showButton: boolean
    quantity: number
}

我正在我的欢迎课中导入它：

import { Variables } from './../../constants/variables'
import { Paths } from './../../constants/constants'
import { ToastController } from '@ionic/angular';
import { TranslateService } from '@ngx-translate/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-welcome-authenticated-user',
  templateUrl: './welcome-authenticated-user.page.html',
  styleUrls: ['./welcome-authenticated-user.page.scss'],
})

export class WelcomeAuthenticatedUserPage implements OnInit {
  productQuantity = 1;
  ngOnInit() {
     Variables.currentUser = this.localStorage.retrieve(LocalStorage.USERNAME);
     Variables.currentAccessToken = this.localStorage.retrieve(LocalStorage.ACCESS_TOKEN);
     Variables.cartCode = this.localStorage.retrieve(LocalStorage.CART_CODE);
     Variables.showButton = false;
  }

当我运行它时，它会显示如下错误：

Toast Called
core.js:6014 ERROR TypeError: Cannot read property 'cartCode' of undefined
    at WelcomeAuthenticatedUserPage.ionViewWillEnter (welcome-authenticated-user.page.ts:32)
    at HTMLElement.handler (ionic-angular.js:2075)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
    at invokeTask (zone-evergreen.js:1603)
    at HTMLElement.globalZoneAwareCallback (zone-evergreen.js:1629)
    at lifecycle (index-157155ee.js:148)

core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'currentUser' of undefined
TypeError: Cannot read property 'currentUser' of undefined
    at WelcomeAuthenticatedUserPage.<anonymous> (welcome-authenticated-user.page.ts:50)
    at Generator.next (<anonymous>)

有什么办法可以做到这一点？

【问题讨论】：

您声明了变量的类型及其所有子属性，但您从未为其分配任何值。

标签： javascript angular typescript ionic-framework ecmascript-6

【解决方案1】：

您似乎还没有初始化Variables 常量。请尝试以下操作：

export const Variables: {
  currentUser: string
  scannedCode: string
  currentAccessToken: string
  imageUrl: string
  product: number
  cartCode: number
  productQuantity: 1
  //barcodeDataFields Vars
  barcodeDataFieldsName: string
  barcodeDataFieldsProductCode: string
  barcodeDataFieldsDescription: string
  barcodeDataFieldsImage: string
  barcodeDataFieldsPrice: string

  //productCart Vars
  Quantity: number
  Status: string

  // userCart Vars
  userCartName: string
  userCartCode: number
  userCartProductCode: number
  userCartPrice: number
  userCartTotalPrice: number
  userCartQuantity: number
  userCartEntryNumber: number
  userCartVisibility: boolean

  showButton: boolean
  quantity: number
} = {};

【讨论】：