typescript + amd tips

focusj 发布于2019-08-20 18:25 / 1416人阅读

摘要：配合规范的更轻量纯前端打开方式曾经数年以前，就尝试无奈至今一直有几个小问题没有处理必须要这样的方式写代码，才能有提示由于，必须要打包项目，才能把以方式剔除必须要下安装各种库的才能到提示文件经常会想，既然很麻烦，怎么使用无所谓，加个工具链也能

typescript 配合 amd 规范的更轻量、"纯" 前端打开方式

曾经数年以前，就尝试 typescript 无奈至今一直有几个小问题没有处理:

0 必须要 import * as $ from "jquery" 这样的方式写代码，才能有提示
1 由于0，必须要 webpack 打包项目，才能把 jquery 以 external 方式剔除
2 必须要 node_modules 下安装各种库的 d.ts 才能 resolve 到提示文件

经常会想，既然很麻烦，怎么使用无所谓，加个 webpack 工具链也能忍，html 提前引入脚本方式要放弃，一点点妥协之后，项目才能跑起来，对 npm 和 webpack 的重度依赖终究是个梗！

于是突然有一天发现了如下解法：

import * as $ from "jquery"

使用代码不变，才能有提示

require.config({
    baseUrl: "./",
    paths: {
        "jquery": "../lib/jquery.min",
    },
    shim: {
        "jquery": {
            exports: "$"
        },
    }
})

这里同时加入 paths 和 shim，从而支持了 script 引入和 require 加载

html 正常使用 script 全局引入，我用了百度的 esl 加载器 requirejs 同理

"paths": {
  "jquery": ["typing/jquery/index.d.ts"]
},

tsconfig 配置后，可以把 @types/jquery 的申明文件放在自定义项目目录./typing/ 里了

且你可以自定义静态化的处理 typing 下的 d.ts 文件!
且你可以自定义静态化的处理 typing 下的 d.ts 文件!
且你可以自定义静态化的处理 typing 下的 d.ts 文件!

重事3遍，d.ts 和模块名的正确对应后，vscode 提示完美!

至此，任意一个前端项目仅需要依赖一个 tsc 编译 typescript 就可以轻量的完美运行了，

终于可以优雅的写 ts 了，爽！

由于依赖太少，大家可以根据需要定制自己的方案！

GPU云服务器云服务器 TypeScript typescript javascript tip tips

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

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

RDD的前端背包

摘要：中文最小字体问题添加属性以取消浏览器的自动调整会使原本应该调整的地方失效原本就是专为了移动端设置的属性，桌面端不适应已修复建议通过缩小来获得小字体。暂时先堆在一起，等某条目里面的内容超过十条了，就单列出去。更新历史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

Pandaaa 2019-08-29 11:33 评论0 收藏0
RDD的前端背包

摘要：中文最小字体问题添加属性以取消浏览器的自动调整会使原本应该调整的地方失效原本就是专为了移动端设置的属性，桌面端不适应已修复建议通过缩小来获得小字体。暂时先堆在一起，等某条目里面的内容超过十条了，就单列出去。更新历史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

csRyan 2019-08-20 12:15 评论0 收藏0
RDD的前端背包

摘要：中文最小字体问题添加属性以取消浏览器的自动调整会使原本应该调整的地方失效原本就是专为了移动端设置的属性，桌面端不适应已修复建议通过缩小来获得小字体。暂时先堆在一起，等某条目里面的内容超过十条了，就单列出去。更新历史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

jifei 2019-08-01 15:56 评论0 收藏0
从 JavaScript 到 TypeScript - 模块化和构建

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

Jonathan Shieber 2019-08-20 15:38 评论0 收藏0
如何使用TypeScript和Webpack编写网页应用

摘要：所以，如果你也考虑开始使用，不妨也看一下。使用模块中，模块的使用方法与一致。安装好定义文件之后，如果使用等对支持较好的编辑器，则会提供更加强大的代码提示功能。如果使用配合的，则可以方便地构建浏览器可以运行的代码。 TypeScript所做的，是在JavaScript的基础上加入了类型，TypeScript编译器将TypeScript编译成JavaScript，可以在浏览器或者nodej...

Codeing_ls 2019-08-19 18:19 评论0 收藏0