ReactNative接入 TypeScript 的姿势

#ReactNative接入 TS 的姿势

1 方式一

直接使用命令行生成带 ts 模板的项目

$ react-native init MyAwesomeProject --template typescript

2 方式二

使用react-native-typescript-transformer 步骤如下：

• 为项目添加TypeScript
• 为项目添加react-native-typescript-transformer
• 生成 TypeScript 的配置文件
• 生成 React Native TypeScript Transformer 的配置文件
• 为 React 和 React Native 添加类型 参考 DefinitelyTyped 命令如下:

$ yarn add --dev typescript
$ yarn add --dev react-native-typescript-transformer
$ yarn tsc --init --pretty --jsx react
$ touch rn-cli.config.js
$ yarn add --dev @types/react @types/react-native

tsconfig.json 参考,tsconfig.json 包含TypeScript的配置信息

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "lib": ["es2015", "es6", "es7", "es2017"],
    "pretty": true,
    "jsx": "react",
    "watch": true,
    "sourceMap": true,
    "outDir": "./",
    "rootDir": "./",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js" 
  ]
}

rn-cli.config.js 包含 React Native TypeScript Transformer 的配置信息，在里面添加如下内容：

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};

3 尝试ts

新建一个hello.tsx文件， 复制如下代码

// components/Hello.tsx
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

export interface Props {
  name: string;
  enthusiasmLevel?: number;
}

interface State {
  enthusiasmLevel: number;
}

export class Hello extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);

    if ((props.enthusiasmLevel || 0) <= 0) {
      throw new Error('You could be a little more enthusiastic. :D');
    }

    this.state = {
      enthusiasmLevel: props.enthusiasmLevel || 1,
    };
  }

  onIncrement = () =>
    this.setState({enthusiasmLevel: this.state.enthusiasmLevel + 1});
  onDecrement = () =>
    this.setState({enthusiasmLevel: this.state.enthusiasmLevel - 1});
  getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!');

  render() {
    return (
      <View style={styles.root}>
        <Text style={styles.greeting}>
          Hello{' '}
          {this.props.name +
            this.getExclamationMarks(this.state.enthusiasmLevel)}
        </Text>

        <View style={styles.buttons}>
          <View style={styles.button}>
            <Button
              title="-"
              onPress={this.onDecrement}
              accessibilityLabel="decrement"
              color="red"
            />
          </View>

          <View style={styles.button}>
            <Button
              title="+"
              onPress={this.onIncrement}
              accessibilityLabel="increment"
              color="blue"
            />
          </View>
        </View>
      </View>
    );
  }
}

// styles
const styles = StyleSheet.create({
  root: {
    alignItems: 'center',
    alignSelf: 'center',
  },
  buttons: {
    flexDirection: 'row',
    minHeight: 70,
    alignItems: 'stretch',
    alignSelf: 'center',
    borderWidth: 5,
  },
  button: {
    flex: 1,
    paddingVertical: 0,
  },
  greeting: {
    color: '#999',
    fontWeight: 'bold',
  },
});

然后运行以下命令

tsc

然后同级目录下会生成hello.js和hello.js.map两个文件。*.js.map 可以通过sourceMap:false 关闭。

ReactNative 参考