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>  )}