refactor: next in TypeScript #206
Conversation
| @@ -3,7 +3,7 @@ import { registerFormField, createArrayField } from '@uform/react' | |||
| import { Icon } from 'antd' | |||
| import styled, { css } from 'styled-components' | |||
|
|
|||
| export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })` | |||
| export const CircleButton = styled['div'].attrs({ className: 'cricle-btn' })` | |||
There was a problem hiding this comment.
很 hack 地改成bracket notation，不然 npm run start 会报错。我也不知道为啥。大家有其他解法么？
There was a problem hiding this comment.
试下加上 @types/styled-components 类型声明依赖？
There was a problem hiding this comment.
😂 加过了，又是一大丢报错，涉及到改动量略大，而且后面考虑干掉 styled-components，虽然是很强大的 css-in-JS 方案，但是用在底层组件感觉大材小用了。问题是在 npm run build 没问题，但是 npm run start 就有问题。不知道是不是 ts-loader 做了什么处理。
There was a problem hiding this comment.
styled-components短期内不会直接干掉，直接干掉的话，会有break change.最好先保证0.x的体验是没问题的，所以0.x还是得依赖@types/styled-components
There was a problem hiding this comment.
Break Change 是指哪一块
There was a problem hiding this comment.
试下加上
@types/styled-components类型声明依赖？
这个我也尝试过，感觉报错有点神奇。。。。我自己用emotion倒没这个问题。
There was a problem hiding this comment.
个人觉得，样式覆盖跟类名变动这个应该还好吧？渐进式迁移，并不需要一下子弄完它；引入样式的方式可以参考下 antd, 开发者自己可以完整地载入打包好的 css 文件，也可以按需加载对应的 css/less/scss/styl 文件吧？
这些变动感觉肯定会影响现有项目的，项目配置可能都需要改的
There was a problem hiding this comment.
引入 @types/styled-component 还会导致 npm run build 失败。DefinitelyTyped/DefinitelyTyped#33311 和
DefinitelyTyped/DefinitelyTyped#34882 两个 ISSUE 现在还 Open。我觉得咱们引入这个 @types/styled-component 成本太大了。而且最近规划 styled-component 是会被替代的，所以我觉得还是保留现在的写法吧。
大家意见如何？ @janryWang @anyuxuan @atzcl @stkevintan
There was a problem hiding this comment.
目前的问题是包了styled-components的组件智能提示都失效了，有没有办法我们自己给它写类型定义，先保证智能提示不失效就行
packages/next/src/fields/table.tsx
Outdated
| @@ -90,7 +109,7 @@ const Table = styled( | |||
| getColumns(children) { | |||
| const columns = [] | |||
| React.Children.forEach(children, child => { | |||
| if (React.isValidElement(child)) { | |||
| if (React.isValidElement(child as React.ReactElement)) { | |||
There was a problem hiding this comment.
不做这个 as React.ReactElement 的话下面的 displayName 会报错。
There was a problem hiding this comment.
这里改成
...
const columns = [] as IColumnProps[]
React.Children.forEach<React.ReactElement<IColumnProps, typeof Column>>(...)
...
会不会好点？
| @@ -171,6 +177,7 @@ registerFormField( | |||
| } | |||
| if (listType.indexOf('dragger') > -1) { | |||
| return ( | |||
| // @ts-ignore 感觉是 next 那边对于 Dragger 的 props 定义错了 | |||
There was a problem hiding this comment.
加 ts-ignore 是因为好像那边 next 对于 Dragger 的 props 定义错了。导致给它 value 或者其他 props 它都会报错。我后面去 next 提 Issue，看看是不是他们的问题。
There was a problem hiding this comment.
packages/antd/src/type.tsx
Outdated
| className?: string | ||
|
|
||
| // TODO | ||
| fixedWidth?: string | number | ||
| style?: object |
There was a problem hiding this comment.
这里的 style 类型应该是 React.CSSProperties ?
| component?: any | ||
| children?: React.ReactNode | ||
| xxs?: ColSpanType | ColSize |
There was a problem hiding this comment.
这里有大量的相同类型，感觉是不是可以定义一个类型来拓展呢？
比如：
type unionGridExpand<K extends keyof any> = {
[P in K]?: ColSpanType | ColSize
}
export interface IColProps extends ColProps, unionGridExpand<'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl'> {
....
}
不过这样可读性会比较差😅😅
There was a problem hiding this comment.
😂 我看 antd 也是现在这样子写，所以我就按照它的来了。不过我可以看下你这种方式。
There was a problem hiding this comment.
好建议，不过想了想还是保留声明式方式，可读性高点。
packages/types/src/form.ts
Outdated
| SMALL = 'small' | ||
| } | ||
|
|
||
| export interface IFormConsumerProps { |
There was a problem hiding this comment.
可以把下方的 IFormProps、IFormItemProps 中的 className 、style 等等都拥有的属性提到 IFormConsumerProps 来？另外 style 也应该是 React.CSSProperties 吧？
packages/antd/src/type.tsx
Outdated
| fixedWidth?: string | number | ||
| style?: object | ||
| component?: any |
There was a problem hiding this comment.
看了源码，这里的跟下面 IFormProps 的 component 是不是可以定义为 keyof JSX.IntrinsicElements | React.ComponentType<any> ？
There was a problem hiding this comment.
JSX.IntrinsicElements 里面 input等一些标签好像不能有 children 吧？不过比 component?: any 好。
There was a problem hiding this comment.
那可能直接定一些常用并且允许拥有 children 的 html 元素会好点，实在不行可以传入一个泛型来联合声明，然后让调用方拓展 😅😅
主要涉及到 next 包的 TypeScript 重构，并且把一些 ant 包通用的 interface 抽出来。