איך אני מייבא קבצי TypeScript אחרים?

כאשר משתמשים בתוסף TypeScript עבור vs.net, איך אני גורם לקובץ TypeScript אחד לייבא מודולים המוצהרים בקבצי TypeScript אחרים?

קובץ 1:

module moo
{
    export class foo .....
}

קובץ 2:

//what goes here?

class bar extends moo.foo
{
}

תשובה #1

מגרסת TypeScript 1.8 ניתן להשתמש בהצהרות import פשוטות בדיוק כמו ב-ES6:

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

https://www.typescriptlang.org/docs/handbook/modules.html

תשובה ישנה: מגרסת TypeScript 1.5 ניתן להשתמש ב-tsconfig.json: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

זה מבטל לחלוטין את הצורך בהפניות בסגנון הערות.

תשובה ישנה:

אתה צריך להתייחס לקובץ שמעל הקובץ הנוכחי.

אתה יכול לעשות את זה ככה:

/// <reference path="../typings/jquery.d.ts"/>
/// <reference path="components/someclass.ts"/>

class Foo { }

וכו׳

נתיבים אלו יחסיים לקובץ הנוכחי.

הדוגמה שלך:

/// <reference path="moo.ts"/>

class bar extends moo.foo
{
}

תשובה #2

טייפסקריפט מבדיל בין שני סוגים שונים של מודולים: מודולים פנימיים משמשים לארגון הקוד הפנימי שלך. בזמן ההידור, עליך להביא את המודולים הפנימיים לתחום השימוש באמצעות נתיבי הפניה:

/// <reference path='moo.ts'/>

class bar extends moo.foo {
}

מצד שני, מודולים חיצוניים משמשים להפניה לקבצי מקור חיצוניים שיש לטעון בזמן ריצה באמצעות CommonJS או AMD. במקרה שלך, כדי להשתמש בטעינת מודול חיצוני, עליך לבצע את הפעולות הבאות:

moo.ts

export class foo {
    test: number;
} 

app.ts

import moo = module('moo');
class bar extends moo.foo {
  test2: number;
}

שימו לב לדרך השונה להבאת הקוד לתחום. עם מודולים חיצוניים, עליכם להשתמש ב-module עם שם קובץ המקור שמכיל את הגדרת המודול. אם ברצונכם להשתמש במודולי AMD, עליכם לקרוא למתרגם בצורה הבאה:

tsc --module amd app.ts

זה לאחר מכן מקומפל ל

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}
define(["require", "exports", 'moo'], function(require, exports, __moo__) {
    var moo = __moo__;

    var bar = (function (_super) {
        __extends(bar, _super);
        function bar() {
            _super.apply(this, arguments);

        }
        return bar;
    })(moo.foo);
})    

תשובה #3

אם אתה משתמש במודולי AMD, התשובות האחרות לא יעבדו ב-TypeScript 1.0 (הגרסה החדשה ביותר בזמן כתיבת שורות אלו).

יש לך גישות שונות זמינות, בהתאם למספר הדברים שתרצה לייצא מכל קובץ .ts.

ייצוא מרובה

פו.ts

export class Foo {}
export interface IFoo {}

bar.ts

import fooModule = require("Foo");

var foo1 = new fooModule.Foo();
var foo2: fooModule.IFoo = {};

ייצוא יחיד

פו.ts

class Foo
{}

export = Foo;

bar.ts

import Foo = require("Foo");

var foo = new Foo();

תשובה #4

אם אתם רוצים להשתמש במודולים ורוצים שזה יתקמפל לקובץ JavaScript יחיד, אתם יכולים לעשות את הפעולה הבאה:

tsc -out _compiled/main.js Main.ts

Main.ts

///<reference path='AnotherNamespace/ClassOne.ts'/>
///<reference path='AnotherNamespace/ClassTwo.ts'/>

module MyNamespace
{
    import ClassOne = AnotherNamespace.ClassOne;
    import ClassTwo = AnotherNamespace.ClassTwo;

    export class Main
    {
        private _classOne:ClassOne;
        private _classTwo:ClassTwo;

        constructor()
        {
            this._classOne = new ClassOne();
            this._classTwo = new ClassTwo();
        }
    }
}

ClassOne.ts

///<reference path='CommonComponent.ts'/>

module AnotherNamespace
{
    export class ClassOne
    {
        private _component:CommonComponent;

        constructor()
        {
            this._component = new CommonComponent();
        }
    }
}

CommonComponent.ts

module AnotherNamespace
{
    export class CommonComponent
    {
        constructor()
        {
        }
    }
}

אתה יכול לקרוא עוד כאן: http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/

תשובה #5

מאז TypeScript 1.8+ אתה יכול להשתמש בפקודת import פשוטה כמו:

import { ClassName } from '../relative/path/to/file';

או הגרסה הכוללת תווים כללים:

import * as YourName from 'global-or-relative';

קרא עוד: https://www.typescriptlang.org/docs/handbook/modules.html

תשובה #6

אני הייתי נמנע עכשיו משימוש ב-/// <reference path='moo.ts'/> אלא עבור ספריות חיצוניות שבהן קובץ ההגדרה לא כלול בחבילה.

ה-reference path פותר שגיאות בעורך, אבל זה לא באמת אומר שהקובץ צריך להיות מיובא. לכן אם אתם משתמשים ב-workflow של gulp או JSPM, הם עשויים לנסות לקמפל כל קובץ בנפרד במקום tsc -out לקובץ אחד.

מ-Typescript 1.5

פשוט הוסף קידומת למה שאתה רוצה לייצא ברמת הקובץ (תחום השורש)

aLib.ts

{
export class AClass(){} // exported i.e. will be available for import
export valueZero = 0; // will be available for import
}

אתה גם יכול להוסיף מאוחר יותר בסוף הקובץ את מה שאתה רוצה לייצא

{
class AClass(){} // not exported yet
valueZero = 0; // not exported yet
valueOne = 1; // not exported (and will not in this example)

export {AClass, valueZero} // pick the one you want to export
}

או אפילו לערבב את שניהם יחד

{
class AClass(){} // not exported yet
export valueZero = 0; // will be available for import
export {AClass} // add AClass to the export list
}

לייבוא יש לך 2 אפשרויות, קודם אתה בוחר שוב מה שאתה רוצה (אחד אחד)

anotherFile.ts

{
import {AClass} from "./aLib.ts"; // you import only AClass
var test = new AClass();
}

או כל הייצוא

{
import * as lib from "./aLib.ts"; // you import all the exported values within a "lib" object
var test = new lib.AClass();
}

הערה לגבי הייצוא: ייצוא פעמיים של אותו ערך יגרום לשגיאה { export valueZero=0; export {valueZero};/valueZero כבר מיוצא… }