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
{
}
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:
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
{
}
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.
--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
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.
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);
})
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.
Foo.ts
export class Foo {}
export interface IFoo {}
Bar.ts
import fooModule = require("Foo");
var foo1 = new fooModule.Foo();
var foo2: fooModule.IFoo = {};
Foo.ts
class Foo
{}
export = Foo;
Bar.ts
import Foo = require("Foo");
var foo = new Foo();
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/
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}
import {AClass} from "./aLib.ts";
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
đã 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"
import {className} from 'filePath';
cũng nhớ Lớp bạn đang nhập, phải được xuất trong tệp .ts.
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"/>