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在静态页面中的运用。