アンビエント宣言(declare宣言）されたクラスの実体をインスタンス生成したい

前提・実現したいこと

アンビエント宣言(declare宣言）されたクラスの実体をインスタンス生成できず困っています。
仕事で、アンビエント宣言(declare宣言）されたクラスをAngular側でインスタンス化する必要があり、何か方法をご存じであればご教授をお願いいたします。

発生している問題・エラーメッセージ


以下、chromeのデベロッパーツールのコンソール内容です。ビルドではエラーは発生しないのですが、動作させるとnot definedが発生しています。

(index):18 (SystemJS) FooClass is not defined
	ReferenceError: FooClass is not defined
	    at Object.eval (http://localhost:3000/main.js:5:15)
	    at eval (http://localhost:3000/main.js:10:4)
	    at eval (http://localhost:3000/main.js:11:3)
	    at eval (<anonymous>)
	Evaluating http://localhost:3000/main.js
	Error loading http://localhost:3000/main.js

該当のソースコード

＝＝＝＝foo.d.ts
declare var fooVariable: string;

declare function fooFunction(): string;

declare class FooClass {
    public bar(): string;
    public fooVariable: string;
}

declare module FooModule {
    export function bar(): string;
}

declare module "fooModule" {
    export function bar(): string;
}

interface FooInterface {
    bar(): string;
}

＝＝＝＝main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/// <reference path="foo.d.ts" />

declare class Test extends FooClass{

}
var result3 = new FooClass;

result3.fooVariable= "test"
result3.bar();
console.debug(result3.fooVariable);

試したこと

上記コードをVSCODE上で実行(npx start)させました。
シュミレータのブラウザは表示されるのですが、chromeのデベロッパーツールのコンソールにエラーが表示されています。

補足情報（FW/ツールのバージョンなど）

アンビエント宣言は、他のコンポーネント（例えば Web ブラウザや既存の JavaScript ライブラリ）から
変数や関数などが提供されるため、ビルドの対象外になってしまっていると予測しています。しかしどうしてもアンビエント宣言(declare宣言）されたクラスをAngular側でインスタンス化する必要があり、方法をご存じであればご教授をお願いいたします。

行動規範の内容に同意します

回答1件

FooClassの実装はどこでしょうか？

「アンビエント宣言は、他のコンポーネント（例えば Web ブラウザや既存の JavaScript ライブラリ）から変数や関数などが提供される」とyujimori1967さん自身も書いていますが、それがなかったということではないでしょうか？

投稿2021/01/03 22:40

maisumakun

総合スコア146018

yujimori1967

2021/01/04 03:08

はい、ご認識のとおりです。クラスの型宣言だけがある状態です。全く同じ型をを1から再定義せずに、流用する方法がないかを探しております。

maisumakun

2021/01/04 03:33 編集

> 全く同じ型をを1から再定義せずに、流用する方法がないかを探しております。他のコンポーネントから供給させる、具体的にはHTMLから当該のクラスを含むJavaScriptコードを読み込むなどの措置が必要です。

yujimori1967

2021/01/04 05:10

さっそくのご回答、ありがとうございます。対策方法があるようで安心しております。誠に恐れ入りますが「該当のソースコード」のようなクラス宣言の場合、「HTMLから当該のクラスを含むJavaScriptコード」を記載する場合、どのように記載すればよろしいでしょうか。（当方はHTML、JavaScriptコードをあまりよく知らないため、このような質問になります。）

maisumakun

2021/01/04 05:25 編集

FooClassが（宣言ではなく）定義されたJavaScriptファイルは、どこにどのような形でありますか？

yujimori1967

2021/01/04 10:05 編集

たいへん失礼いたしました。 FooClassが（宣言ではなく）定義されたJavaScriptファイルは、外部提供されるモジュールであるため当方の手元にはない状況です。当方の手元にあるjavaScript（恐らくAngularが自動生成したもの)は以下となります。＝＝＝＝ "use strict"; var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic"); var app_module_1 = require("./app/app.module"); platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule); var result3 = new FooClass; result3.fooVariable = "test"; result3.bar(); console.debug(result3.fooVariable); //# sourceMappingURL=main.js.map また、htmlは以下となります。＝＝＝＝＝ <pre> <!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <base href="/"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">  <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('main.js').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> </body> </html> 場所としては、main.tsと同じ階層に「index.html、main.js」があります。

maisumakun

2021/01/04 10:38

> 外部提供されるモジュールであるため当方の手元にはない状況です。使い方はどのように指定されていますか？

yujimori1967

2021/01/05 13:39

ご回答ありがとうございます。外部提供されるモジュールをどのように使用しているか？というご質問と解釈しました。（認識違いであれば申し訳ありません。なにか設定関係のファイルの記載内容である場合は、お手数ですが一般的な例を示していただけると回答できると思います。）外部提供されるモジュールは、以下のように使用しております。 getDataというメソッドをコールすると、HTMLの通信を用いて要求を送信し、応答結果をFooClass クラスの実体としてを取得しているようです。 getData() { return new Promise<FooClass | null>((resolve) => { ExternLibrary.getData( (result) => { resolve(result.detail); }, () => { resolve(null); } ); }); } ExternLibrary getData: ( success: (result: ExternResponse<FooClass>) => void, error: (error: ExternResponse<null>) => void ) => any; export declare class ExternResponse<T> { responseType: ResponseType; detail: T; } 今回の背景事情として、上記の外部提供されている機能を使用せずに、自前でFooClassの実体（インスタンス）を生成したいと考えております。

maisumakun

2021/01/05 13:46 編集

> 今回の背景事情として、上記の外部提供されている機能を使用せずに、自前でFooClassの実体（インスタンス）を生成したいと考えております。それはファイルの詳細に立ち入らないと、「可能かどうかすら」わかりません（FooClassのコンストラクタが公開されていない場合、外部ライブラリの改造が必要になります）。

yujimori1967

2021/01/06 04:33

了解いたしました。ご回答頂きありがとうございます。外部提供のライブラリは入手困難なため、「全く同じクラス(型)を1から再定義」する方法で急場をしのごうと思います。いろいろとご助力頂きありがとうございました。

行動規範の内容に同意します