다른 TypeScript 파일을 Import하려면 어떻게 해야 하나요?

다른 TypeScript 파일을 Import하려면 어떻게 해야 하나요?

vs.net용 TypeScript 플러그인을 사용하는 경우, 다른 TypeScript 파일에서 하나의 TypeScript 파일 Import 모듈을 선언하려면 어떻게 해야 합니까?

파일 1:

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

파일 2:

//what goes here?

class bar extends moo.foo
{
}

1.부터는 간단한 TypeScript를 할 수 .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 {
}

한편 외부 모듈은 Common을 사용하여 런타임에 로드되는 외부 소스 파일을 참조하기 위해 사용됩니다.JS 또는 AMD.이 경우 외부 모듈 로드를 사용하려면 다음 작업을 수행해야 합니다.

뮤트

export class foo {
    test: number;
} 

앱

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(작성 시점의 최신 버전)에서는 동작하지 않습니다.

하는 물건의 다른 이 있습니다..tsfilename을 클릭합니다.

다중 내보내기

푸우츠

export class Foo {}
export interface IFoo {}

바.ts

import fooModule = require("Foo");

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

---

단일 내보내기

푸우츠

class Foo
{}

export = Foo;

바.ts

import Foo = require("Foo");

var foo = new Foo();

모듈을 사용하는 경우 단일 JavaScript 파일로 컴파일하려면 다음을 수행합니다.

tsc -out _compiled/main.js Main.ts

메인.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();
        }
    }
}

Class One.ts

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

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

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

Common Component.ts

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

자세한 것은, http://www.codebelt.com/typescript/javascript-namespacing-with-typescript-internal-modules/ 를 참조해 주세요.

은 사용하지 하겠습니다./// <reference path='moo.ts'/>단, 정의 파일이 패키지에 포함되어 있지 않은 외부 라이브러리의 경우입니다.

그reference path에서는 에디터의 오류가 해결되지만 파일을 Import할 필요가 있는 것은 아닙니다.따라서 Gulp Workflow 또는 JSPM을 사용하는 경우 각 파일을 개별적으로 컴파일하려고 할 수 있습니다.tsc -out한 파일에 저장합니다.

타입 스크립트 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
}

Import에는 2가지 옵션이 있습니다.먼저 원하는 것을 1개씩 다시 선택합니다.

another File.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" />다음으로 VS2013 프로젝트 속성에서 "app.ts", "Typescript Build"-> "javascript 출력을 파일로 결합:"(체크 표시)-> "app.js"

웹에서 작업을 수행하는 경우 js 파일 확장자를 사용해야 합니다.

import { moo } from 'file.js';

nodejs에 대해 작업을 수행하는 경우 js 파일 확장자를 사용하지 않을 수 있습니다.

import { moo } from 'file';

import {className} from 'filePath';

기억해주세요.Import할 클래스.ts 파일로 내보낼 필요가 있습니다.

Visual Studio에서 빠르고 간단한 프로세스

확장자가 .ts인 파일을 솔루션 창에서 에디터로 드래그 앤 드롭하면 다음과 같은 인라인 참조 코드가 생성됩니다.

/// <reference path="../../components/someclass.ts"/>

언급URL : https://stackoverflow.com/questions/12930049/how-do-i-import-other-typescript-files