资讯专栏INFORMATION COLUMN

用typescript写静态页面

canger / 862人阅读

摘要:在中调用库以调用一个库为例识别库需要一个接口文件,的接口文件已经做好了,只需在终端众即可安装其余步骤与以往写时一样,在中引入,在中引入编译后的文件以上就是在静态页面中的应用。

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,在html中引入编译后的js文件

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94036.html

相关文章

  • 从 JavaScript 到 TypeScript - 模块化和构建

    摘要:不过,相对于静态类型检查带来的好处,这些代价是值得的。当然少不了的模块化标准,虽然到目前为止和大部分浏览器都还不支持它。本身支持两种模块化方式,一种是对的模块的微小扩展,另一种是在发布之前本身模仿的命名空间。有一种情况例外。 TypeScript 带来的最大好处就是静态类型检查,所以在从 JavaScript 转向 TypeScript 之前,一定要认识到添加类型定义会带来额外的工作量...

    Jonathan Shieber 评论0 收藏0
  • 前端常技术概述--Less、typescript与webpack

    摘要:前言讲起前端,我们就不能不讲与,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,的扩展有等,的超集有等。如下注意你的样式文件一定要在引入前先引入。截止目前,已经发布了最新的版本。 前言:讲起前端,我们就不能不讲CSS与Javascript,在这两种技术广泛应用的今天,他们的扩展也是层出不穷,css的扩展有Less、Sass、Stylus等,js的超集有Typescript等。今天我们就简...

    番茄西红柿 评论0 收藏0
  • Vue + TypeScript + Element 项目实践(简洁时尚博客网站)及踩坑记

    摘要:前言本文讲解如何在项目中使用来搭建并开发项目,并在此过程中踩过的坑。具有类型系统,且是的超集,在年势头迅猛,可谓遍地开花。年将会更加普及,能够熟练掌握,并使用开发过项目,将更加成为前端开发者的优势。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文讲解如何在 Vue 项目中使用 TypeScript...

    luckyyulin 评论0 收藏0
  • Flow - JS静态类型检查工具

    摘要:介绍是个的静态类型检查工具,由出品的开源码项目,问世只有一年多,是个相当年轻的项目。现在,提供了另一个新的选项,它是一种强静态类型的辅助检查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目标是提供一些Flow工具的介绍与使用建议。Flow本质上也只是个检查工具,它并不会自动修正代码中的错误,也不会强制...

    seanHai 评论0 收藏0
  • 「每日一瞥

    摘要:即使中没有错误,仍然会执行,这一点一般都是知道的。我们认为这是正确的前进道路,兼具战略性和务实性降低使用门槛开发人员迁移到的障碍之一是从到的并不轻松的迁移。下一步将通过一系列功能和插件为的平滑过渡提供支持,并以此回馈社区。 showImg(https://segmentfault.com/img/remote/1460000017516912?w=1200&h=630); useSt...

    XboxYan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<