用typescript写静态页面

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

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

首先建立项目目录结构
全局安装typescript npm i typescript -g。安装完成后在运行 tsc -v 可以查看安装的typescript版本，即安装成功
在根目录手动建立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文件夹
在终端中输入tsc -w即可开始监听ts文件的变化，文件保存后将会同步编译输出到目标文件夹中。

以调用一个canvas库fabric为例

typescript识别js库需要一个接口文件（.d.ts），fabricjs的接口文件已经做好了，只需在终端众npm i @types/fabric --save即可安装
其余步骤与以往写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在静态页面中的应用。