Zmiana z TypeScript na JavaScript

Mam prośbę, czy ktoś może zmienic mi ten kod TS na JS ? Z góry dziękuje

import React, { useMemo } from 'react';
import { View, Text, StyleSheet, FlatList, Dimensions, Pressable} from "react-native";
import {
  View,
  FlatList,
  Dimensions,
  StyleSheet,
  Text,
  Pressable,
} from 'react-native';

const { width } = Dimensions.get('window');
const ITEM_WIDTH = width * 0.12;
const ITEM_HEIGHT = 70;
const ITEM_OFFSET = ITEM_WIDTH + 18;
interface Props {
  selectedDate: Date;
  setSelectedDate: (date: Date) => void;
}

function dateSubtractDays(date: Date, days: number) {
  var result = new Date(date);
  result.setDate(result.getDate() - days);
  return result;
}

function getDayString(date: Date): string {
  return date.toString().split(' ')[0];
}

function isSameDay(date1: Date, date2: Date): boolean {
  return date1.getDate() === date2.getDate();
}

function isToday(date: Date): boolean {
  return new Date().getDate() == date.getDate();
}

function generateHorizontalCalendarDates(days: number): Date[] {
  const today = new Date();
  let result = [];
  for (let i = 0; i < days; i++) {
    result[i] = dateSubtractDays(today, i);
  }

  return result.reverse();
}

export default function HorizontalCalendar({
  selectedDate,
  setSelectedDate,
}: Props) {
  const dates: Date[] = useMemo(() => {
    return generateHorizontalCalendarDates(14);
  }, []);

  const onDatePress = (date: Date) => {
    setSelectedDate(date);
  };

  const renderItem = ({ item, index }: { item: Date; index: number }) => {
    const dayNumber = item.getDate();
    const dayString = getDayString(item);
    const isActive = isSameDay(selectedDate, item);
    return (
      <Pressable
        onPress={() => onDatePress(item)}
        style={[styles.item, isActive && { backgroundColor: 'white' }]}>
        <Text style={[styles.dateOutput, isActive && styles.activeText]}>
          {dayNumber}
        </Text>
        <Text style={[styles.dayStyle, isActive && styles.activeText]}>
          {isToday(item) ? 'today' : dayString}
        </Text>
      </Pressable>
    );
  };

  return (
    <FlatList
      data={dates}
      renderItem={renderItem}
      keyExtractor={(item) => item.toDateString()}
      horizontal={true}
      contentContainerStyle={[
        { paddingBottom: 16, paddingLeft: 4, paddingRight: 16 },
      ]}
      showsHorizontalScrollIndicator={false}
      initialScrollIndex={dates.length - 8}
      getItemLayout={(_, index) => ({
        length: ITEM_WIDTH,
        offset: ITEM_OFFSET * index,
        index,
      })}
    />
  );
}

const styles = StyleSheet.create({
  dateOutput: {
    color: '#BDF0CC',
    fontSize: 18,
    fontWeight: '900',
  },
  dayStyle: {
    color: '#BDF0CC',
    textTransform: 'lowercase',
  },
  activeText: {
    color: '#033F40',
  },
  item: {
    width: ITEM_WIDTH,
    height: ITEM_HEIGHT,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
});

"Transpile TS to JS" w Google Pan próbował?

jeśli jednorazowo, to możesz wkleić tutaj:
https://www.typescriptlang.org/play

jeśli jednak miałbyś potrzebę robić tak częściej, to wtedy instalujesz po prostu Typescript w swoim projekcie JSowym
https://www.typescriptlang.org/download

import React, { useMemo } from 'react';
import { Text, StyleSheet, FlatList, Dimensions, Pressable } from "react-native";
const { width } = Dimensions.get('window');
const ITEM_WIDTH = width * 0.12;
const ITEM_HEIGHT = 70;
const ITEM_OFFSET = ITEM_WIDTH + 18;
function dateSubtractDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() - days);
    return result;
}
function getDayString(date) {
    return date.toString().split(' ')[0];
}
function isSameDay(date1, date2) {
    return date1.getDate() === date2.getDate();
}
function isToday(date) {
    return new Date().getDate() === date.getDate();
}
function generateHorizontalCalendarDates(days) {
    const today = new Date();
    let result = [];
    for (let i = 0; i < days; i++) {
        result[i] = dateSubtractDays(today, i);
    }
    return result.reverse();
}
export default function HorizontalCalendar({ selectedDate, setSelectedDate, }) {
    const dates = useMemo(() => {
        return generateHorizontalCalendarDates(14);
    }, []);
    const onDatePress = (date) => {
        setSelectedDate(date);
    };
    const renderItem = ({ item, index }) => {
        const dayNumber = item.getDate();
        const dayString = getDayString(item);
        const isActive = isSameDay(selectedDate, item);
        return (React.createElement(Pressable, { onPress: () => onDatePress(item), style: [styles.item, isActive && { backgroundColor: 'white' }] },
            React.createElement(Text, { style: [styles.dateOutput, isActive && styles.activeText] }, dayNumber),
            React.createElement(Text, { style: [styles.dayStyle, isActive && styles.activeText] }, isToday(item) ? 'today' : dayString)));
    };
    return (React.createElement(FlatList, { data: dates, renderItem: renderItem, keyExtractor: (item) => item.toDateString(), horizontal: true, contentContainerStyle: [
            { paddingBottom: 16, paddingLeft: 4, paddingRight: 16 },
        ], showsHorizontalScrollIndicator: false, initialScrollIndex: dates.length - 8, getItemLayout: (_, index) => ({
            length: ITEM_WIDTH,
            offset: ITEM_OFFSET * index,
            index,
        }) }));
}
const styles = StyleSheet.create({
    dateOutput: {
        color: '#BDF0CC',
        fontSize: 18,
        fontWeight: '900',
    },
    dayStyle: {
        color: '#BDF0CC',
        textTransform: 'lowercase',
    },
    activeText: {
        color: '#033F40',
    },
    item: {
        width: ITEM_WIDTH,
        height: ITEM_HEIGHT,
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 8,
    },
});

