尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 298
已运行时间: 991
目录
  1. TS7053: 元素隐式具有 "any" 类型,因为类型为 "string" 的表达式不能用于索引类型 "{ doc_image: string; docx: string[]; }"。ts(7053)
  2. TS2531: Type ‘HTMLElement | null‘ is not assignable to type ‘HTMLElement‘
  3. TS2345: Typescript 'string | 类型的参数 null' 不能分配给“字符串”类型的参数.类型 'null' 不能分配给类型 'string'
  4. TS2307: 【找不到模块】或【ts 导入 js 文件】
  5. TS2339: Property 'replaceAll' does not exist on type 'string'
  6. TS2589: Type instantiation is excessively deep and possibly infinite.

尼采般地抒情

尼采般地抒情

公告栏

此网站主题为本人手写主题, 主题待开源···

站点信息

文章总数目: 298
已运行时间: 991

TS7053: 元素隐式具有 "any" 类型,因为类型为 "string" 的表达式不能用于索引类型 "{ doc_image: string; docx: string[]; }"。ts(7053)

const MINE_TYPES = {

doc_image: ['image/png', 'image/gif', 'image/jpeg', 'image/jpg', 'image/bmp'].join(','),
// 暂仅支持 docx 和 xlsx
docx: [
// 'application/pdf',
// 'application/msword',
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
]
};

  • 原因:ts 对于传入的 apiType,编译器只知道为字符串而不是具体的 doc_image 或者 docx,所以需要自行使用断言来指定一下

https://blog.csdn.net/xlgod/article/details/123182392

 const accept = MINE_TYPES[apiType as keyof typeof MINE_TYPES] || '\*';

TS2531: Type ‘HTMLElement | null‘ is not assignable to type ‘HTMLElement‘

  • 比如查找 DOM 这块,很有可能是找不到该 DOM 元素的,如下:

很确定 dom 层一渲染 dom 树,使用断言

// 点击按钮,返回顶部
const handleBackToTop = () => {
let page_content: HTMLElement = document.getElementById('file-page-content') as HTMLElement;
if (page_content !== null) {
page_content.scrollTop = 0;
}
};

TS2345: Typescript 'string | 类型的参数 null' 不能分配给“字符串”类型的参数.类型 'null' 不能分配给类型 'string'

const authorInfo = localStorage.getItem('LOGIN_USER')
? JSON.parse(localStorage.getItem('LOGIN_USER') as string)
: null;

TS2307: 【找不到模块】或【ts 导入 js 文件】

可以归为一类问题,都是导入非 ts 模块 而报错,而 ts 的编译是需要有声明类型的

这类报错一般有如下两种情况:

  1. import 导入依赖包,但是提示找不到该包
  2. ts 文件中导入 js 文件

原因:

  1. 依赖包并没有做 ts 化,或者说暴露出来的接口,inport 不支持
  2. ts 不能导入 js,除非做一些相关配置(但是尽量不要在 ts 项目存在 js 项目)

解决:

亿联的国际化网站下载下来的是 js 文件,但是 vite 项目不能使用 require 来导入外部文件

vite 无法使用 require 的替代方案 - 古墩古墩 - 博客园,api 已废弃

无伤解决方法:类似公司自己包一样,单独声明在使用(在 ts 中怎么引入 js 文件 - 冰中焱 - 博客园),多次使用到了 xxx.d.ts 的用法:如何编写一个 d.ts 文件

en.d.ts 中添加

···
declare module '@/i18n/lang/zh.js';
declare module '@/i18n/lang/en.js';
···

然后再 ts 文件中直接导入使用即可

import zh from '@/i18n/lang/zh.js';
import en from '@/i18n/lang/en.js';
···

还有另外一种方法,直接在 tsconfig 中配置可以使用 js 的配置项,但是需要单独添加 ts 编译后的 js 目录,改动较大,不采用

TS2339: Property 'replaceAll' does not exist on type 'string'

{
...,
"compilerOptions": {
...,
"lib": [
...,
"ES2021.String"
]
}
}

TS2589: Type instantiation is excessively deep and possibly infinite.

  • FIXME: 如果使用 js 文件导入,那么在 ts 文件中使用就会报 ts 2589 错误。
src/utils/fetch.ts:63:55 - error TS2589: Type instantiation is excessively deep and possibly infinite.

63 message[response.config.warnType as NoticeType](<i18n.global.t(msg)>);

使用如下方式导入 js 导出来的 js json 数据

import { createI18n } from 'vue-i18n'; //引入 vue-i18n 组件
import config from './config.json';
// import zh from '@/i18n/lang/zh';
// import en from '@/i18n/lang/en';
import zh from '@/i18n/lang/zh.js';
import en from '@/i18n/lang/en.js';
import { ref } from 'vue';

// 默认配置语言
let zh_obj = {};
zh_obj = zh;
let en_obj = {};
en_obj = en;
export const lang = ref('zh_obj');

export const languages = config;

// 实例化 I18n
const i18n = createI18n({
locale: lang.value,
fallbackLocale: lang.value,
messages: {
zh_obj,
en_obj
}
});

export default i18n;

评论区

Twikoo giscus