Làm cách nào để nhập các tệp TypeScript khác?


164

Khi sử dụng plugin TypeScript cho vs.net, làm cách nào để tạo một mô-đun nhập tệp TypeScript được khai báo trong các tệp TypeScript khác?

tập tin 1:

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

tập 2:

//what goes here?

class bar extends moo.foo
{
}

Câu trả lời:


202

Từ TypeScript phiên bản 1.8, bạn có thể sử dụng các importcâu lệnh đơn giản giống như trong ES6:

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

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

Câu trả lời cũ: Từ TypeScript phiên bản 1.5, bạn có thể sử dụng tsconfig.json: http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Nó hoàn toàn loại bỏ sự cần thiết của phong cách bình luận tham khảo.

Câu trả lời cũ hơn:

Bạn cần tham chiếu tệp trên đầu tệp hiện tại.

Bạn có thể làm điều này như thế này:

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

class Foo { }

Vân vân.

Những đường dẫn này có liên quan đến tập tin hiện tại.

Ví dụ của bạn:

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

class bar extends moo.foo
{
}

1
Điều này hoạt động tốt, tuy nhiên, khi tôi biên dịch mã thành js. không có "yêu cầu" hoặc bất kỳ loại liên kết nào đến các tệp bên ngoài ... từ những gì tôi có thể thấy trên các ví dụ khác, tôi nên thực hiện "nhập moo = mô-đun (" moo "); tuy nhiên, nó phàn nàn rằng có không có ai trong phạm vi hiện tại
Roger Johansson

2
Có, referencekhông tạo ra bất kỳ mã js nào tải js đó sau khi biên dịch. Nó chỉ dành cho trình biên dịch. Tôi không có kinh nghiệm với TypeScript và AMD vì tôi chỉ đơn giản gói các tệp js được tạo để mọi thứ tôi cần đều ở đó. Nhưng tôi thấy những gì bạn cần và bạn có thể đọc thêm về điều đó ở đây: typecriptang.org/Content/iêu ở trang 75 (chương 9). Btw nó đáng để đọc toàn bộ đặc điểm kỹ thuật, nó tương đối ngắn so với các ngôn ngữ khác.
Peter Porfy

3
Bạn có thể sử dụng --allcờ với tsc trên tệp .ts chính của bạn. Trình biên dịch chỉ ra tất cả các phụ thuộc dựa trên các thẻ tham chiếu của bạn và tạo một tệp .js đầu ra duy nhất cho toàn bộ ứng dụng:tsc --out app.js main.ts
null

@PeterPorfy có bất kỳ cách nào chúng ta có thể gõ mạnh các liên kết tham chiếu bằng T4MVC
Mark Macneil Bikeio

Lưu ý rằng nếu TypeScript được yêu cầu tạo es2015(hoặc esnext) mô-đun, việc chỉ định phần mở rộng tệp trong importcâu lệnh là bắt buộc (trừ khi bạn làm điều này ). TypeScript sẽ không thêm phần mở rộng cho bạn. Ngoài ra, tại thời điểm này, nó không thể xuất ra .mjs, do đó phải mở rộng .js.
Dan Dascalescu

83

Bản mô tả phân biệt hai loại mô-đun khác nhau: Mô-đun bên trong được sử dụng để cấu trúc mã của bạn bên trong. Tại thời gian biên dịch, bạn phải đưa các mô-đun nội bộ vào phạm vi bằng các đường dẫn tham chiếu:

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

class bar extends moo.foo {
}

Mặt khác, các mô-đun bên ngoài được sử dụng để giới thiệu các tệp nguồn bên ngoài sẽ được tải khi chạy bằng CommonJS hoặc AMD . Trong trường hợp của bạn, để sử dụng tải mô-đun bên ngoài, bạn phải làm như sau:

moo.ts

export class foo {
    test: number;
} 

ứng dụng

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

Lưu ý cách khác nhau để mã hóa thành phạm vi. Với các mô-đun bên ngoài, bạn phải sử dụng modulevới tên của tệp nguồn chứa định nghĩa mô-đun. Nếu bạn muốn sử dụng các mô-đun AMD, bạn phải gọi trình biên dịch như sau:

tsc --module amd app.ts

Điều này sau đó được biên dịch thành

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

7
Tôi cảm thấy hoàn toàn bị mất ngay bây giờ, bất kể tôi làm gì, trình biên dịch tạo một .js riêng cho mỗi tệp .ts và không có mã "yêu cầu" trong một trong số chúng ... cũng "nhập moo = module (" moo " ); "đưa ra một lỗi rằng tên moo không tồn tại trong phạm vi hiện tại, làm nổi bật phần mô-đun (" moo ")
Roger Johansson

Một vài điểm cần làm rõ ở đây: Bạn có đang làm việc trong Visual Studio không? Bạn đã thử biên dịch mã tôi đã đưa ra trong câu trả lời bằng cách sử dụng tsc trực tiếp chưa? Bạn đã đặt cả hai tập tin trong cùng một thư mục?
Valentin ngày

1
có, biên dịch từ dòng lệnh, cả hai tệp trong cùng một thư mục.
Roger Johansson

2
Tôi đã rẽ nhánh và gửi cho bạn một yêu cầu kéo. Xin vui lòng cho tôi biết nếu điều đó làm việc.
Valentin ngày

12
hoàn hảo :) cho những người khác đọc điều này: các mô-đun cũng cần được xuất, "mô-đun xuất khẩu xxx"
Roger Johansson

