TS在Vue 中一些小东西

前沿

最近的文章有点水，因为都在忙着自己的副业，哈哈

然后还是2021的第一篇文章

就是在typeScript中的一些注意点

1、应用下载安装ts-md5

npm install ts-md5 --save

2、 需要的组件中加载md5模块

import {Md5} from "ts-md5/dist/md5";

3.加密

constructor() {
    console.log(Md5.hashStr("123456"));
}

常用规则

控制缩进为两个空格

"@typescript-eslint/indent": ["error", 2]

字符串总为一个单引号包裹

"quotes": [1, "single"]

只要求自定义的方法设置返回类型

"@typescript-eslint/explicit-function-return-type": ["warn", {
  allowExpressions: true
}]

关闭any类型时的警告

"@typescript-eslint/no-explicit-any": ["off"]

在typescript+Vue的项目中引用echarts，

引入echarts和@types/echarts两个包，一个是工程依赖，一个是声明依赖。

npm install echarts --save
npm install --save @types/echarts

然后在需要引用echarts的组件中引入echarts

<script lang="ts">
……
import echarts from 'echarts';
……
</script>

然后设置好option选项，将图表渲染在DOM里：

// HTML部分
<div ref="chart"></div>

// Script部分
option={};
const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
        Chart.setOption(this.option);

真的太不符合我的意思了啊哈 ，下篇内容一定精彩

抱歉