Typescript
Fower 本身就是使用 TypeScript 编写,可以说 Fower 完美支持 TypeScript。
#
React在 React 中,Fower 有三种使用方式:
- @fower/react 组件库
- Babel Preset
- JSX Pragma
#
@fower/react 组件库使用 @fower/react
组件库时,因为它所包含的组件提供完整的类型定义,所以你直接可以在编辑器中获得类型提示,不需任何额外配置。
import React from 'react'import { Box } from '@fower/react'
export default () => { return ( <Box toCenterY p-10 w-260 bgWhite rounded-10> <Box as="img" circle-48 src="/img/jobs.jpg" /> <Box ml-10> <Box textXL fontBold> Steve Jobs </Box> <Box as="span" gray800> Co-founder of Apple Inc. </Box> </Box> </Box> )}
#
Babel Preset很多人喜欢 Babel Preset 这种方式,这种方式要获得 TypeScript 类型提示,除了需配置 babel preset,你还需在项目根目录新增一个类型文件, 比如命名为 index.d.ts
,内容如下:
index.d.ts
import { AtomicProps } from '@fower/atomic-props';
declare module 'react' { interface HTMLAttributes<T> extends AtomicProps {}}
然后,你就可以在组件组件中获得完整的类型提示了。
/src/components/Profile.tsx
import React from 'react'
export default () => { return ( <div toCenterY p-10 w-260 bgWhite rounded-10> <img circle-48 src="/img/jobs.jpg" /> <div ml-10> <h2 textXL fontBold> Steve Jobs </h2> <p gray800>Co-founder of Apple Inc.</p> </div> </div> )}
#
JSX Pragma如果你使用 JSX Pragma 这种方式,您需要在每个组件文件的顶部添加 /** @jsx jsx */
标识,这样就可以获得 TypeScript 类型提示了。
/src/components/Profile.tsx
/** @jsx jsx */import { jsx } from '@fower/react'
export default () => { return ( <div toCenterY p-10 w-260 bgWhite rounded-10> <img circle-48 src="/img/jobs.jpg" /> <div ml-10> <h2 textXL fontBold> Steve Jobs </h2> <p gray800>Co-founder of Apple Inc.</p> </div> </div> )}
#
React-Native在 React native 中使用 Fower,你只需安装 @fower/react-native
组件库, @fower/react-native
是使用 TypeScript 编写的,它所包含的组件提供完整的类型定义。
/src/components/Profile.tsx
import React from 'react'import { View, Text, Image } from '@fower/react-native'
export default () => { return ( <View toCenterY p-10 w-260 bgWhite rounded-10> <Image circle-48 src="/img/jobs.jpg" /> <View ml-10> <View textXL fontBold> Steve Jobs </View> <Text gray800>Co-founder of Apple Inc.</Text> </View> </View> )}
#
Taro在 Taro 中使用 Fower,你只需安装 @fower/taro
组件库,@fower/react-native
是使用 TypeScript 编写的,它所包含的组件提供完整的类型定义。
/src/components/Profile.tsx
import React from 'react'import { View, Text, Image } from '@fower/taro'
export default () => { return ( <View toCenterY p-10 w-260 bgWhite rounded-10> <Image circle-48 src="/img/jobs.jpg" /> <View ml-10> <View textXL fontBold> Steve Jobs </View> <Text gray800>Co-founder of Apple Inc.</Text> </View> </View> )}