20

Nếu bạn đang sử dụng các mô-đun AMD, các câu trả lời khác sẽ không hoạt động trong TypeScript 1.0 (mới nhất tại thời điểm viết.)

Bạn có các cách tiếp cận khác nhau có sẵn cho bạn, tùy thuộc vào số lượng bạn muốn xuất từ ​​mỗi .tstệp.

Xuất khẩu nhiều

Foo.ts

export class Foo {}
export interface IFoo {}

Bar.ts

import fooModule = require("Foo");

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

Xuất khẩu đơn

Foo.ts

class Foo
{}

export = Foo;

Bar.ts

import Foo = require("Foo");

var foo = new Foo();

Tôi thích cách tiếp cận ở trên và thấy rằng tsc.exe đang tạo ra các phụ thuộc chính xác trong lệnh gọi ban đầu đó để xác định (), đó là TUYỆT VỜI! Vấn đề đối với tôi là 2 lớp riêng biệt, mỗi lớp trong tệp riêng của chúng, mỗi lớp được gói trong một mô-đun xuất - tôi có thể thực hiện "nhập" và một lớp có thể sử dụng lớp khác, nhưng có thể lớp A kế thừa từ B, vẫn sử dụng phần mở rộng TypeScript bằng cách nào đó
Samuel Meacham

@SamuelMeacham, chắc chắn, tôi không hiểu tại sao không. Nếu bạn vẫn gặp sự cố, hãy đặt câu hỏi mới và liên kết với nó tại đây. Tôi sẽ xem qua một chút.
Drew Noakes

1
Điều này đã được tôi sắp xếp ra, mọi thứ bây giờ là siêu mịn. Phụ thuộc, thừa kế, tất cả của nó: stackoverflow.com/questions/21179144/ Khăn
Samuel Meacham

@SamuelMeacham bạn đang đề cập đến trang này hoặc liên kết bạn đã cung cấp, bởi vì câu trả lời này từ Drew dường như xuất hiện trên ...
Alexander Mills

Câu trả lời này khá lỗi thời (2014). Cú pháp hiện tại được mô tả trong phần Mô-đun của cẩm nang TypeScript.
Dan Dascalescu

18

Nếu bạn đang tìm cách sử dụng các mô-đun và muốn nó biên dịch thành một tệp JavaScript duy nhất, bạn có thể thực hiện các thao tác sau:

tsc -out _compiled/main.js Main.ts

Chính

///<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()
        {
        }
    }
}

Bạn có thể đọc thêm tại đây: http://www.codebelt.com/typescript/javascript-namespaces-with-typescript-iternal-modules/


11

Bây giờ tôi sẽ tránh sử dụng /// <reference path='moo.ts'/>nhưng đối với các thư viện bên ngoài nơi tệp định nghĩa không được bao gồm trong gói.

Các reference pathlỗi trong trình soạn thảo, nhưng nó không thực sự có nghĩa là tệp cần phải được nhập. Do đó, nếu bạn đang sử dụng một luồng công việc gulp hoặc JSPM, những người đó có thể cố gắng biên dịch riêng từng tệp thay vì tsc -outmột tệp.

Từ bản đánh máy 1.5

Chỉ cần tiền tố những gì bạn muốn xuất ở cấp độ tệp (phạm vi gốc)

aLib.ts

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

Bạn cũng có thể thêm sau vào cuối tập tin những gì bạn muốn xuất

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

Hoặc thậm chí trộn cả hai với nhau

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

Để nhập bạn có 2 tùy chọn, đầu tiên bạn chọn lại những gì bạn muốn (từng cái một)

otherFile.ts

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

Hoặc toàn bộ xuất khẩu

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

Lưu ý về xuất khẩu: xuất hai lần cùng một giá trị sẽ gây ra lỗi {export valueZero = 0; xuất {valueZero}; // valueZero đã được xuất ra}


Tôi đã bỏ lỡ các dấu ngoặc nhọn xung quanh loại nhập khẩu, vì vậy dòng này đã sửa nó cho tôi:import {AClass} from "./aLib.ts";
Samuel Slade

8

Vì TypeScript, 1.8+bạn có thể sử dụng importcâu lệnh đơn giản đơn giản như:

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

hoặc phiên bản ký tự đại diện:

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

Đọc thêm: https://www.typescriptlang.org/docs/handbook/modules.html


con đường toàn cầu được hỗ trợ ??
Vladimir Venegas

@VladimirVenegas Tôi không chắc là những gì bạn đang chính xác tìm kiếm, nhưng xin hãy xem ở đây: github.com/Microsoft/TypeScript/wiki/...
Szymon Dudziak

Đối với những người vừa mới nhận được vào Bản in, đây là câu trả lời tốt nhất. Để biết ví dụ đầy đủ, hãy xem: github.com/bitjson/typescript-starter
Jason Dreyzehner

3

đã sử dụng một tham chiếu như "///<reference path="web.ts" /> và sau đó trong các thuộc tính dự án VS2013 để xây dựng "app.ts", "Buildcript Build" -> "Kết hợp đầu ra javascript thành tệp:" (đã chọn) -> "app.js"



-1

Xử lý nhanh chóng dễ dàng trong Visual Studio

Kéo và thả tệp có đuôi .ts từ cửa sổ giải pháp sang trình chỉnh sửa, nó sẽ tạo mã tham chiếu nội tuyến như ..

/// <reference path="../../components/someclass.ts"/>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.