本文目录
- TypeScript 的两种声明文件写法的区别和根本意义
- vue3+typescript实战记录一
- 在TypeScript中，d.ts声明文件中的 export=’是什么意思
- typescript 多文件命名空间怎么用
- 【笔记】使用Vite搭建Vue3(TypeScript版本)项目
- ts类型无法引入
- Vue中使用TypeScript
- vue项目定义的global.d.ts中的类型识别不到
TypeScript 的两种声明文件写法的区别和根本意义
我们知道 NPM 包可以有内建的 TS 声明文件，从而免去使用 typings 工具安装 TS 声明文件的操作。那既然可以有内建的声明文件，为何还需要额外安装呢？因为不是 所有人都在使用 TypeScript，很多 NPM 模块都是纯 JavaScript 编写的，其作者 没有太大的可能性为之编写模块声明文件。而且内建的声明文件有一定约束。 TypeScript 的 DefinitelyTyped 声明文件有两种写法，一种叫做 全局类型声明(Global Type Definition)，另一个则是叫做 模块导出声明(External Module Definition)
vue3+typescript实战记录一
本文记录一些vue3+ts+less开发过程中的一些小问题。 不断开发、不断更新... 新建 Hello.vue 文件， App.vue 文件引入 Hello.vue ，报错如下： 没有发现模块 components/Hello 或者它对应的类型申明***隐藏网址*** 要让 TypeScript 正确推断 Vue 组件选项中的类型，需要使用 defineComponent 全局方法定义组件。 参考文档 引用第三方库时，如果第三方类库并没有 ts 的 .d.ts 类型的声明文件，则无法在项目中正常使用。如果要顺利使用这些库， 就需要我们添加声明文件。 通过此 地址 可以查找当前安装的库有没有 .d.ts 的声明文件。 项目中引入 echarts 在 ts 声明查找地址发现 echarts 已经包含 .d.ts 类型的声明文件，则不需要我们手动去声明 echarts 模块看了基础类型模块，想当然以为定义对象类型为下面示例： 报错如下： 提示不能使用 object 作为类型。推荐考虑使用Record《string, unknown》代替。参考文档 参考文档 通过 as HTMLElement 进行类型转换 在 setup 中定义的变量和方法，都必须通过return {}暴露出去，外界才能使用，ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组） 在 setup 里获取 ref 绑定的 dom ，需要在 setup 的 return 有 ref(null) 的属性，模板上 ref 用对应属性名 通过 this.$refs 去获取 缺点：在 any 类型的变量上，访问任何属性都是允许的。它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。 在 src 根目录 *.d.ts 文件中进行类型申明
在TypeScript中，d.ts声明文件中的 export=’是什么意思
Typescript (以下简称：ts) 有一个好处是，你可以将 ts 代码生成CommonJs规范、AMD规范，而这二者的规范中，且无法兼容，所以就有了 export =，将二者给统一，以至于让ts支持以上规范。declare module "swiper" {const swiper: {new (element: Element | string, options?: SwiperOptions): Swiper;};export = swiper;}如果在CommonJS规范中：const Swiper = require(’swiper’);或者AMD规范中：require(, function(Swiper) {});当然，如果你的 @types 不需要支持上面两种规范，那就不需要 export =，因为对于 ts 而言，你只需要这样：import { Swiper } from ’swiper’
typescript 多文件命名空间怎么用
// c.ts
import { a, b } from ’./a’;
import { c, d } from ’./b’;
namespace abc {
const a1 = a;
const b1 = b;
const c1 = c;
const d1 = d;
}
在c.ts中，我们首先从a.ts和b.ts文件中导入了a，b，c和d变量。然后，我们在abc命名空间中声明了新的变量a1，b1，c1和d1，并将它们分别设置为从a.ts和b.ts文件中导入的变量。这样，我们就可以在abc命名空间中使用这些变量。
【笔记】使用Vite搭建Vue3(TypeScript版本)项目
使用Vite搭建Vue的TypeScript版本的时候，可以使用 Vite自带的模板预设 —— vue-ts 。 执行命令行 ： 执行命令行(安装最新版本)： router.ts 执行命令行(安装最新版本)： Vuex 没有为 this.$store 属性提供开箱即用的类型声明。如果你要使用 TypeScript，首先需要声明自定义的 模块补充(module augmentation) 。 为此，需要在项目文件夹中添加一个声明文件来声明 Vue 的自定义类型 ComponentCustomProperties 。 vuex.d.ts 当使用组合式 API 编写 Vue 组件时，您可能希望 useStore 返回类型化的 store。为了 useStore 能正确返回类型化的 store，必须执行以下步骤： store.ts main.ts 在 main.ts 已经声明配置过Vuex和Vue-Router之后，在 《script setup lang="ts"》 或者 《script lang="ts"》 中按需导入 store 和 router 即可使用其属性和方法。 router.ts
ts类型无法引入
第三方类库缺失文件。在使用Typescript的过程中， 第三方类库并没有ts的.d.ts类型的声明文件，所以在项目中会出现报错，ts类型无法引入，都是因为第三方类库缺失文件。ts的原始类型有boolean、number、string、void、undefined、null、symbol、bigint。
Vue中使用TypeScript
Tip: 这篇文章是我用到了typescript后写的，因为刚接触没多久，写得不好多多海涵，栗子用了另外一位作者的，在此表示感谢，vue3.x开始会慢慢向typescript靠拢，所以学习ts是非常有必要的， 阅读本文需要具备一定的TypeScript基础和vue基础。
当我们在 vue 单文件中使用 TypeScript 时,引入 vue-property-decorator 之后, script 中的标签就变为这样:
等同于：
把我们需要用到的属性给导入进来，在这里我导入了Component；这是 vue-property-decorator 组件提供的属性，至于有哪些属性下面我会说到。
相信很多小伙伴也注意到我使用了和以往不同的写法，使用了es6的类的写法，至于为何可以使用这种写法就是因为这个组件是完全依赖于 vue-class-component ；这是尤大神写的支持vue的组件， 具体可看 。建议先看看~
Tip:(很重要的一点)：在类中声明的变量其实和data中声明的是一样的，都是有双向绑定的；也就是例子中的ValA和ValB有了类型指定同时能双向绑定
这个组件完全依赖于 vue-class-component .它具备以下几个属性:
因为我个人也刚学ts没多久，写得不好，还请多多海涵。后续会继续更新。
vue项目定义的global.d.ts中的类型识别不到
如果在代码中无法识别到其中定义的类型，可能是因为没有正确引入global.d.ts文件、TypeScript版本过低或过高、global.d.ts文件中的类型声明存在错误的原因。1、没有正确引入global.d.ts文件。确保在项目中正确引入了global.d.ts文件，并且在tsconfig.json中配置了"include"：，以确保TypeScript能够正确识别到声明的类型。2、TypeScript版本过低或过高。请确保使用的TypeScript版本与项目中使用的Vue版本兼容。可以在项目中执行npmlisttypescript命令查看当前使用的TypeScript版本，然后在官方文档中查找对应的Vue和TypeScript版本兼容性。3、global.d.ts文件中的类型声明存在错误。请检查global.d.ts文件中的类型声明是否存在语法错误或逻辑错误，这可能会导致TypeScript无法正确解析文件中的类型。可以使用tsc命令对global.d.ts文件进行编译，并查看编译输出的错误信息，以确定问题所在。
