如何在React Typescript项目中接入Tradingview lightweight-charts

核心前提 #

lightweight-charts 官方已内置完整Typescript类型声明，不存在单独的@types/lightweight-charts第三方类型包，你找不到对应类型包属于正常情况。 #

依赖未写入package.json问题修复 #

按照对应包管理器执行正确安装命令即可：

• npm 安装命令：
  npm install lightweight-charts --save
  旧版本npm默认不会将依赖写入package.json，--save参数会强制写入dependencies字段
• yarn 安装命令：
  yarn add lightweight-charts
  yarn默认自动写入依赖，若仍未生效请确认执行命令时的终端路径为项目根目录，且当前账号对项目目录有写入权限

类型识别异常修复 #

安装完成后直接导入即可使用，TS会自动识别内置类型：

import { createChart, IChartApi } from 'lightweight-charts';

如果仍提示类型缺失，在项目tsconfig.json的compilerOptions中添加配置即可：

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "node_modules/lightweight-charts/dist"
    ]
  }
}

内容的提问来源于stack exchange，提问作者tomi lui