TypeScript 创建Windows应用商店程序

最新推荐文章于 2024-09-14 08:48:29 发布

SamYoc

最新推荐文章于 2024-09-14 08:48:29 发布

阅读量3.5k

点赞数 1

分类专栏： Web Windows Store App TypeScript 文章标签： typescript 应用商店 javascript Windows Store App

本文链接：https://blog.csdn.net/LeyYang/article/details/39547053

版权

Web 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

Windows Store App

3 篇文章 0 订阅

订阅专栏

TypeScript

3 篇文章 0 订阅

订阅专栏

TypeScript是微软最新推出的类型化的开源的JavaScript超级包，它提供了模块，类，接口等特性，本质上是向Javascript添加了基于类型和基于类的面向对象编程，使Javascript可以更好的用于大型应用的开发，最终编译生成Javascript代码。话不多说，大家如果想了解更多信息可以点这个链接TypeScript，这次我们要尝试用TypeScript来创建应用商店程序。

在此之前我假定小伙伴们已经装好了TypeScript工具了，没装的可以点这个链接TypeScript 1.0 Tools（官方的），好了，开始吧。

打开Visual Studio，打开添加项目对话框

为什么TypeScript选项没有创建应用商店程序选项，这下坑了，难道说要创建应用商店程序的梦想要泡汤了？别担心，总有办法的，要是直接有这个选项的话，那我再写这篇文章岂不是很蛋疼。好吧，既然TypeScript的根是Javascript，那我们用Javascript创建一个应用商店程序。

OK，创建完成了，如果你现在添加一个TypeScript文件的话是不会起作用的，因为项目还没有配置编译TypeScript，我们要对这个项目进行改造。首先卸载你当前的项目（Unload Project），

然后再编辑当前项目的项目文件。

现在我们要加点东西让MSBuild知道当它遇到Typescript文件的时候该怎么做（当然你的MSBuild文件夹里得有TypeScript相关组件啊，一般是放在C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\TypeScript）。我们先找到一个PropertyGroup节点，一般在37行，它有一个属性Label="Globals"，这个时候它有一个子节点是ProjectGuid，我们再给它添加一个子节点吧<TypeScriptPath>。（ProjectGuid 不要改）

  <PropertyGroup Label="Globals">
    <ProjectGuid>73e279d1-204c-41f7-8ba0-e84c8708fbb5</ProjectGuid>
    <TypeScriptPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(MSBuildToolsVersion)\TypeScript</TypeScriptPath>
  </PropertyGroup>

其实这个<TypeScriptPath>对应的就是TypeScript组件的位置（我这里对应C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\TypeScript），下面我们为Typescript编译器添加默认属性，可以看到上面那个节点下面有几个<import>的节点，我们就把我们要添加的放在这些节点下面。

<Import Project="$(TypeScriptPath)\Microsoft.TypeScript.Default.props" />

最后我们要添加的是Typescript Debug和Release的配置，这些配置包括了许多编译Typescript时需要执行的Tasks，将以下代码添加至末尾。

<pre name="code" class="html">  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptModuleKind>AMD</TypeScriptModuleKind>
  </PropertyGroup>
  <Import Project="$(TypeScriptPath)\Microsoft.TypeScript.targets" />
  <Import Project="$(TypeScriptPath)\Microsoft.TypeScript.jsproj.targets" />

TypeScriptTarget是告诉编译器把TypeScript文件编译成EcmeScript 5，TypeScriptRemoveComments设置是否去除注释， TypeScriptSourceMap设置调试并可打断点。TypeScriptModuleKind是告诉Typescript编译器应该使用AMD 组件，当然我们也可以把它设置成CommonJS。

好了，项目文件的改造完成了，保存项目文件并重新加载项目。下面我们添加一个TypeScript文件，由于添加新项对话框里没有TypeScript选项，我们只能随便选一个代码文件把后缀名改为.ts了，这里我在js文件夹下添加了一个default.ts,查看这个ts文件的属性，当你看到属性里的Package Action是TypeScriptCompile,那就代表我们改造成功了。

大家有没有注意到我的js文件夹里有两格名为default的文件，只是格式不同，一个为ts一个为js，但它们现在是关联起来的（当我们改造完项目文件，添加一个同名的ts文件就自动关联了），编译器编译default.ts文件生成的JavaScript代码会放在default.js中。现在default.js就相当于default.ts的javascript解释。也许两个文件并存看起来会有点累赘，我们可以在修改项目文件，让他们合并在一起。在项目文件里找到include该文件的地方，并把它替换成如下代码。

    <Content Include="js\default.js">
      <DependentUpon>default.ts</DependentUpon>
    </Content>

看现在是不是好多了呢

下面我们再在js文件下添加一个home.ts文件，然后编译以下项目，编译后生成了home.ts和home.js.map文件

又一次证明了我们改造项目成功，home.js.map是home.js和home.ts关联的关键，每一个ts文件最终都会生成同名的js文件，我们修改ts文件后相应的js文件最终也会被更新，这关键之处就在于这个.map文件了。有效文件还是home.js你可以把它包含在项目当初，可以把它们像default.ts和default.js那样整合起来。

References： http://www.typescriptlang.org/

http://www.timmykokke.com/2014/04/enabling-typescript-compilation-in-windows-store-apps/