Working with TypeScript

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

{
  "compilerOptions": {
    "target": "es2017",
    "lib": [
      "es6"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-native"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

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

interface GreetingProps {
  name: string;
  age?: number;
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => (
  <View>
    <Text>Hello, {name}!</Text>
    {age && <Text>Age: {age}</Text>}
  </View>
);

export default Greeting;

import React from 'react';
import { View } from 'react-native';

interface ContainerProps {
  children: React.ReactNode;
}

const Container: React.FC<ContainerProps> = ({ children }) => (
  <View style={{ padding: 10 }}>
    {children}
  </View>
);

export default Container;

import { NavigationProp, RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';

type HomeScreenParams = {
  userId: string;
  userName: string;
};

type HomeScreenNavigationProp = StackNavigationProp<HomeStackParamList, 'Home'>;
type HomeScreenRouteProp = RouteProp<HomeStackParamList, 'Home'>;

const HomeScreen: React.FC<{
  navigation: HomeScreenNavigationProp;
  route: HomeScreenRouteProp;
}> = ({ navigation, route }) => {
  const { userId, userName } = route.params;
  
  return (
    <View>
      <Text>User ID: {userId}</Text>
      <Text>User Name: {userName}</Text>
    </View>
  );
};

import { ParamListBase } from '@react-navigation/native';

export type HomeStackParamList = {
  Home: {
    userId: string;
    userName: string;
  };
  Profile: {
    userId: string;
  };
};

export type ProfileStackParamList = {
  Profile: {
    userId: string;
    userName: string;
  };
};

interface User {
  id: number;
  name: string;
}

const [user, setUser] = useState<User | null>(null);

const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {},
});

const { theme } = useContext(ThemeContext);

type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' };

const reducer = (state: number, action: Action): number => {
  switch (action.type) {
    case 'INCREMENT': return state + 1;
    case 'DECREMENT': return state - 1;
    default: return state;
  }
};

const [count, dispatch] = useReducer(reducer, 0);

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

interface GenericComponentProps<T> {
  data: T;
  renderItem: (item: T) => React.ReactNode;
}

const GenericComponent = <T>(props: GenericComponentProps<T>) => {
  return (
    <View style={styles.container}>
      {props.data.map((item, index) => (
        <View key={index}>
          {props.renderItem(item)}
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
});

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

const UserList = () => {
  return (
    <GenericComponent<User>
      data={users}
      renderItem={(user) => (
        <Text style={styles.text}>{user.name}</Text>
      )}
    />
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
});

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {},
});

const useTheme = () => useContext(ThemeContext);

export default useTheme;

declare module 'react-native' {
  interface NativeModule {
    isDeviceSecure(): Promise<boolean>;
  }
}

const NativeModule: NativeModule = require('react-native').NativeModules.NativeModule;

export const isDeviceSecure = (): Promise<boolean> => {
  return NativeModule.isDeviceSecure();
};

interface User {<br>  id: number;<br>  name: string;<br>  email: string;<br>  password: string;<br>}<br><br>// Create a form type with only name and email<br>type UserForm = Pick<User, 'name' | 'email'>;

interface User {<br>  name: string;<br>  age: number;<br>}<br><br>// Make all properties optional<br>type PartialUser = Partial<User>;

{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

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

declare module 'react-native' {
  interface MyComponentProps {
    title: string;
    onPress?: () => void;
  }
}