ReactNative/typescript

استخدام لغة TypeScript

تُعَد لغة 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 Handbook
• توثيق React للغة TypeScript
• تحتوي صفحة React + TypeScript Cheatsheets على نظرة عامة جيدة حول كيفية استخدام React مع TypeScript.

استخدام تسمية المسار البديلة المخصَّصة Custom Path Aliases مع TypeScript

يمكنك استخدام تسمية المسار البديلة المخصصة مع 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 الرسمي.