用typescript写静态页面

2024年3月29日 177次阅读 来源: 野生爬山虎

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

    原文作者：野生爬山虎
    原文地址: https://segmentfault.com/a/1190000014229850
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