[TypeScript] 別ファイルの名前空間内のクラスの静的関数を参照できない原因が知りたい。

質問内容

提示コードですが以下のエラーに対処方法が知りたいです。
最下部の最小環境で実験しましたがコンパイルが通ります。しかし提示のコードではエラーになります。

知りたいこと

提示コードのエラー原因が知りたい

試したこと

提示コードの最下部のテストプロジェクトにて最小環境で実験
参考サイトを参考にコーディング
Shader.ts Windows.ts２つのファイルのみで実験
実行コマンド: npx tsc

参考サイト

(ファイル分割部): https://js.studio-kingdom.com/typescript/handbook/namespaces
参照方法など: https://maku.blog/p/a3eh9w2/

利用ライブラリ

WebGL

環境

OS：ubuntu

Error

$ npx tsc 
script/Shader.ts:40:46 - error TS2304: Cannot find name 'WindowContext'.

40             const vertProgram = this.Compile(WindowContext.getContext().VERTEX_SHADER,source_vert);
                                                ~~~~~~~~~~~~~

script/Shader.ts:41:46 - error TS2304: Cannot find name 'WindowContext'.

41             const fragProgram = this.Compile(WindowContext.getContext().FRAGMENT_SHADER,source_frag);
                                                ~~~~~~~~~~~~~

script/Shader.ts:44:38 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

44             this.program = FrameWork.WindowContext.getContext().createProgram();
                                        ~~~~~~~~~~~~~

script/Shader.ts:48:23 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

48             FrameWork.WindowContext.getContext().attachShader(this.program, vertProgram);
                         ~~~~~~~~~~~~~

script/Shader.ts:49:23 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

49             FrameWork.WindowContext.getContext().attachShader(this.program, fragProgram);
                         ~~~~~~~~~~~~~

script/Shader.ts:50:23 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

50             FrameWork.WindowContext.getContext().linkProgram(this.program);
                         ~~~~~~~~~~~~~

script/Shader.ts:53:26 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

53             if(FrameWork.WindowContext.getContext().getProgramParameter(this.program, FrameWork.WindowContext.getContext().LINK_STATUS) == false)
                            ~~~~~~~~~~~~~

script/Shader.ts:53:97 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

53             if(FrameWork.WindowContext.getContext().getProgramParameter(this.program, FrameWork.WindowContext.getContext().LINK_STATUS) == false)
                                                                                                   ~~~~~~~~~~~~~

script/Shader.ts:55:56 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

55                 alert('シェーダープログラム作成に失敗:  ' + FrameWork.WindowContext.getContext().getProgramInfoLog(this.program));
                                                          ~~~~~~~~~~~~~

script/Shader.ts:63:38 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

63             const shader = FrameWork.WindowContext.getContext().createShader(type);
                                        ~~~~~~~~~~~~~

script/Shader.ts:66:23 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

66             FrameWork.WindowContext.getContext().shaderSource(type, fileData);
                         ~~~~~~~~~~~~~

script/Shader.ts:69:23 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

69             FrameWork.WindowContext.getContext().compileShader(shader);
                         ~~~~~~~~~~~~~

script/Shader.ts:72:26 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

72             if(FrameWork.WindowContext.getContext().getShaderParameter(shader, FrameWork.WindowContext.getContext().COMPILE_STATUS) == false)
                            ~~~~~~~~~~~~~

script/Shader.ts:72:90 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

72             if(FrameWork.WindowContext.getContext().getShaderParameter(shader, FrameWork.WindowContext.getContext().COMPILE_STATUS) == false)
                                                                                            ~~~~~~~~~~~~~

script/Shader.ts:74:62 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

74                 alert("Shader Compiler Error : " + FrameWork.WindowContext.getContext().getShaderInfoLog(shader));
                                                                ~~~~~~~~~~~~~

script/Shader.ts:75:27 - error TS2339: Property 'WindowContext' does not exist on type 'typeof FrameWork'.

75                 FrameWork.WindowContext.getContext().deleteShader(shader);
                             ~~~~~~~~~~~~~


Found 16 errors in the same file, starting at: script/Shader.ts:40

