如何使用另一个 TS 文件中的对象 (knockout.js)答案

【问题标题】：How to use an object from another TS file (knockout.js)如何使用另一个 TS 文件中的对象 (knockout.js)
【发布时间】：2019-12-25 03:50:42
【问题描述】：

我需要使用另一个 TS 文件中的对象，例如我在 one.ts 中有一个 API 响应，我需要在 two.ts 中使用它

我尝试导出和导入元素，但无济于事

这个 sn-p 在我的 one.ts 中

getDealStatusInfo(dealid) {
            var statusRes
            DealApiControllers.GetDealStatus(dealid,
                (response) => {
                    statusRes = response;
                    console.log(statusRes)
                },
                (error) => {
                    console.error(error);
                });

        }

我需要在two.ts中使用statusRes对象

【问题讨论】：

标签： typescript knockout.js

【解决方案1】：

导出的变量应该超出函数范围

一个.ts

export var statusRes ;
getDealStatusInfo(dealid) {
            DealApiControllers.GetDealStatus(dealid,
                (response) => {
                    statusRes = response;
                    console.log(statusRes)
                },
                (error) => {
                    console.error(error);
                });

        }

Two.ts

import statusRes from './one'

但是您必须等待从服务器检索 statusRes。

您可以使用可观察设计模式来订阅变量更改。

对于可观察的设计模式，您可以使用 RXJS 库或者您必须实现它。

或者您可以导出将处理来自 two.ts 的响应的函数并将其导入 one.ts，然后在收到响应后调用该函数。

一个.ts

import handleRes from './two'
getDealStatusInfo(dealid) {
            var statusRes
            DealApiControllers.GetDealStatus(dealid,
                (response) => {
                    statusRes = response;
                    handleRes(statusRes);
                    console.log(statusRes);
                },
                (error) => {
                    console.error(error);
                });

        }

两个.ts

export function handleRes(statusRes){
  // do stuff
  console.log(statusRes);
}

【讨论】：

【解决方案2】：

重构函数以返回解析您尝试检索的值的承诺可能符合您的最大利益

export function getDealStatusInfo(dealid) {
  return new Promise((resolve, reject) => {
    DealApiControllers.GetDealStatus(
      dealid,
      (response) => resolve(response),
      (error) => reject(error)
  })
}

然后从消费端，使用.then或async/await...

import { getDealStatusInfo } from './two'

getDealStatusInfo().then((response) => { /* do work*/ })

如果其他人负责调用getDealStatusInfo，您可以改为从getDealStatusInfo 更新的顶层导出一个可观察对象，并订阅更改。

export const statusResponse = ko.observable()

function getDealStatusInfo(dealId) {
  DealApiControllers.GetDealStatus(
    dealId,
    (res) => statusResponse(res),
    (err) => console.error(err)
  )
}

import { statusResponse } from './two'

statusResponse() // current value

statusResponse.subscribe((res) => {
  // handle update
})

【讨论】：