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 الرسمي.