Ant-design-mobile: native type should be same with web type

[yiminghe]

https://github.com/ant-design/ant-design-mobile/blob/master/components/button/PropsType.tsx#L12

ts:

import Button from 'antd-mobile/es/button'

<Button inline />

error:

Property 'inline' does not exist on type 

[himStone]

but inline is not used on native

if do this

• the type is not strict
• in the latest typescript(V2.3.2) I tested, restProps will cause many warnings, and need to do much work like below

<Component {...omit(restProps, ['inline'])} />

[silentcloud]

just as @bccsafe said

[yiminghe]

this code runs on web

import Button from 'antd-mobile/es/button'

<Button inline />

but will find button/index.tsd which is for react-native, causing error type for web.

In conclusion, web and react-native types should be same, although may need some docs like:

https://github.com/react-component/m-picker/blob/master/src/PickerTypes.tsx#L13

@silentcloud 可以自己试下

[himStone]

import { Button } from 'antd-mobile';

I only tested like this...

what's the means about es/button

try

import Button from 'antd-mobile/es/button/index.web'

webpack can set the order of module resolution, but ts maybe cannot

[silentcloud]

@bccsafe https://github.com/ant-design/ant-design-mobile/pull/1280

this issue is in conflict with your PR, can you resolve this if you have any time ? thanks

[himStone]

@silentcloud

As a result, native type should be same with web type?

if it is, I will resolve it

List #1280
Button #1327

But I am still confused with it. The problem is the ts module resolution order, not the type.

Could you give me a explanation about it.

import { Button } from 'antd-mobile'; // OK
import Button from 'antd-mobile/es/button/index'; // ERROR

[silentcloud]

import { Button } from 'antd-mobile'; is the right way which we recommend to use. @bccsafe

[paranoidjk]

主要问题还是因为 typescript 读取类型文件的时候不识别
webpack resolve.extension extensions: ['', '.web.js', '.js', '.json'], 配置吧

https://unpkg.com/[email protected]/es/button/

PropsType.d.ts
PropsType.js
index.d.ts
index.js
index.web.d.ts
index.web.js
style

import Button from 'antd-mobile/es/button/index

由于 webpack resolve 的配置，源码会优先读取 index.web.js,
而 typescript 类型文件读的还是 index.d.ts

[himStone]

@silentcloud

import { Button } from 'antd-mobile';

这段代码我测试过，在1.1.4-beta.1下是没有问题的，type的确是web的，既然是推荐的方式，是不是没有问题呢？

现在有问题的是

import Button from 'antd-mobile/es/button'

如果用这个不推荐的方式去使用，就应该自己加上/index.web

---

@paranoidjk 正解 👍 ，我简单的说过这个问题的根源，可能没表达清楚

But I am still confused with it. The problem is the ts module resolution order, not the type.

[himStone]

我发现的确有问题，不过是在native下

import { Button } from 'antd-mobile';

这里Button的type用了web的...

有什么好办法解决吗，没有的话我先revert我的代码

或者2.0里可以解决这个问题吗？type还是分开的好

[paranoidjk]

@bccsafe 研究一下为什么第一种没问题？被转换过后是 var _button = require('antd/lib/button'); https://github.com/ant-design/babel-plugin-import#example

[himStone]

@paranoidjk ts这个和babel-plugin-import没有关系

可以用tsc --traceResolution来查看ts查找模块的顺序

antd-mobile的type

======== Resolving module 'antd-mobile' from '/Users/BccSafe/Downloads/test0523/src/components/TsExample.tsx'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module 'antd-mobile' from 'node_modules' folder, target file type 'TypeScript'.
Directory '/Users/BccSafe/Downloads/test0523/src/components/node_modules' does not exist, skipping all lookups in it.
Directory '/Users/BccSafe/Downloads/test0523/src/node_modules' does not exist, skipping all lookups in it.
File '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile.ts' does not exist.
File '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile.tsx' does not exist.
File '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile.d.ts' does not exist.
Found 'package.json' at '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/package.json'.
'package.json' has 'typings' field 'lib/index.web.d.ts' that references '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/index.web.d.ts'.
File '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/index.web.d.ts' exist - use it as a name resolution result.
Resolving real path for '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/index.web.d.ts', result '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/index.web.d.ts'.
======== Module name 'antd-mobile' was successfully resolved to '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/index.web.d.ts'. ========

Button的type

======== Resolving module './button/index.web' from '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/index.web.d.ts'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module as file / folder, candidate module location '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/button/index.web', target file type 'TypeScript'.
File '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/button/index.web.ts' does not exist.
File '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/button/index.web.tsx' does not exist.
File '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/button/index.web.d.ts' exist - use it as a name resolution result.
======== Module name './button/index.web' was successfully resolved to '/Users/BccSafe/Downloads/test0523/node_modules/antd-mobile/lib/button/index.web.d.ts'. ========

可以看到antd-mobile的类型定义是在lib/index.web.d.ts下的，所有组件的type全部用了web的，Button也不例外

export { default as Button } from './button/index.web';

所以import { Button } from 'antd-mobile'，ts是直接拿到了web的type

这也是导致了rn去找类型定义时，拿到了web的type而不是native的

---

所以如果要把type分开，首先就要解决type入口的问题，现在是写死在package.json里的

"typings": "lib/index.web.d.ts"

[himStone]

https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

目前来说package.json里只能填一个入口，要分开的话可能要想别的办法了

styled-components是这么做的

import styled from 'styled-components'; // run in web
import styled from 'styled-components/native'; // run in native

是否可以考虑这样的方案呢

可能会影响到按需加载的那套方案，包括最后的publish，我不太了解，需要你们评估下

[silentcloud]

把 native 和 web 的 ts 定义放到各自的组件里去，能不能解决这个问题了？

[himStone]

@silentcloud 目前Button和List就是这么做的，但是antd-mobile的入口全部用了web的...

[afc163]

RN 直接 import Button from 'antd-mobile/lib/button' 可行不？

[himStone]

@afc163 可行的

[afc163]

还是 babel-plugin-import 造成的副作用。

[silentcloud]

这个是已经 ok 了么 @bccsafe

[himStone]

嗯对的 @silentcloud