ماژول داخلی در تایپاسکریپت: خطای undefined

من یک تازهکار در تایپاسکریپت هستم و میخواهم از فایلهای متعدد برای کدم استفاده کنم، با استفاده از نسخه 0.9.0 تایپاسکریپت و ویژوال استودیو. فکر میکنم کدهایم درست هستند و به نظر میرسد اینتلِیسنس هم همینطور فکر میکند، اما وقتی واقعاً آن را اجرا میکنم، شکست میخورد و خطای تعریفنشده در جاوااسکریپت را میاندازد.

من دو فایل .ts دارم که یکی app.ts و دیگری module.ts است، و این کدهای کوتاه من هستند.

module.ts اینجا است:

module Shapes {
    export class Rectangle {
        constructor(
            public height: number,
            public width: number) {
        }
    }
}

و app.ts اینجا است:

/// <reference path="app/classes/module.ts" />
var rect = new Shapes.Rectangle(10, 4);

IntelliSense به درستی تشخیص میدهد چه چیزی 'Shapes' است و چه چیزی 'Shapes.Rectangle' است، اما وقتی این کد را اجرا میکنم، خطا میگوید که 'Shapes' تعریف نشده است.

پس در وب جستجو کردم و چند مقاله از جمله این و این پیدا کردم، نکاتشان را دنبال کردم، اما شکست خوردم. نمیفهمم چرا...

این کد default.htm من است.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />

    <script src="app/classes/module.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

من فکر میکنم ماژول.js را به درستی در فایل HTML اضافه کردهام. آیا کسی میتواند به من کمک کند؟

پاسخ شماره ۱

من فکر میکنم مشکل شما به احتمال زیاد این است که module.js در واقع بارگذاری نمیشود. اکثر مرورگرها ابزار اشکالزدایی برای مشاهده ترافیک وب دارند، اما من Fiddler را ترجیح میدهم. این ابزار مستقل از مرورگر است و واقعاً قدرتمند است.

از آنجا که شما از ماژولهای داخلی استفاده میکنید (گزینهای که ما نیز انتخاب کردیم)، ممکن است بخواهید منابع خود را در یک فایل واحد کامپایل کنید. این کار ترافیک شبکه را کاهش میدهد، سیستم فایل شما را سازماندهی نگه میدارد و فایل HTML شما را سادهتر میکند. برای انجام این کار، فایل csproj را در یک ویرایشگر متنی باز کنید، به دنبال PropertyGroups بگردید که شامل <TypeScriptTarget> هستند، و <TypeScriptOutFile>outputfile.js</TypeScriptOutFile> را اضافه کنید، جایی که outputfile.js نام فایلی است که میخواهید ایجاد کنید.

این نمونه من است:

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES3</TypeScriptTarget>
    <TypeScriptIncludeComments>true</TypeScriptIncludeComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptOutFile>out.js</TypeScriptOutFile>
    <TypeScriptGeneratesDeclarations>true</TypeScriptGeneratesDeclarations>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES3</TypeScriptTarget>
    <TypeScriptIncludeComments>false</TypeScriptIncludeComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptOutFile>out.js</TypeScriptOutFile>
    <TypeScriptGeneratesDeclarations>false</TypeScriptGeneratesDeclarations>
  </PropertyGroup>