راه صحیح استفاده از requireJS با تایپاسکریپت چیست؟


نمونههایی که من اینجا و اینجا پیدا کردهام میگویند از module() استفاده کنید. با این حال، وقتی کامپایل میکنم، هشدار "TS7021: 'module(...)' منسوخ شده است. به جای آن از 'require(...)' استفاده کنید." را دریافت میکنم.

خب چند سوال پایهای:

  1. هنگامی که از تایپاسکریپت و requireJS استفاده میکنم، چگونه میتوانم به یک کلاس در یک فایل .ts از فایل .ts دیگری دسترسی پیدا کنم، جایی که requireJS فایل دوم را بارگذاری میکند و کلاس فایل اول را به من میدهد؟
  2. آیا راهی وجود دارد که رویکرد استاندارد requireJS را با دو فایل .ts انجام دهیم، به طوری که define() در بالای فایل، فایل ts دوم را بارگذاری کند و شیئی را که در انتها میسازد، بازگرداند؟
  3. تا حدودی مشابه سوال شماره ۲. آیا از یک فایل جاوا میتوانم از ساختار define() روی یک فایل تایپ اسکریپت استفاده کنم تا شیء نمونهسازی شده را دریافت کنم؟ اگر بله، چگونه؟

بهروزرسانی: مورد زیر باعث خطای کامپایل tsc برای من میشود:

///<reference path='../../libs/ExtJS-4.2.0.d.ts' />
///<reference path='../../libs/require.d.ts' />

import fdm = require("./file-definitions");
require(["../../scripts/ribbon"], function () {

export module Menu {

    export class MainMenu {

پاسخ شماره ۱

من میخواستم نظر خود را درباره پاسخ دیوید به جواب بصرت (درباره ماژولها و کلاسها) بنویسم، اما اعتبار لازم را ندارم. میدانم که این سوال قدیمی است، اما جوابش را در جای دیگری پیدا نکردم.

من با استفاده از ویدئوهای بصارت و ترکیب آن با برخی منابع دیگر موفق شدم تا برای کلاسهایی مانند آنچه دیوید تایلن نیاز داشت، آن را کشف کنم. توجه داشته باشید که دیگر ورودیای برای فایلهای منبع ts خود ندارم، اما بیانیههای amd-dependency و import را دارم. در Eclipse با پلاگین TS پالانتیر، تکمیل خودکار کد و توانایی رفتن از استفاده به تعریف با تنها همین بیانیههای amd-dependency و import کار میکند. فایلهای هدر هنوز به بیانیههایی نیاز دارند زیرا هیچ ارتباطی با استقرار ندارند و تنها توسط کامپایلر TS استفاده میشوند. همچنین توجه داشته باشید که پسوندهای فایل .ts برای بیانیههای مرجع استفاده میشوند اما برای بیانیههای amd و import استفاده نمیشوند.

در فایل Utils.ts من دارم:

///<reference path="headers/require.d.ts" />

export function getTime(){
    var now = new Date();
    return now.getHours()+":"+now.getMinutes()+':'+now.getSeconds();
}

در OntologyRenderScaler من دارم:

///<reference path="headers/require.d.ts" />

///<reference path="headers/d3.d.ts" />
///<reference path="headers/jquery.d.ts" />

///<amd-dependency path="Utils" />

import Utils = require('./Utils');

export class OntologyRenderScaler {
...
Utils.getTime();
...
}

در OntologyMappingOverview.ts من دارم:

///<reference path="headers/require.d.ts" />

///<reference path="headers/d3.d.ts" />
///<reference path="headers/jquery.d.ts" />

///<amd-dependency path="Utils" />
///<amd-dependency path="OntologyGraph" />
///<amd-dependency path="OntologyFilterSliders" />
///<amd-dependency path="FetchFromApi" />
///<amd-dependency path="OntologyRenderScaler" />
///<amd-dependency path="GraphView" />

///<amd-dependency path="JQueryExtension" />

import Utils = require('./Utils');
import OntologyGraph = require('./OntologyGraph');
import OntologyRenderScaler = require('./OntologyRenderScaler');
import OntologyFilterSliders = require('./OntologyFilterSliders');
import GraphView = require('./GraphView');

export class OntologyMappingOverview extends GraphView.BaseGraphView implements GraphView.GraphView {
    ontologyGraph: OntologyGraph.OntologyGraph;
    renderScaler: OntologyRenderScaler.OntologyRenderScaler;
    filterSliders: OntologyFilterSliders.MappingRangeSliders;
...
this.renderScaler = new OntologyRenderScaler.OntologyRenderScaler(this.vis);
...
}

من هنوز نتوانستم کارها را درست مطابق پیشنهاد codeBelt در بالا راهاندازی کنم، اما یک تبادل نظر که در وبلاگ او داشتیم نشان داد که اگر روش او را راهاندازی کنم (با export MyClass در پایین فایل)، دیگر نیازی نخواهم داشت که شناسه وارد شده را با نام کلاس دوباره تکرار کنم. فکر میکنم این کار کلاس موردنظر را صادر میکند نه فضای نامی که در آن تعریف شده است (ماژول خارجی ضمنی، یعنی نام فایل TypeScript).

پاسخ شماره ۲

برای :

هنگام استفاده از تایپاسکریپت و requireJS، چگونه میتوانم به یک کلاس در یک فایل .ts از فایل .ts دیگر دسترسی پیدا کنم، جایی که requireJS فایل دوم را بارگذاری میکند و کلاس موجود در فایل اول را به من میدهد؟ آیا راهی وجود دارد که از روش استاندارد requireJS با دو فایل .ts استفاده کنم که define() در بالا فایل دوم .ts را بارگذاری کند و شیءای که در انتها ساخته میشود را برگرداند؟

بهسادگی :

// from file a.ts
export class Foo{

}

// from file b.ts
// import 
import aFile = require('a')
// use: 
var bar = new aFile.Foo();

و هر دو فایل را با فلگ --module amd کامپایل کنید.

برای :

نوعی مشابه سؤال شماره ۲. آیا میتوانم از یک فایل جاوا اسکریپت، از سازه define() روی یک فایل تایپاسکریپت استفاده کنم تا شیء نمونهسازی شده را به دست آورم؟ اگر چنین است، چگونه؟

برای استفاده از a.ts از b.js به سادگی :

// import as a dependency:
define(["require", "exports", 'a'], function(require, exports, aFile) {

    // use:
    var bar = new aFile.Foo();
});

این مشابه چیزی است که اگر b.ts را کامپایل کنید، به دست میآورید