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文件的变化,文件保留后将会同步编译输出到目的文件夹中。
在typescript中挪用js库
以挪用一个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在静态页面中的运用。