vue3入门31 - typeScript 声明文件、内置类型、工具类型

星河boy
864 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

声明文件

  • 简单来说，声明文件是用来告诉我的项目，定义了一个全局变量，这个全局变量的ts类型，提示都提供友好的声明。
  • 比如我想使用一个全局变量是这样的
// declaration-files.ts
jQuery("#foo");
  • 此时我们鼠标悬浮上去，会发现ts无法识别

image.png

  • 这是因为我们这个全局变量没有声明，ts也不知道它是什么，此时我们就可以通过声明文件来声明
// jQuery.d.ts
declare var jQuery: (slector: string) => any;
  • 有了这个声明文件，我们鼠标悬浮上去就会获得对应的类型提示

image.png

内置类型

  • typeScript提供了和JavaScript相对应的类型定义，我们可以直接使用，这种类型成为内置类型
  • 比如我们定义一个数组
const a: Array<number> = [1, 2, 3];
const date: Date = new Date();
const reg = /abc/;
  • 大家可以看到这个类型，不同的文件中有多处定义，但是它们都是 内部定义的一部分，然后根据不同的版本或者功能合并在了一起，
  • 一个interface 或者 类多次定义会合并在一起。
  • 这些文件一般都是以 lib 开头，以 d.ts 结尾，告诉大家，我是一个内置对象类型
  • 我们还可以使用一些 build in object，内置对象，
  • 比如 Math 与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。
Math.pow(2, 2);
  • 还有DOM 和 BOM 标准对象
// document 对象，返回的是一个 HTMLElement
let body: HTMLElement = document.body;

// document 上面的query 方法，返回的是一个 nodeList 类型
let allLis = document.querySelectorAll("li");
//当然添加事件也是很重要的一部分，document 上面有 addEventListener 方法，
// 注意这个回调函数，因为类型推断，这里面的 e 事件对象也自动获得了类型，
// 这里是个 mouseEvent 类型，因为点击是一个鼠标事件，现在我们可以方便的使用 e 上面的方法和属性。
document.addEventListener("click", (e) => {
  e.preventDefault();
});

常用工具类型

  • Typescript 还提供了一些功能性，帮助性的类型，这些类型，大家在 js 的世界是看不到的，这些类型叫做 utility types，提供一些简洁明快而且非常方便的功能。
  • 文档地址：www.typescriptlang.org/docs/handbo…
  • 比如：
// partial，它可以把传入的类型都变成可选
interface IPerson {
  name: string;
  age: number;
}

let viking: IPerson = { name: "viking", age: 20 };
type IPartial = Partial<IPerson>;
let viking2: IPartial = {};

// Omit，它返回的类型可以忽略传入类型的某个属性

type IOmit = Omit<IPerson, "name">;
let viking3: IOmit = { age: 20 };
avatar
文章
阅读
粉丝