Korzystanie z TypeScript

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

TypeScript to język rozszerzający JavaScript o definicje typów. Nowe projekty React Native domyślnie wykorzystują TypeScript, ale obsługują również JavaScript i Flow.

Rozpoczęcie pracy z TypeScript

Nowe projekty tworzone przez CLI React Native lub popularne szablony takie jak Ignite domyślnie używają TypeScript.

TypeScript można również używać z Expo, które udostępnia szablony TypeScript lub automatycznie zaproponuje instalację i konfigurację TypeScript po dodaniu pliku .ts lub .tsx do projektu.

shell

npx create-expo-app --template

Dodawanie TypeScript do istniejącego projektu

1. Dodaj TypeScript, typy i wtyczki ESLint do swojego projektu.

npm

shell

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

Yarn

shell

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

uwaga

To polecenie dodaje najnowsze wersje wszystkich zależności. Wersje mogą wymagać dostosowania do istniejących pakietów w projekcie. Narzędzie takie jak React Native Upgrade Helper pokazuje wersje dostarczane z React Native.

2. Dodaj plik konfiguracyjny TypeScript. Utwórz tsconfig.json w głównym katalogu projektu:

json

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

3. Zmień rozszerzenie pliku JavaScript na *.tsx

Należy pozostawić plik wejściowy ./index.js bez zmian, w przeciwnym razie mogą wystąpić problemy podczas tworzenia produkcyjnej paczki aplikacji.

4. Uruchom tsc aby sprawdzić typy w nowych plikach TypeScript.

npm

shell

npx tsc

Yarn

shell

yarn tsc

Korzystanie z JavaScript zamiast TypeScript

React Native domyślnie używa TypeScript w nowych aplikacjach, ale JavaScript nadal jest obsługiwany. Pliki z rozszerzeniem .jsx traktowane są jako JavaScript (nie TypeScript) i nie są sprawdzane typowo. Moduły JavaScript mogą być importowane przez moduły TypeScript i odwrotnie.

Jak działa TypeScript z React Native

Domyślnie źródła TypeScript są transformowane przez Babel podczas bundlowania. Zalecamy używanie kompilatora TypeScript wyłącznie do sprawdzania typów. To domyślne zachowanie tsc w nowych aplikacjach. Przy migracji istniejącego kodu TypeScript do React Native istnieją pewne ograniczenia związane z użyciem Babel zamiast TypeScript.

Przykładowy kod React Native z TypeScript

Możesz zdefiniować interfejs dla Propsów i Stanu komponentu React poprzez React.Component<Props, State>, co zapewni sprawdzanie typów i podpowiedzi w edytorze podczas pracy z komponentem w JSX.

components/Hello.tsx

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;

Składnię możesz poznać w TypeScript playground.

Przydatne źródła wiedzy

• Podręcznik TypeScript

• Dokumentacja React dot. TypeScript

• Ściągawka React + TypeScript zawiera dobre omówienie używania React z TypeScript

Używanie niestandardowych aliasów ścieżek z TypeScript

Aby używać niestandardowych aliasów ścieżek w TypeScript, należy skonfigurować je zarówno w Babelu, jak i TypeScript. Oto jak to zrobić:

1. Edytuj tsconfig.json dodając niestandardowe mapowania ścieżek. Ustaw dostęp do plików w katalogu src bez prefiksu ścieżki oraz umożliwij dostęp do plików testowych przez tests/File.tsx:

diff

{
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["src/*"],
+      "tests": ["tests/*"],
+      "@components/*": ["src/components/*"],
+    },
+  }
}

2. Dodaj babel-plugin-module-resolver jako zależność deweloperską:

npm

shell

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

Yarn

shell

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

3. Na koniec skonfiguruj babel.config.js (zauważ, że składnia babel.config.js różni się od tsconfig.json):

diff

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