16在 JS 项目中使用 TS(上)

一. *.d.ts 文件的妙用

• d就是declare的意思，声明
• 默认情况下全局可用

// type.d.ts
type User = {
  name: string;
  age: number;
};

// main.ts
type A = User;

• 但如果*.d.ts里有import或者export，则User只在当前模块生效

// 只能全局使用加import 或者 export 
import x from 'vite'
type User = {
  name: string;
  age: number;
};

export {};

• 如何既有import和export又可以全局使用，使用declare声明全局作用域

import x from 'vite';

// 这里是只有当前模块可以用
type Local = string

// 这里是全局可以用
declare global {
  type User = {
    name: string;
    age: number;
  };
}

export {};

二. *.d.ts与js文件配合使用

• 第一种情况，window上的全局属性和方法添加global.d.ts

// 1.js
window.addOne = function (n) {
  return n + 1;
};
// global.d.ts，此时必须添加global.d.ts
var addOne: (a: number) => number;
// main.ts，之后才可以在main.ts中使用js的全局变量
addOne(1);

export {};

• 第二种情况，标准js模块，通过添加同名的.d.ts文件，来添加类型

// fang.js
const fang = { name: 'fang', age: 18 };
const sayHi = (name) => console.log(`Hi, ${name}`);
export default fang;
export { sayHi };

// fang.d.ts，需要注意名字必须要同名
const fang: { name: string; age: Number };
const sayHi: (name: string) => void;
export default fang;
export { sayHi };

// main.ts
import fang from './fang';
console.log(fang.age);

三. 浏览器的类型声明来自哪里

• 全局变量document，全局类型Element是谁定义?

const app = document.getElementById('app');
// 点击document我们可以发现是由vs的扩展提供了类型
type A = HTMLElement;
// HTMLElement也是在lib.dom.d.ts中

• 是由tsconfig进行添加的

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"], 
    // DOM就是浏览器相关的全局变量和全局类型， "ES2020"用来指定Array，Map等js的API，一般用ESNext，也就是最新的js特性都可以用
  }
}