@Dev007

A czy jesteście mi to w stanie zmienić tak abym mogł z tego skorzystać? Ledwie zaczełem uczę sie js/reacta i teraz jeszcze ts więc cieżko mi to doporwadzić do wesji której będe mógł użyc

Jeśli nie chcesz skorzystać z kompilatora to gdybyś wkleił cały ten kod do pliku z rozszerzeniem .js to IDE powinno podpowiedzieć, które elementy są "nadmiarowe / błędne" w JavaScripcie.

Trzymaj prawidłową wersje z JSX, powinno zadziałać.

import React, { useMemo } from 'react';
import { Text, StyleSheet, FlatList, Dimensions, Pressable } from "react-native";

const { width } = Dimensions.get('window');
const ITEM_WIDTH = width * 0.12;
const ITEM_HEIGHT = 70;
const ITEM_OFFSET = ITEM_WIDTH + 18;

function dateSubtractDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() - days);
  return result;
}

function getDayString(date) {
  return date.toString().split(' ')[0];
}

function isSameDay(date1, date2) {
  return date1.getDate() === date2.getDate();
}

function isToday(date) {
  return new Date().getDate() == date.getDate();
}

function generateHorizontalCalendarDates(days) {
  const today = new Date();
  let result = [];
  for (let i = 0; i < days; i++) {
    result[i] = dateSubtractDays(today, i);
  }

  return result.reverse();
}

export default function HorizontalCalendar({
  selectedDate,
  setSelectedDate,
}) {
  const dates = useMemo(() => {
    return generateHorizontalCalendarDates(14);
  }, []);

  const onDatePress = (date) => {
    setSelectedDate(date);
  };

  const renderItem = ({ item, index }) => {
    const dayNumber = item.getDate();
    const dayString = getDayString(item);
    const isActive = isSameDay(selectedDate, item);
    
    return (
      <Pressable
        onPress={() => onDatePress(item)}
        style={[styles.item, isActive && { backgroundColor: 'white' }]}>
        <Text style={[styles.dateOutput, isActive && styles.activeText]}>
          {dayNumber}
        </Text>
        <Text style={[styles.dayStyle, isActive && styles.activeText]}>
          {isToday(item) ? 'today' : dayString}
        </Text>
      </Pressable>
    );
  };

  return (
    <FlatList
      data={dates}
      renderItem={renderItem}
      keyExtractor={(item) => item.toDateString()}
      horizontal={true}
      contentContainerStyle={[
        { paddingBottom: 16, paddingLeft: 4, paddingRight: 16 },
      ]}
      showsHorizontalScrollIndicator={false}
      initialScrollIndex={dates.length - 8}
      getItemLayout={(_, index) => ({
        length: ITEM_WIDTH,
        offset: ITEM_OFFSET * index,
        index,
      })}
    />
  );
}

const styles = StyleSheet.create({
  dateOutput: {
    color: '#BDF0CC',
    fontSize: 18,
    fontWeight: '900',
  },
  dayStyle: {
    color: '#BDF0CC',
    textTransform: 'lowercase',
  },
  activeText: {
    color: '#033F40',
  },
  item: {
    width: ITEM_WIDTH,
    height: ITEM_HEIGHT,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
});