ts如何为js的cdn提供类型/ts为网址提供类型

正文

@types

@types简单易用，但不是所有包都有@types，比如Lit就没有。

pnpm i -D @types/jquery@3

安装后直接就能获得提示。

别名

pnpm i -D lit@3

好像-D还是会安装到生产依赖，安装后可以直接改package.json文件

创建jsconfig.json文件，内容如下。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js": [
        "node_modules/lit/index.d.ts"
      ]
    }
  },
}

这种方法比较简单。

d.ts声明

在任意地方创建d.ts文件。
比如在项目的根目录下，创建global.d.ts文件，内容类似下面这样。

declare module 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js' {
  export * from 'lit';
}

创建jsconfig.json文件，甚至可以是空的，但是必须要创建。下面这个配置随便写的，默认值就够用了。

由于ts本地服务器的检查存在一些延迟之类的，让我误以为某些方法有用有些方法没有用。

{
  "compilerOptions": {
    "baseUrl": "./"
  }
}

然后正常引入即可

import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

其他

jsconfig坑爹之处

  // 如果仅设置js文件，那么.d.ts的类型定义无法生效
  // 如果仅设置ts文件，那么js的类型检查会被强行打开，哪怕本配置中写了checkJs: false
  "include": [
    "**/*.ts",
    "**/*.js",
  ],

上面俩坑我都踩了。

参考文章

n-wither.github.io/writings/su…
在他的文章中我尝试了三斜杠的写法，确实有用。
但是实际上，当初是我配置错了jsconfig中的include，导致没有提供类型。
默认情况下是不需要这玩意的。

/// <reference path="types/global.d.ts" />
import { LitElement, html, css } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

感觉vscode的ts检查很抽风，本来好好的，突然发现没提示了，然后又折腾。
折腾完发现，原来的配置就是有效的，真是逆天了。