TypeScript成长记

1、类型“HTMLElement | null”的参数不能赋给类型“HTMLElement”的参数。 不能将类型“null”分配给类型“HTMLElement”

image.png

 // 获取元素
    let dom = document.getElementById("container");
    // 初始化echarts
    let myChart = echarts.init(dom);

修改为

 // 获取元素
    let dom = document.getElementById("container") as HTMLElement;
    // 初始化echarts
    let myChart = echarts.init(dom);

2、"UserConfig" 是一种类型，在同时启用了 "preserveValueImports" 和 "isolatedModules" 时，必须使用仅类型导入进行导入

import { ConfigEnv, UserConfig } from 'vite'
//修改为以下导入方式
import type { ConfigEnv, UserConfig } from 'vite'

3、Could not find a declaration file for module ‘element-plus‘.

主要原因就是项目中默认开启检验，解决方案2种：1、简单粗暴，关闭检测【1、在tsconfig.json里的compilerOptions加入noImplicitAny: false；2、// @ts-ignore 忽略掉对这个文件的验证；3、生命变量类型为：any】；2、生命变量类型为：any

//新建x.d.ts
declare module 'element-plus/dist/index.full';
declare module 'element-plus/dist/locale/zh-cn.mjs';

4、 Failed to resolve component: el-button

在使用中引入相关插件 import { ElButton } from 'element-plus';

5、 解决ts开发时引入图片报错：“找不到xxx或其相应的类型声明” 的问题

在项目的.d.ts文件中增加下面声明：

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

6、Object动态属性设置

报错

在定义上增加定义

//采用Typescript中的接口Interface
interface ApiInterface {
  [key: string]: any;
}

const getApiInterface = (): Object => {
  const apiInterface = {};
  ["1", "2"].map((key) => {
    Object.assign(apiInterface, {
      [key]: 1111,
    });
  });
  return apiInterface;
};

const ApiInterface: ApiInterface = getApiInterface();

在项目中的tsconfig.json文件中添加

 "suppressImplicitAnyIndexErrors":true,

参照：TypeScript 对象类型的属性访问报错 / 给对象动态添加属性报错 - (jianshu.com)

7、

image.png

出现这个错误是因为ref是响应式的，可能被修改，可能存在数组为0的情况
修正如下：

image.png

8、解决某个值可能为null时，TS编译报错问题

image.png

const handleClick = () => {
//通过ts可选符?来将目标设置为可选，避免出现错误
  document.querySelector("#homeImg")?.scrollIntoView(true);
};

参考：
解决某个值可能为null时，TS编译报错问题 - 掘金 (juejin.cn)
typescript：修复对象可能是'空'或'未定义'的教程 - 掘金 (juejin.cn)

持续更新中~~