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