ReactNativeでType Scriptを使用するためのベース

ReactNativeからType Scriptをインストールする

正式な書類はよく書けている.ReactNative公式ドキュメント-タイプスクリプトの使用
ReactNativeプロジェクトを作成する場合、インストールは以下のようにするだけだそうですが、いつも失敗するので、個別にインストールすることにしました.
npx react-native init MyApp --template react-native-template-typescript

公式ドキュメントの例-一般js

まず、正式なドキュメントの例をjs形式に変換し、tsxに変換する方法を見てみましょう.
HelloJS.jsという名前のファイルが作成されました.

//HelloJS.js
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

const HelloJS = ({
  name,
  baseEnthusiasmLevel = 0
}) => {
  const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
    baseEnthusiasmLevel
  );

  const onIncrement = () =>
    setEnthusiasmLevel(enthusiasmLevel + 1);
  const onDecrement = () =>
    setEnthusiasmLevel(
      enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
    );

  const getExclamationMarks = (numChars) =>
    numChars > 0 ? Array(numChars + 1).join('!') : '';

  return (
    <View>
      <Text style={styles.greeting}>
        Hello {name}
        {getExclamationMarks(enthusiasmLevel)}
      </Text>
      <View>
        <Button
          title="Increase enthusiasm"
          accessibilityLabel="increment"
          onPress={onIncrement}
          color="blue"
        />
        <Button
          title="Decrease enthusiasm"
          accessibilityLabel="decrement"
          onPress={onDecrement}
          color="red"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  greeting: {
    fontSize: 20,
    fontWeight: 'bold',
    margin: 16
  }
});

export default HelloJS;

メインアプリケーション.tsxを作成します(App.jsに設定する必要はありません):

//App.tsx
import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';
import Hello from './Hello';
import MyForm from './MyForm';
import HelloJS from './HelloJS'


const App = () => {

  return (
    <View style={styles.container}>
      <HelloJS name={"BigMouse"} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

export default App;

実行時、画面は次のようになります.増加または減少.

Typescriptファイルに変換

HelloTSX.HelloJSであるtsxを作成します.jsをコピーすると、Vscodeに赤い線が見えます.


公式サイトに示すように、HelloTSX props typeを定義して使用すればよい.そして、getExclarationMarkでパラメータタイプを正確に指定すればよい.
まずpropsで使用するタイプを定義します.以下に示します.

export type Props = {
  name: string;
  baseEnthusiasmLevel?: number;
};

見たら赤い糸が見えなくなった
HelloTSX.tsxフルコードは、以下に示すように、アプリケーションです.tsxから読み込めばいいです.

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

export type Props = {
    name: string;
    baseEnthusiasmLevel?: number;
  };

const HelloTSX = ({
  name,
  baseEnthusiasmLevel = 0
}: Props) => {
  const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
    baseEnthusiasmLevel
  );

  const onIncrement = () =>
    setEnthusiasmLevel(enthusiasmLevel + 1);
  const onDecrement = () =>
    setEnthusiasmLevel(
      enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0
    );

  const getExclamationMarks = (numChars: number) =>
    numChars > 0 ? Array(numChars + 1).join('!') : '';

  return (
    <View>
      <Text style={styles.greeting}>
        Hello {name}
        {getExclamationMarks(enthusiasmLevel)}
      </Text>
      <View>
        <Button
          title="Increase enthusiasm"
          accessibilityLabel="increment"
          onPress={onIncrement}
          color="blue"
        />
        <Button
          title="Decrease enthusiasm"
          accessibilityLabel="decrement"
          onPress={onDecrement}
          color="red"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  greeting: {
    fontSize: 20,
    fontWeight: 'bold',
    margin: 16
  }
});

export default HelloTSX;