Sử dụng jspm với TypeScript

Question

Có thể kết hợp jspm với TypeScript và hệ thống mô-đun TypeScript không?

Tôi không thể tìm thấy tài liệu hoặc mẫu về điều này.

Answer 1

Update - v1.5

SystemJS đã được thêm vào như là một loại mô-đun cho nguyên cảo, vì vậy bạn sẽ có thể sử dụng SystemJS ra khỏi hộp và biên dịch với các module cờ:

tsc --module system app.ts 

Điều này đã được thêm vào cùng với cú pháp nhập khẩu mô-đun ES6, vì vậy bạn có thể sử dụng kiểu đó và biên dịch nó thành những gì bạn cần.

import * as $ from "jquery"; 

gốc trả lời

Nếu bạn đang sử dụng cú pháp SystemJS, bạn có thể khai báo các phần bạn cần như thế này:

systemjs.d.ts

interface System { 
    then: (cb: Function) => void; 
} 

interface SystemStatic { 
    import: (name: string) => System; 
} 

declare var System: SystemStatic; 

export = System; 

Bạn nên sau đó có thể sử dụng nó như sau:

/// <reference path="jquery.d.ts" /> 

import System = require('systemjs'); 

System.import('jquery').then(($: JQueryStatic) => { 
    $('#id').html('Hello world'); 
}); 

Answer 2

Cập nhật tháng 2 năm 2016: Theo yêu cầu của Abhishek Prakash, tôi đã thiết lập an example repository on GitHub. Cảm thấy tự do để chơi với các nguồn và xem cách hoạt động của các công việc kiểu và jspm.

---

Như tôi đã muốn thử ra nguyên cảo (tham khảo phiên bản 1.5 ở đây) để làm việc cùng với AngularJS và jspm, tôi không thể tìm thấy bất kỳ giải pháp, nhưng vấp phải câu hỏi này và câu trả lời của Steve, nhưng tôi vẫn couldn' làm cho nó làm việc với thông tin đó. Vì vậy, tôi đã cố gắng rất nhiều thứ một mình và cuối cùng làm cho nó hoạt động. Vì vậy, đây là một số ví dụ về cách sử dụng nguyên cảo với jspm trong một môi trường AngularJS:

Lúc đầu, cài đặt AngularJS với jspm với

jspm install angular 

Sau đó cài đặt các tập tin định nghĩa DefinitelyTyped với tsd hoặc bằng tay. Bây giờ bạn có thể nhập AngularJS với cú pháp ES6:

/// <reference path="typings/angularjs/angular.d.ts" /> 

import * as angular from 'angular'; 

Một lưu ý nhanh chóng, vì điều này đã cho tôi điên tại cố gắng đầu tiên: Bạn sẽ cần cả hai, một con đường đúng để góc và các định nghĩa kiểu! Nếu một trong cả hai bị thiếu (đối với tôi, tôi không bao gồm dòng tham chiếu), tsc sẽ ném

lỗi TS2307: Không thể tìm thấy mô-đun 'góc cạnh'.

Thật khó để gỡ lỗi, như tôi đã nghĩ, nó không thể tìm thấy mô-đun, nhưng tôi vừa bỏ qua tham chiếu định nghĩa. Vì vậy, chỉ cần đảm bảo bạn luôn có các định nghĩa chính xác hiện diện cho mọi thứ bạn đang cố gắng nhập!

Sau đó, biên dịch TypeScript của bạn bằng cách sử dụng tsc --module system app.ts, trong khi giá trị cho mô-đun có thể là commonjs, amd, system hoặc umd.Vui lòng chọn hệ thống mô-đun bạn muốn sử dụng trong môi trường của bạn! Không cần sử dụng hệ thống cho SystemJS. Trình biên dịch TypeScript sẽ chỉ quấn mô-đun được chọn cụ thể "mẫu" xung quanh mã của bạn (hoặc tốt hơn là tạo mô-đun của loại mô-đun được chỉ định), vì vậy nó có thể được nạp với SystemJS sau (khi sử dụng --module system).

Trong trường hợp của tôi, đối với một môi trường trình duyệt AngularJS tôi đã chọn amd (sử dụng system không hoạt động, vì trình tải mô-đun es6 từ SystemJS không thể tải các tệp theo cách đó ... Tôi chưa biết tại sao !).

Sử dụng --module amd chuyển đổi, tôi có thể dễ dàng nhập các tập tin biên soạn với SystemJS bên HTML code trang của tôi bằng cách sử dụng:

<script src="jspm_packages/system.js"></script> 
<script src="config.js"></script> 
<script> 
    System.import('src/app'); 
</script> 

Hy vọng điều này sẽ giúp ai đó mà chỉ còn một mình trong tài liệu, giống như tôi.

Answer 3

Tôi đã thử các giải pháp hiện tại được đăng trên trang web chính thức của JSPM và một số repo git được gợi ý trong bài đăng này không có kết quả. Lý do là việc xử lý các tệp enums kiểu chữ với thực thi TS hiện tại. Tôi đề nghị trước tiên bạn nên transpile ứng dụng với trình biên dịch TS trực tiếp và sau đó chạy nội dung này thông qua các công cụ xây dựng JSPM.

http://www.itsgettinghotamerica.com/2016/07/making-javascript-build-process-work.html