native type should be same with web type #1339

yiminghe · 2017-05-18T07:10:57Z

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

The text was updated successfully, but these errors were encountered:

himStone · 2017-05-18T07:50:38Z

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 · 2017-05-19T05:48:59Z

just as @bccsafe said

yiminghe · 2017-05-19T18:10:49Z

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 · 2017-05-20T09:23:23Z

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 · 2017-05-22T02:51:44Z

@bccsafe #1280

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

himStone · 2017-05-22T05:48:28Z

@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 · 2017-05-23T02:17:30Z

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

paranoidjk · 2017-05-23T02:50:39Z

主要问题还是因为 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 · 2017-05-23T03:54:04Z

@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 · 2017-05-23T04:53:39Z

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

import { Button } from 'antd-mobile';

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

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

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

paranoidjk · 2017-05-23T04:56:43Z

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

himStone · 2017-05-23T05:39:58Z

@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 · 2017-05-23T08:40:58Z

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 · 2017-05-23T10:06:38Z

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

himStone · 2017-05-23T11:22:24Z

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

afc163 · 2017-05-23T11:31:06Z

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

himStone · 2017-05-23T11:43:31Z

@afc163 可行的

afc163 · 2017-05-23T11:46:00Z

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

silentcloud · 2017-06-28T03:47:04Z

这个是已经 ok 了么 @bccsafe

himStone · 2017-06-28T05:38:53Z

嗯对的 @silentcloud

yiminghe assigned silentcloud May 18, 2017

yiminghe changed the title ~~web type should be same with native type~~ native type should be same with web type May 18, 2017

himStone mentioned this issue May 24, 2017

fix type entrance( web -> mix) #1376

Merged

4 tasks

himStone closed this as completed Jun 28, 2017

himStone mentioned this issue Jun 29, 2017

[WIP] bugfix: entrance #1502

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

native type should be same with web type #1339

native type should be same with web type #1339

yiminghe commented May 18, 2017

himStone commented May 18, 2017 •

edited

Loading

silentcloud commented May 19, 2017

yiminghe commented May 19, 2017 •

edited

Loading

himStone commented May 20, 2017 •

edited

Loading

silentcloud commented May 22, 2017

himStone commented May 22, 2017

silentcloud commented May 23, 2017

paranoidjk commented May 23, 2017

himStone commented May 23, 2017

himStone commented May 23, 2017

paranoidjk commented May 23, 2017

himStone commented May 23, 2017

himStone commented May 23, 2017

silentcloud commented May 23, 2017 •

edited

Loading

himStone commented May 23, 2017

afc163 commented May 23, 2017

himStone commented May 23, 2017

afc163 commented May 23, 2017

silentcloud commented Jun 28, 2017

himStone commented Jun 28, 2017

native type should be same with web type #1339

native type should be same with web type #1339

Comments

yiminghe commented May 18, 2017

himStone commented May 18, 2017 • edited Loading

silentcloud commented May 19, 2017

yiminghe commented May 19, 2017 • edited Loading

himStone commented May 20, 2017 • edited Loading

silentcloud commented May 22, 2017

himStone commented May 22, 2017

silentcloud commented May 23, 2017

paranoidjk commented May 23, 2017

himStone commented May 23, 2017

himStone commented May 23, 2017

paranoidjk commented May 23, 2017

himStone commented May 23, 2017

himStone commented May 23, 2017

silentcloud commented May 23, 2017 • edited Loading

himStone commented May 23, 2017

afc163 commented May 23, 2017

himStone commented May 23, 2017

afc163 commented May 23, 2017

silentcloud commented Jun 28, 2017

himStone commented Jun 28, 2017

himStone commented May 18, 2017 •

edited

Loading

yiminghe commented May 19, 2017 •

edited

Loading

himStone commented May 20, 2017 •

edited

Loading

silentcloud commented May 23, 2017 •

edited

Loading