文章目录
- 一、项目地址
- 二、踩坑环境
- 三、问题记录
-
- 3.1、graphhopper中地图问题
-
- 3.1.1. getOpacity不存在的问题
- 3.1.2. dispatchEvent不存在的问题
- 3.1.3. vectorLayer.set('background-maplibre-layer', true)不存在set方法
- 3.1.4. maplibre-gl.js.map不存在的问题
- 3.1.5. Uncaught ReferenceError: GIT_SHA is not defined
- 3.2、npm/node/webpack问题
-
- 3.2.1. npm install产生的问题
- 3.2.2. graphhopper-maps-navi项目使用了openlayer地图引擎,找不到**ol**的问题
- 3.2.3. npm安装文件夹权限问题
- 3.2.4. Cannot find name 'expect','it'
- 3.2.5. Cannot use override keyword to override methods of Object without explicitly extending Object #45704
- 3.2.6. npm安装sharp出现的问题
- 3.3、Typescript相关问题
-
- 3.3.1. 语法问题:
- 3.3.2. @types/ol 与ol的关系
- 3.3.3. 找不到jest的类型定义文件
- 3.3.4. TypeScript 的配置文件 tsconfig.json
项目截图如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SCx04FyK-1721837005527)(https://i-blog.csdnimg.cn/direct/b35b5385ab4e4250a84357af5556bfca.png#pic_center)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UjWINUa4-1721837005531)(https://i-blog.csdnimg.cn/direct/1921ce219c2a4a83aa3dc22c63a013cc.png#pic_center)]
一、项目地址
本文记录的问题是graphhopper路径规划web版源码graphhopper-maps中的导航分支
试验性的graphhopper导航分支 github地址
此项目是一个Web应用,使用的React框架,主要使用Typescript语言,项目使用了ESLint,建议在install前,修改package文件去掉此项依赖。
graphhopper用到了MapLibre地图,是个国外的地图,第一次见到,其API文档是MapLibre GL JS
二、踩坑环境
- Node Version v20.12.1
- NPM Version 10.5.0
三、问题记录
主要的问题无外乎就是npm install产生的依赖问题;Typescript语法问题;环境配置问题主要涉及tsconfig.json
3.1、graphhopper中地图问题
3.1.1. getOpacity不存在的问题
- 问题:TS2551: Property 'getOpacity' does not exist on type 'MapLibreLayer'. Did you mean 'setOpacity'?
- 解决:自定义getOpacity函数
typescript
getOpacity(): number {
// 获取图层的不透明度,假设 OpenLayers 中获取不透明度的方法是 getOpacity()
const opacity: number = super.getOpacity();
// 将不透明度转换为字符串类型返回
return opacity;
}
3.1.2. dispatchEvent不存在的问题
- 问题:TS2339: Property 'dispatchEvent' does not exist on type 'MapLibreLayer'.
- 解决:在render函数中传入了一个event对象,代码如下
typescript
//在render函数中传入了一个event对象
render(frameState: FrameState,e:any): HTMLElement {
...
// const layer = this.getLayer()
e.target.dispatchEvent(new RenderEvent(POSTRENDER, undefined, frameState, undefined))
...
}
3.1.3. vectorLayer.set('background-maplibre-layer', true)不存在set方法
- 解决:自定义set方法
在源代工程自定的MapLibreLayer类中添加相关方法
typescript
export default class MapLibreLayer extends Layer {
maplibreMap: maplibregl.Map
//自定义set方法
/*************************************************/
private properties: { [key: string]: any } = {};
set(key: string, value: any) {
this.properties[key] = value;
}
/************************************************/
constructor(style: string) {
super({})
const container = document.createElement('div')
container.style.position = 'absolute'
container.style.width = '100%'
container.style.height = '100%'
this.maplibreMap = new maplibregl.Map(
Object.assign(
{},
{ style: style },
{
container: container,
attributionControl: false,
interactive: false,
trackResize: false,
}
)
)
this.applyOpacity_()
}
private applyOpacity_() {
...
}
render(frameState: FrameState,e:any): HTMLElement {
...
}
}
3.1.4. maplibre-gl.js.map不存在的问题
- 问题:错误通常表示你的项目尝试加载一个 JavaScript 文件的 Source Map(源映射文件),但是找不到该文件。
typescript
Failed to parse source map from 'D:\Code\grphhopper\graphhopper-maps-navi\node_modules\maplibre-gl\dist\maplibre-gl.js.map' file: Error: ENOENT: no such file or directory, open 'D:\Code\grphhopper\graphhopper-maps-navi\node_modules\maplibre-gl\dist\maplibre-gl.js.map'
- 解决:确保你的项目的 maplibre-gl.js.map 文件确实存在于指定的路径 node_modules\maplibre-gl\dist\;有时候可能是因为缓存的问题导致 Source Map 文件找不到,尝试清除浏览器缓存或者重新构建项目可以解决问题。
- 我还进行了一项错做,打开
node_modules\maplibre-gl\dist\maplibre-gl.js
文件,将最后一行注释打开,不过貌似没啥用,也不是很懂,把当时的操作记录一下。
3.1.5. Uncaught ReferenceError: GIT_SHA is not defined
- 解决:直接注释掉语句就行,没有影响。
3.2、npm/node/webpack问题
3.2.1. npm install产生的问题
- 问题:在拿到项目源码后,建议删除package-lock.json后,再进行安装操作,因为项目比较旧,很多依赖库都过失显示Deprecated ,例如:
- npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it.
- npm : npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
- WARN 3 deprecated subdependencies found: glob@7.2.3, inflight@1.0.6, rimraf@3.0.2
- 解决:删除了lock文件和node-modules重新进行了安装。
3.2.2. graphhopper-maps-navi项目使用了openlayer地图引擎,找不到ol的问题
- 问题:
cpp
"Could not find a declaration file for module 'ol'. 'd:/Code/grphhopper/graphhopper-maps-navi/node_modules/ol/index.js' implicitly has an 'any' type.\n Try `npm i --save-dev @types/ol` if it exists or add a new declaration (.d.ts) file containing `declare module 'ol';`",
//或者
[tsl] ERROR TS2688: Cannot find type definition file for 'ol'. The file is in the program because: Entry point of type library 'ol' specified in compilerOptions
- 解决:不需要设置
"typeRoots":["node_modules/@types"]``;需要设置
"types": [
"ol", "jest"],`
参考文章1:编译typescript出现 Cannot find type definition file for 'babel__core',区别就是我把typRoots配置注释掉了。
参考文章2:tsconfig.json 报错 Cannot find type definition file for 'lodash'. 解决方案
3.2.3. npm安装文件夹权限问题
- 问题:npm ERR code ERR_SSL_DECRYPTION_FAILED_OR_BAD_RECORD_MAC
- 解决:参考文章
3.2.4. Cannot find name 'expect','it'
- 解决:
bash
{
"compilerOptions": {
// ...
"types": ["jest"],
// ...
}
}
还要报错的源代码加入import { describe, expect,it, test } from '@jest/globals'
参考了Cannot find name 'expect' #1068
3.2.5. Cannot use override keyword to override methods of Object without explicitly extending Object #45704
- 解决:可能是ESlint的原因,由于没有重名的函数,所以直接将override删除就行了 。如果指导java和c++的继承,类的重载对override关键字应该不陌生。
3.2.6. npm安装sharp出现的问题
- 问题:
cpp
npm ERR!commandfailedC: \wINowslsystem32\cmd.exe /d /s /c (node install/libvips & node install/d1l-copy && prebuild-install)ll (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR!l sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.13.3/libvips-8.13.3-win32-x64.tar.br
npm ERR!sharp: Please see https://sharp.pixelplumbing.com/installfor required dependencies
npm ERR!sharp:Installation error: unable to verify the first certificate
- 解决办法 :使用镜像地址 或者 科学上网
cpp
npm config set sharp_binary_host "https://npmmirror.com/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npmmirror.com/mirrors/sharp-libvips"
在终端命令行可能会报错error sharp_binary_host is not a valid npm option
可以尝试使用
cpp
Windows系统
set SHARP_BINARY_HOST=https://npmmirror.com/mirrors/sharp
set SHARP_LIBVIPS_BINARY_HOST=https://your-custom-host.com
Unix系统
export SHARP_BINARY_HOST=https://npmmirror.com/mirrors/sharp
export SHARP_LIBVIPS_BINARY_HOST=https://your-custom-host.com
3.3、Typescript相关问题
3.3.1. 语法问题:
- TS2322: Type 'number' is not assignable to type 'null'.
- Argument of type 'any' is not assignable to parameter of type 'never'.在 TypeScript 中,你试图将一个 number 类型的值赋给一个类型为 null 的变量或属性。
- 正确变量声明:
let nullableValue: number | null;
- 正确变量声明:
- "Variable 'thenInstructionSign' is used before being assigned.",存在一个变量 thenInstructionSign 被使用了,但是在使用之前没有被赋值。
- Argument of type 'T' is not assignable to parameter of type 'never'
- TS2345: Argument of type 'number[]' is not assignable to parameter of type 'never'. 错误 TS2345 通常表示类型不匹配的问题,具体来说是尝试将一个类型为 number[] 的值赋给一个类型为 never 的参数
- TS2345: Argument of type 'Element' is not assignable to parameter of type 'never'.
3.3.2. @types/ol 与ol的关系
解释:@types/ol 是 TypeScript 社区维护的一个类型声明库,用于为使用 TypeScript 编写的项目提供 OpenLayers(通常简写为 ol)库的类型定义。在 TypeScript 中,如果一个 JavaScript 库没有提供类型声明文件(.d.ts),那么 TypeScript 就无法理解该库的类型信息,这会导致类型检查的错误或警告,也会影响开发工具如 VS Code 的代码提示和补全功能。
因此,为了解决这个问题,社区会创建 @types 类型声明库,包含了对应 JavaScript 库的类型信息。
对于 OpenLayers 来说,你可以通过安装 @types/ol 来获取与 ol 库配套的 TypeScript 类型定义。
一旦安装了 @types/ol,TypeScript 就能够理解 ol 库的类型,从而提供更好的类型检查和开发工具的支持。
3.3.3. 找不到jest的类型定义文件
- 问题:
typescript
Cannot find type definition file for 'jest'.\n The file is in the program because:\n Entry point of type library 'jest' specified in compilerOptions
- 解决:
①安装 @types/jest 包作为开发依赖项npm install --save-dev @types/jest
②tsconfig.json 中的配置
"compilerOptions": { "types": ["jest"] }
3.3.4. TypeScript 的配置文件 tsconfig.json
typescript
{
"compilerOptions": {
//指定 TypeScript 编译后输出的目录。所有编译后的 JavaScript 文件将会被放置在 dist 目录下。
"outDir": "./dist/",
//是否生成对应的 .map 文件,用于在调试时将编译后的 JavaScript 代码映射回原始 TypeScript 代码,方便调试。
"sourceMap": true,
//如果设置为 true,则 TypeScript 会在可能的情况下强制要求显式声明变量的类型,避免使用隐式的 any 类型。
"noImplicitAny": false,
//允许编译器编译 JavaScript 文件。这对于使用 TypeScript 逐步迁移现有 JavaScript 项目很有用。
"allowJs": true,
//指定 JSX 的解析方式,这里是 React 的 JSX 语法。
"jsx": "react-jsx",
//允许从没有默认导出的模块中默认导入。这是为了与 CommonJS 和 AMD 模块兼容。
"allowSyntheticDefaultImports": true,
//设置解析非相对模块名称时的基本目录。在这里,. 表示使用当前的工作目录作为基本路径。
"baseUrl": ".",
//将辅助工具函数导入到每个模块中,以帮助实现某些特定功能(如 __extends、__assign 等)。
"importHelpers": true,
//指定要生成的模块规范。这里设置为 ES2015,即使用 ES6 标准的模块化语法。
"module": "ES2015",
//指定模块解析策略。node 表示使用 Node.js 的模块解析策略。
"moduleResolution": "node",
//如果函数没有显式的返回类型,则报告错误。有助于确保函数中所有代码路径都有返回值。
"noImplicitReturns": true,
//启用所有严格类型检查选项。相当于设置了 "strict": true,包括 noImplicitAny, noImplicitReturns, strictNullChecks, strictFunctionTypes 等。
"strict": true,
//指定编译后的 JavaScript 目标版本。在这里是 ES2019。
"target": "ES2019",
//指定类型声明文件的搜索路径。这里设置为在 node_modules/@types 目录中寻找类型声明文件。
"typeRoots":["../node_modules/@types"],
//指定要包含的类型声明文件。这里列出了 ol,表示 TypeScript 应该包括 @types/ol 中定义的类型。
"types":["ol"],
//设置路径映射,允许使用 @/ 前缀来引用 src/ 目录下的文件。
"paths": {
"@/*": [
"src/*"
],
},
//指定编译时所包含的库文件。这里包括 ES2019 标准库、DOM 标准库以及支持可迭代对象的 DOM 标准库。
"lib": [
"ES2019",
"dom",
"dom.iterable"
],
//启用 esModuleInterop,使得默认导入和命名空间导入与 CommonJS 导入兼容。
"esModuleInterop": true,
//允许 TypeScript 解析 JSON 模块。
"resolveJsonModule": true,
//如果设置为 true,则跳过编译时对声明文件(.d.ts)的检查。
"skipLibCheck": true,
},
//指定要包含在编译中的文件或目录。这里包括 ./src/**/* 和 ./test/**/*,表示编译器会编译 src 和 test 目录下的所有 TypeScript 文件。
"include": [
"./src/**/*",
"./test/**/*"
],
}