[typescript] 다른 TypeScript 파일을 가져 오려면 어떻게합니까?

Program / 글쓴이

vs.net 용 TypeScript 플러그인을 사용할 때 하나의 TypeScript 파일을 다른 TypeScript 파일에 선언 된 모듈을 가져 오려면 어떻게해야합니까?

파일 1 :

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

파일 2 :

//what goes here?

class bar extends moo.foo
{
}

답변

TypeScript 버전 1.8부터는 importES6에서와 같이 간단한 명령문을 사용할 수 있습니다 .

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
{
}

답변

Typescript는 두 가지 종류의 모듈을 구별합니다. 내부 모듈은 코드를 내부적으로 구성하는 데 사용됩니다. 컴파일 타임에 참조 경로를 사용하여 내부 모듈을 범위 내로 가져와야합니다.

/// <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);
})

답변

AMD 모듈을 사용하는 경우 다른 답변은 TypeScript 1.0 (작성 당시 최신)에서 작동하지 않습니다.

각 .ts파일 에서 내보내려는 항목 수에 따라 다양한 방법을 사용할 수 있습니다 .

여러 수출

푸츠

export class Foo {}
export interface IFoo {}

Bar.ts

import fooModule = require("Foo");

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

단일 수출

푸츠

class Foo
{}

export = Foo;

Bar.ts

import Foo = require("Foo");

var foo = new Foo();

답변

모듈을 사용하고 단일 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/

답변

지금은 사용하지 않는 것이 /// <reference path='moo.ts'/>정의 파일이 패키지에 포함되지 않은 외부 라이브러리를하지만.

reference path로 해결할 수있는 문제의 편집기에 오류가 있지만, 정말 파일의 요구를 의미하지 않습니다 가져올 수 있습니다. 따라서 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
}

가져 오기에는 두 가지 옵션이 있습니다. 먼저 원하는 것을 다시 선택하십시오 (하나씩)

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; 수출 {valueZero}; // valueZero가 이미 내보내졌습니다…}

답변

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

답변

"///<reference path="web.ts" />
“app.ts”, “Typescript Build”-> “자바 스크립트 출력을 파일로 결합하기 위해 VS2013 프로젝트 속성에서 참조를 사용한 후 다음 과 같이 참조를 사용했습니다 :”(checked)-> “app.js”