如何将React Native滑块API代码转换为TypeScript？

Hey there! Let’s break down how to convert your slider API code (HTML + React Native JS) into TypeScript for React Native for Web. I’ll walk you through each step with clear examples so you can follow along easily, even as someone new to the stack.

If you haven’t already, you’ll need to configure TypeScript for your React Native for Web project:

• Install essential type dependencies:

  npm install --save-dev @types/react @types/react-native typescript
  

• Create a tsconfig.json file in your project root with settings optimized for React Native for Web:

  {
    "compilerOptions": {
      "target": "ESNext",
      "module": "ESNext",
      "lib": ["ESNext", "DOM"],
      "jsx": "react-jsx",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
  }
  

Let’s start with a typical React Native slider component in JavaScript, then convert it to TypeScript.

Example Original JS Code #

import React, { useState } from 'react';
import { Slider, View, Text } from 'react-native';

const App = () => {
  const [value, setValue] = useState(0);
  return (
    <View>
      <Text>Value: {value}</Text>
      <Slider
        value={value}
        onValueChange={setValue}
        minimumValue={0}
        maximumValue={100}
        step={1}
      />
    </View>
  );
};

export default App;

Converted TSX Version #

import React, { useState } from 'react';
import { Slider, View, Text, SliderProps } from 'react-native';

// Optional: Define a custom props type if you want to reuse the slider
type CustomSliderProps = Pick<SliderProps, 'value' | 'onValueChange' | 'minimumValue' | 'maximumValue' | 'step'> & {
  label?: string;
};

// Reusable typed slider component
const CustomSlider = ({ label = 'Slider', ...props }: CustomSliderProps) => {
  return (
    <View style={{ margin: 16 }}>
      <Text>{label}: {props.value}</Text>
      <Slider {...props} />
    </View>
  );
};

const App = () => {
  // Explicitly type the state (optional here, but great for clarity)
  const [sliderValue, setSliderValue] = useState<number>(0);

  // Typed handler for value changes
  const handleValueChange = (newValue: number) => {
    setSliderValue(newValue);
    // Add any extra logic here with full type safety
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CustomSlider
        value={sliderValue}
        onValueChange={handleValueChange}
        minimumValue={0}
        maximumValue={100}
        step={1}
        label="My Typed Slider"
      />
    </View>
  );
};

export default App;

If you have a native HTML <input type="range"> slider to integrate, React Native for Web supports rendering native HTML elements directly. Here’s how to type it:

Converted HTML Slider TSX Component #

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

const HtmlSlider = () => {
  const [value, setValue] = useState<number>(50);

  // Type the change event explicitly as HTMLInputElement
  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(Number(e.target.value));
  };

  return (
    <View style={{ margin: 16 }}>
      <Text>HTML Slider Value: {value}</Text>
      {/* Native HTML element with TypeScript type safety */}
      <input
        type="range"
        min="0"
        max="100"
        step="1"
        value={value}
        onChange={handleSliderChange}
        style={{ width: '80%', marginTop: 8 }}
      />
    </View>
  );
};

export default HtmlSlider;

• Leverage Built-in Types: React Native’s components (like SliderProps) already have official types, so use Pick or Omit to reuse them instead of reinventing the wheel.
• Explicit State Types: While TypeScript can infer state types, explicitly defining them (like useState<number>(0)) makes your code easier to read and maintain.
• Check Web Compatibility: React Native for Web supports most React Native components, but for HTML-specific features, use native elements with proper TypeScript event typing.

内容的提问来源于stack exchange，提问作者ab jatoi