我正在使用html和typescript构建网页。它的设置方式是html页面包含一个javascript脚本,它是Typescript文件的转换版本。我这样做是为了利用Typescript中的import
语句以及强类型。我遇到的问题是我似乎无法正确地传递Typescript。我尝试使用amd,commonjs,es2015和umd作为模块选项,但我遇到了各种错误。我知道我在这里错过了一些如何正确地转换为Javascript的东西,但我不确定我错过了什么。我可以使用哪个模块来转换Typescript代码,以便将其包含在html页面中?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/WebResources/ccseq_/Content/bootstrap.min.css"/>
<link rel="stylesheet" href="../css/ProductEvaluation.css" />
</head>
<body>
<div id="product-eval-areas" >
<div v-if="allowReviewerReview" class="list-group">
<div class="list-group-item" v-for="area in areas">
{{area.EvaluationArea}}<star-rating v-model="area.ProductEvaluationScore" v-bind:increment="1" v-bind:star-size="20"></star-rating>
</div>
</div>
<button v-if="allowReviewerReview" class="btn btn-sm" v-on:click="submitEval">Submit Evaluation</button>
<p v-if="alert">{{alertMessage}}</p>
</div>
<script src="/WebResources/ccseq_/Scripts/jquery3.1.1.js"></script>
<script src="/WebResources/ccseq_bootstrap"></script>
<script src="../../Scripts/papaparse.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../js/ProductEvaluationReview.js"></script>
</body>
</html>
我为了简洁而排除了一些功能
"use strict";
import { Constants } from "../../CCSEQ/Constants";
import { WebAPI } from "../../CCSEQ/WebAPI";
import { Xrm } from "../../CCSEQ/Xrm";
import * as Model from "../../CCSEQ/Model";
import { Helpers } from "../../CCSEQ/Helpers";
import * as Vue from "vue";
import * as StarRating from "vue-star-rating";
let currentProductEvaluation = new Model.ProductEvaluation();
Vue.component('star-rating', StarRating.default);
let prodEvalAreas = new Vue({
el: '#product-eval-areas',
data: {
//data
},
computed: {
// Computed stuff
},
methods: {
// Methods
}
});
$(document).ready(function () {
PopulatePage();
});
function PopulatePage() {
//Do stuff to populate page
}
}
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"es5",
"es2015.promise"
],
"module": "umd",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"node_modules",
"wwwroot",
"./WebResources/js/lib",
"./WebResources/js/main"
],
"include": [
"./CCSEQ",
"./WebResources/js"
]
}