Shader.ts

ts
1import * as fs from 'fs'
2
3namespace FrameWork
4{
5
6    export class Shader
7    {
8        
9        private program = null;
10
11        public readonly vertFilePath;
12        public readonly fragFilePath;
13
14        get getProgram()
15        {
16            return this.program;
17        }
18
19        constructor(filePath_Vertex: string,filePath_Fragment: string)
20        {
21          
22            this.vertFilePath = filePath_Vertex;
23            this.fragFilePath = filePath_Fragment;
24
25            this.Load(filePath_Vertex,filePath_Fragment);
26        }
27        
28        //シェーダーをロード
29        private Load(filePath_Vertex: string,filePath_Fragment: string) 
30        {
31            let source_vert;
32            let source_frag;
33
34            fs.readFileSync(filePath_Vertex,"utf-8");
35            
36//            await fetch(new URL(filePath_Vertex, import.meta.url)).then((res) => res.text()).then( (data) => source_vert = data ); 
37//            await fetch(new URL(filePath_Fragment, import.meta.url)).then((res) => res.text()).then( (data) => source_frag = data ); 
38
39///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
40            const vertProgram = this.Compile(WindowContext.getContext().VERTEX_SHADER,source_vert);
41            const fragProgram = this.Compile(WindowContext.getContext().FRAGMENT_SHADER,source_frag);
42///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
43            //シェーダープログラムを作成
44            this.program = FrameWork.WindowContext.getContext().createProgram();
45
46///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
47            //アタッチ
48            FrameWork.WindowContext.getContext().attachShader(this.program, vertProgram);
49            FrameWork.WindowContext.getContext().attachShader(this.program, fragProgram);
50            FrameWork.WindowContext.getContext().linkProgram(this.program);
51///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
52            // もしシェーダープログラムの作成に失敗したら
53            if(FrameWork.WindowContext.getContext().getProgramParameter(this.program, FrameWork.WindowContext.getContext().LINK_STATUS) == false) 
54            {
55                alert('シェーダープログラム作成に失敗:  ' + FrameWork.WindowContext.getContext().getProgramInfoLog(this.program));
56            }
57            コーディング
58        }
59
60        private Compile(type,fileData)
61        {
62
63            const shader = FrameWork.WindowContext.getContext().createShader(type);
64
65            // ソースをシェーダーオブジェクトに送信します
66            FrameWork.WindowContext.getContext().shaderSource(type, fileData);
67
68            // コンパイルシェーダー
69            FrameWork.WindowContext.getContext().compileShader(shader);
70
71            // コンパイルが成功したかどうか？
72            if(FrameWork.WindowContext.getContext().getShaderParameter(shader, FrameWork.WindowContext.getContext().COMPILE_STATUS) == false) 
73            {
74                alert("Shader Compiler Error : " + FrameWork.WindowContext.getContext().getShaderInfoLog(shader));
75                FrameWork.WindowContext.getContext().deleteShader(shader);
76
77                return null;
78            }
79
80            return shader;      
81        }
82    }
83}

Window.ts

ts
1namespace FrameWork
2{
3    export class WindowContext
4    {
5        private static canvas;
6        private static context;
7
8        constructor()
9        {
10            
11
12            WindowContext.canvas = document.querySelector('#glCanvas');  //キャンバスを取得
13            WindowContext.context = WindowContext.canvas.getContext('webgl');    //webcontextコンテキストを作成
14           
15
16
17            if(WindowContext.context == false)
18            {
19                alert("コンテキストを初期化できません");
20            }
21        }
22
23        static getCanvas()
24        {           
25            return WindowContext.canvas;
26        }
27
28        public static getContext()
29        {
30            return WindowContext.context;
31        }
32    }
33}
34
35
36

テストプロジェクト

sciprt.ts

ts
1namespace FrameWork
2{
3    export class Window
4    {
5        static number = 4;
6        constructor()
7        {
8
9        }
10
11        static getNumber()
12        {
13            return Window.number;
14
15        }
16
17
18    }
19}
20

test.ts

ts
1console.log(FrameWork.Window.getNumber());

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！