استخدام لغة TypeScript مع React Native

تُعَد لغة TypeScript توسعةً للغة JavaScript من خلال إضافة تعريفات الأنواع مثل Flow. أُنشِأ إطار عمل React Native ضمن Flow، لكنه يدعم كلًا من TypeScript و Flow افتراضيًا.

كيفية البدء باستخدام لغة TypeScript

إذا بدأت مشروعًا جديدًا، فهناك عدة طرق مختلفة للبدء.

يمكنك استخدام قالب TypeScript من خلال:

npx react-native init MyApp --template react-native-template-typescript

ملاحظة: إن فشل الأمر السابق، فقد يكون لديك إصدار قديم من react-native أو react-native-cli مثبت عالميًا على نظامك. يمكن إصلاح المشكلة من خلال إلغاء تثبيت CLI أي: npm uninstall -g react-native-cli أو yarn global remove react-native-cli ثم شغّل الأمر npx مرة أخرى.

يمكنك استخدام Expo الذي يحتوي على قالبَي TypeScript من خلال:

• في npm:

  npm install -g expo-cli
  expo init MyTSProject
  

• في yarn:

  yarn global add expo-cli
  expo init MyTSProject
  

  أو يمكنك استخدام Ignite، الذي يحتوي أيضًا على قالب TypeScript من خلال:

• في npm:

  npm install -g ignite-cli
  ignite new MyTSProject
  

• في yarn:

  yarn global add ignite-cli
  ignite new MyTSProject
  

إضافة TypeScript إلى مشروع قائم

1. أضف TypeScript وأنواع React Native و Jest إلى مشروعك من خلال:

• في npm:

  npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
  

• في yarn:

  yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer
  

  2. أضف ملف إعداد config file خاص بلغة TypeScript، ثم أنشئ ملف tsconfig.json في جذر root مشروعك:

  {
    "compilerOptions": {
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "isolatedModules": true,
      "jsx": "react",
      "lib": ["es6"],
      "moduleResolution": "node",
      "noEmit": true,
      "strict": true,
      "target": "esnext"
    },
    "exclude": [
      "node_modules",
      "babel.config.js",
      "metro.config.js",
      "jest.config.js"
    ]
  }
  

  3. أنشئ ملف jest.config.js لإعداد Jest من أجل استخدام TypeScript:

  module.exports = {
    preset: 'react-native',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
  };
  

  4. أعد تسمية ملف JavaScript ليصبح ‎*.tsx

  ملاحظة: يجب عليك ترك ملف نقطة الدخول ‎./index.js كما هو، وإلّا فقد تواجه مشكلة عندما يتعلق الأمر بتجميع bundling إصدار الإنتاج production build.

  5. شغّل الأمر yarn tsc لكتابة التحقق من أنواع ملفات TypeScript الجديدة.

كيف تعمل TypeScript مع React Native

يعمل تحويل ملفاتك إلى JavaScript باستخدام بنية Babel الأساسية نفسها لمشروع React Native بدون TypeScript. نوصي باستخدام مصرّف TypeScript للتحقق من الأنواع فقط. إذا كان لديك شيفرة TypeScript موجودة ومنقولة إلى React Native، فهناك تحذير أو اثنين لاستخدام Babel بدلًا من TypeScript.

كيف تبدو React Native مع TypeScript

يمكنك توفير واجهة لخاصيات Props وحالة State مكوّن React من خلال React.Component<Props, State>‎ والتي ستوفر تحققًا من النوع ومحرّرًا بإكمالٍ آلي عند العمل مع هذا المكون في JSX.

import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

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

const Hello: React.FC<Props> = ({
  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: number) =>
    numChars > 0 ? Array(numChars + 1).join('!') : '';

  return (
    <View style={styles.container}>
      <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({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  greeting: {
    fontSize: 20,
    fontWeight: 'bold',
    margin: 16
  }
});

export default Hello;

يمكنك استكشاف شكل الصياغة أكثر في TypeScript playground.

نصائح مفيدة

يمكنك الحصول على نصائح مفيدة من خلال ما يلي:

• توثيق TypeScript العربي
• توثيق React للغة TypeScript
• تحتوي صفحة React + TypeScript Cheatsheets على نظرة عامة جيدة حول كيفية استخدام React مع TypeScript.

استخدام تسمية المسار البديلة المخصصة مع TypeScript

يمكنك استخدام تسمية المسار البديلة المخصصة Custom Path Aliases مع TypeScript من خلال ضبط تسمية المسار البديلة للعمل على كل من Babel و TypeScript كما يلي:

1. عدّل الملف tsconfig.json للحصول على روابط المسار المخصصة custom path mappings الخاصة بك. اضبط أي شيء في جذر src ليكون متاحًا بدون مسار مرجعي سابق، واسمح بالوصول إلى أي ملف اختبار باستخدام tests/File.tsx:

    "target": "esnext",
+     "baseUrl": ".",
+     "paths": {
+       "*": ["src/*"],
+       "tests": ["tests/*"],
+       "@components/*": ["src/components/*"],
+     },
    }

2. أضف babel-plugin-module-resolver كحزمة تطوير لمشروعك:

• في npm:

npm install --save-dev babel-plugin-module-resolver

• في yarn:

yarn add --dev babel-plugin-module-resolver

أخيرًا، اضبط babel.config.js (لاحظ أن صياغة babel.config.js الخاص بك تختلف عن صياغة tsconfig.json):

{
  plugins: [
+    [
+       'module-resolver',
+       {
+         root: ['./src'],
+         extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+         alias: {
+           tests: ['./tests/'],
+           "@components": "./src/components",
+         }
+       }
+    ]
  ]
}

مصادر

• صفحة Using TypeScript في توثيق React Native الرسمي.