🤔 [QUESTION] 示例代码无法运行

[Zhen Ju]

🐛 Question description [Please make everyone to understand it]

使用npx创建ts项目，然后跑示例代码，提示config类型不兼容

💻 Link to minimal reproduction

Please provide a link by forking these links LarkMap or GitHub repo. What is a minimal reproduction, and why is it required?

安装：

$ npx create-react-app antd-l7-test/ --template typescript
$ cd antd-l7-test
$ yarn add @antv/l7 @antv/larkmap
$ yarn

运行：

$ npm run start

将src/App.tsx修改为示例代码：

import React from 'react';
import { LarkMap } from '@antv/larkmap';

const config = {
  mapType: 'Gaode',
  mapOptions: {
    style: 'light',
    center: [120.210792, 30.246026],
    zoom: 10,
  },
};

export default () => {
  return <LarkMap {...config} style={{ height: '300px' }}></LarkMap>;
};

报错：

ERROR in src/App.tsx:14:11
TS2322: Type '{ style: { height: string; }; mapType: string; mapOptions: { style: string; center: number[]; zoom: number; }; }' is not assignable to type 'Omit<LarkMapProps & RefAttributes<LarkMapRefAttributes>, "ref">'.
  Types of property 'mapType' are incompatible.
    Type 'string' is not assignable to type '"Gaode" | "GaodeV1" | "GaodeV2" | "Mapbox" | "Map" | "Tencent" | "Baidu" | undefined'.
    12 |
    13 | export default () => {
  > 14 |   return <LarkMap {...config} style={{ height: '300px' }}></LarkMap>;
       |           ^^^^^^^
    15 | };
    16 |

软件版本：

    "@antv/l7": "^2.21.1",
    "@antv/larkmap": "^1.4.13",

🏞 Expected result

🚑 Any additional [like screenshots]

• LarkMap Version:
• Platform:

[Zhen Ju]

我是一个TypeScript初学者，查看了一下TypeScript的类型系统，示例代码里把config的类型显示的指定为LarkMapProps，就能正常编译了：

import React from 'react';
import { LarkMap, LarkMapProps } from '@antv/larkmap';

const config: LarkMapProps = {
    mapType: "Gaode",
    mapOptions: {
        style: 'light',
        center: [120.210792, 30.246026],
        zoom: 10,
    },
};

export default () => {
    return <LarkMap {...config} style={{ height: '300px' }}></LarkMap>;
};

页面也可以正常显示，不过编译过程会有很多找不到模块的告警和报错：

WARNING in ./node_modules/@antv/scale/esm/utils/utc-interval.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/lance/Development/web/antd-l7-test/node_modules/@antv/scale/esm/utils/src/utils/utc-interval.ts' file: Error: ENOENT: no such file or directory, open '/home/lance/Development/web/antd-l7-test/node_modules/@antv/scale/esm/utils/src/utils/utc-interval.ts'

Update
source-map解析是create-react-app的配置问题，一般通过.env文件或者环境变量配置GENERATE_SOURCEMAP为false，或者将react-script的版本限定为4.x即可。

相关资料：
facebook/create-react-app#11752
https://create-react-app.dev/docs/advanced-configuration/