3
utility.ts브라우저에서 타이프 스크립트를 사용하는 방법은 무엇입니까?
let books = [
{ id: 1, title: "the dark window", author: "krishna", available: true },
{ id: 2, title: "naked eye", author: "sydney", available: false },
{ id: 3, title: "half girlfriend", author: "chetan", available: true },
{ id: 4, title: "make my dreams", author: "salam", available: false }
];
export { books };
main-는
import {books} from './utility';
let getAllBooks =(): void => {
books.filter((val) => {
console.log(val.author);
})
}
가 어떻게 HTML 페이지에 getAllBooks의 functiion에 액세스 할 수 있습니다 app.ts? 수출 및 가져 오기를 사용하지 않으면 완벽하게 작동하지만 모든 것을 하나의 파일에 쓰는 대신이 파일을 사용해야합니다.
출력 [main.js]로 하나의 JS 파일을 생성하려면 [amd module 사용]에 대한 조언을 구하십시오. Chrome 콘솔에서 아래 오류가 표시됩니다.
[(지수) 13 catch되지는 ReferenceError : getAllBooks은 HTMLInputElement.onclick ((지수) 13)에 정의되지]
내 HTML 페이지
<html>
<title>Welcome</title>
<head>
<script data-main="./js/main" src="./js/require.js"></script>
<script src="./js/main.js"></script>
<body>
<div id="mytest"></div>
<input type="button" value="Click!" id="btnClick" onclick="getAllBooks();" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</head>
</html>
main.js
define("utility", ["require", "exports"], function (require, exports) {
"use strict";
let books = [
{ id: 1, title: "the dark window", author: "krishna", available: true },
{ id: 2, title: "naked eye", author: "sydney", available: false },
{ id: 3, title: "half girlfriend", author: "chetan", available: true },
{ id: 4, title: "make my dreams", author: "salam", available: false }
];
exports.books = books;
});
define("app", ["require", "exports", "utility"], function (require, exports, utility_1) {
"use strict";
let getAllBooks =() => {
utility_1.books.filter((val) => {
console.log(val.author);
});
};
});
//# sourceMappingURL=main.js.map
콘텐츠 출력 main.js 파일을 표시 할 수 있습니까? –
모듈 로더를 HTML에서 직접 정의하는 것은 다소 나쁜 아이디어라고 생각합니다 ... – Sirko
@ Hjort-e main.js 파일을 포함했습니다. – KrishOnline