用typescript写静态页面

typescript有许多的优点，对于已经上手angular开发的朋友想必都会很熟悉。那么，如果想在其其他非angular框架环境下使用typescript需要哪些步骤呢？

以下内容，我们将以一个静态页面为例，简述搭建typescript编译环境步骤，并且讲解如何在typescript中调用js库

编译环境

1. 首先建立项目目录结构
2. 全局安装typescript npm i typescript -g。安装完成后在运行 tsc -v 可以查看安装的typescript版本，即安装成功

3. 在根目录手动建立tsconfig.json文件，或者终端中输入tsv --init自动生成tsconfig文件，该文件用来配置typescript编译设置。修改后的tsconfig内容如下：

   {
       "compilerOptions": {
           "target": "es5",
           "noImplicitAny": false,
           "module": "commonjs",
           "removeComments": true,
           "sourceMap": false,
           "outDir": "build"
       },
       "exclude": [
           "node_modules"
       ]
   }
   

   我们将编译后的目标格式设定为es5,采用commonjs文件模块，将编译后的目标文件输出到build文件夹

4. 在终端中输入tsc -w即可开始监听ts文件的变化，文件保存后将会同步编译输出到目标文件夹中。

在typescript中调用js库

以调用一个canvas库fabric为例

1. typescript识别js库需要一个接口文件（.d.ts），fabricjs的接口文件已经做好了，只需在终端众npm i @types/fabric --save即可安装
2. 其余步骤与以往写js时一样，在html中引入fabricjs<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>，在html中引入编译后的js文件<script src="./build/funny.js"></script>

以上就是typescript在静态页面中的应用。