乐趣区

Fundebug前端异常监控插件更新至200全面支持TypeScript

jiezi

摘要： 是时候支持 TS 了！

Fundebug 前端异常监控服务

Fundebug 提供专业的前端异常监控服务，我们的插件可以提供全方位的异常监控，可以帮助开发者第一时间定位各种前端异常，包括但不限于 JavaScript 执行错误以及 HTTP 请求错误。

并且，Fundebug 支持 Source Map 还原，记录用户行为以及“录制”用户操作视频，帮助开发者快速复现 BUG，提高 Debug 效率，欢迎大家免费试用~

Fundebug 前端异常监控插件更新至 2.0.0，全面支持 TypeScript，为使用 TypeScript 的用户提供更好的编程体验。

关于 TypeScript

想必大家都听说过 TypeScript：

  • Vue 3.0 使用 TypeScript 重写
  • Node.js 作者使用 TypeScript 开发 Deno，一个新的 JavaScript 后端语言

为什么很多人开始使用 TS 了呢？

因为 JavaScript 没有类型，而 TypeScript 有类型的，这样可以提高代码的正确性。另一方面，全面的类型推断意味着编辑器可以提供完备的代码补全和类型错误提醒，提高开发者的开发效率。

对 TypeScript 感兴趣的同学，不妨看看 TS 作者 Anders Hejlsberg 的视频 Introducing TypeScript。Anders Hejlsberg 是程序员界的传奇人物，C# 与 TypeScript 都是由他设计主导，年近 60 依然还在编程，但是，他的视频非常浅显易懂！

全面支持 TypeScript

TypeScript 已经在业界应用了多年，且越来越流行，因此 Fundebug 的前端异常监控插件也应该全面支持 TypeScript 了：

  • 所有的代码由 JavaScript 切换为 TypeScript
  • 严格遵守 TSLint 的语法规则
  • 为 fundebug 的各个 API 编写严格的类型声明文件

对于 TypeScript 用户来说，在使用 fundebug 的 API，比如 fundebug.test()时，可以方便地看到类型提示：

可知，fundebug.test()有 2 个可选参数 name 与 message，类型都是字符串。

新增 fundebug.init()方法

为了兼容严格的 TypeScript 语法，我们新增了 fundebug.init 方法来配置各种属性，例如 apikey：

fundebug.init({apikey: "API-KEY"});

TypeScript 用户在使用全局变量 fundebug 来配置各种属性时，则会看到报错：

这时，使用 // @ts-ignore 忽略下一行的报错即可：

// @ts-ignore
fundebug.apikey = 'API-KEY'

不过，还是推荐大家使用 fundebug.init 方法进行配置。

fundebug.d.ts

fundebug.d.ts 为 Fundebug 前端异常监控插件的类型声明文件：

// Type definitions for fundebug-javascript
// Project: https://www.npmjs.com/package/fundebug-javascript
// Definitions by: Fundebug <https://www.fundebug.com>

export as namespace fundebug;

export function init(config: IConfigs): undefined;

export function test(name?: string, message?: string): undefined;

export function notify(
    name: string,
    message: string,
    options?: IOptions
): undefined;

export function notifyError(error: Error, options?: IOptions): undefined;

interface IConfigs {
    apikey: string;
    appversion?: string;
    releasestage?: string;
    user?: IUser;
    metaData?: object;
    callback?: ICallback;
    setHttpBody?: boolean;
    httpTimeout?: number;
    filters?: object[];
    silent?: boolean;
    silentDev?: boolean;
    silentResource?: boolean;
    silentHttp?: boolean;
    silentWebsocket?: boolean;
    silentConsole?: boolean;
    silentPerformance?: boolean;
    sampleRate?: number;
    domain?: string;
}

interface IUser {
    name: string;
    email: string;
}

type ICallback = (event: object) => void;

interface IOptions {metaData?: object;}

参考

  • Anders Hejlsberg: Introducing TypeScript

关于 Fundebug

Fundebug 专注于 JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js 和 Java 线上应用实时 BUG 监控。自从 2016 年双十一正式上线，Fundebug 累计处理了 20 亿 + 错误事件，付费客户有阳光保险、核桃编程、荔枝 FM、掌门 1 对 1、微脉、青团社等众多品牌企业。欢迎大家免费试用！

版权声明

转载时请注明作者 Fundebug以及本文地址：

https://blog.fundebug.com/2019/09/05/fundebug-javascript-2-0-0-support-typescript/

退出移动版