Building My First React Site Using Vite

Type annotations in TypeScript allow developers to explicitly define the data types for variables, function arguments, and return values. This proactive approach helps catch potential errors early in the development process, promoting the use of correct data types and improving overall code stability. Unlike JavaScript, which is more flexible with data types, TypeScript enforces stricter rules, bringing more predictability and helping to prevent unexpected bugs.

In the context of React Native, type annotations play a critical role in managing components and their props. By ensuring props are correctly typed, they help reduce runtime errors. Type annotations also simplify state management and API interactions by enforcing data structures and identifying mismatches early on. Overall, they contribute to a smoother development experience, especially with TypeScript's helpful autocompletion and type inference features.

• Component Definition: The React.FC annotation in const App: React.FC identifies App as a React functional component, ensuring type safety for any props it might receive.
• State Management: Using <string> in useState<string>('home') ensures that activeSection is always treated as a string, catching type errors early and improving code robustness.
• Function Parameters: Annotating parameters like (section: string) in handleSectionChange ensures that only strings are passed to this function, preventing potential bugs from incorrect argument types.

const App: React.FC = () => {
  // State to keep track of which section is active
  const [activeSection, setActiveSection] = useState<string>('home');
  // Handler to update the active section based on navigation clicks
  const handleSectionChange = (section: string) => {
    setActiveSection(section);
  };
  return (
    <div className="d-flex flex-column min-vh-100">
      <Header onSectionChange={handleSectionChange} />
      <main className="flex-grow-1 pt-5 mt-5 container">
        <div className="row justify-content-center">
          <div className="col-md-10">
            {activeSection === 'home' && <Hero />}
            {activeSection === 'about' && <About />}
            {activeSection === 'projects' && <Projects />}
            {activeSection === 'contact' && <Contact />}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}

Functions with typed parameters and return types are essential in TypeScript for making sure that your code is robust and less prone to errors. This is particularly useful in a React Native app, where type safety can help you avoid many common bugs.

Typed Parameters

This allows you to specify what type of arguments a function expects. If a function receives an argument of a different type, TypeScript will throw an error.

Return Types

This enables you to define what type of value a function will return. This ensures that your function always returns the expected type of value.

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

// Define a type for the function parameters
type GreetingProps = {
  name: string;
  age: number;
};

// Define the function with typed parameters and return type
const Greet: React.FC<GreetingProps> = ({ name, age }: GreetingProps): JSX.Element => {
  return (
    <View>
      <Text>Hello, my name is {name} and I am {age} years old.</Text>
    </View>
  );
};

// Usage of the function in a React component
const App: React.FC = () => {
  return (
    <View>
      <Greet name="Alice" age={30} />
    </View>
  );
};

export default App;

By using typed parameters and return types, you ensure that your components receive the expected types, reducing the chance of bugs and making your code easier to maintain. Plus, TypeScript provides auto-completion and type-checking features, which makes development more efficient.

In TypeScript, function parameters can be optional or have default values. Optional and default parameters in TypeScript provide a way to make functions and components more flexible and robust:

Optional Parameters

These allow you to call functions without providing all arguments, ensuring smoother function execution even with missing inputs.

Default Parameters

They provide a fallback value if no argument is supplied, preventing undefined values and potential errors.

Type Safety

Both optional and default parameters enhance code readability and reliability by explicitly defining the expected types and values, reducing bugs and improving maintainability.

In Hero.tsx, the concept of optional and default parameters is applied to enhance flexibility and robustness. The component accepts an optional profileData parameter, allowing it to function seamlessly even when this data isn't provided.

import React from 'react';
import defaultProfile from '../data/profile.json';

interface Profile {
  name: string;
  introduction: string;
  ctaLink: string;
  ctaText: string;
}

const renderHero = (profileData?: Profile) => {
  const profile = profileData || defaultProfile;

  if (!profile || Object.keys(profile).length === 0) {
    return (
      <section id="hero" className="bg-secondary text-white text-center py-5">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-md-8">
              <h1 className="display-4">Error</h1>
              <p className="lead">Profile data is missing or unavailable.</p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="hero" className="bg-secondary text-white text-center py-5">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-md-8">
            <h1 className="display-4">{profile.name}</h1>
            <p className="lead">{profile.introduction}</p>
            <a href={profile.ctaLink} className="btn btn-primary btn-lg mt-4">
              {profile.ctaText}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

const Hero: React.FC<{ profileData?: Profile }> = ({ profileData }) => {
  return renderHero(profileData);
};

export default Hero;

TypeScript interfaces are powerful tools that define the structure of an object, detailing the expected properties and their types. They enforce type-checking, ensuring that any object adhering to the interface meets these criteria, thus reducing runtime errors. In the Articles.tsx file, the Article interface outlines the structure for an article object, specifying that each article should have a title, link, and pubDate, all of which are strings.

This interface is then used in the state management, ensuring that the articles state array contains objects that conform to this structure. By defining the shape of the article data upfront, the code becomes more predictable and easier to maintain, providing clear expectations for the data being handled.

interface Article {
  title: string;
  link: string;
  pubDate: string;
}

Type aliases allow you to define custom types, which can make your code more readable and reusable. A Type Alias in TypeScript provides a new name for any type, like a shorthand or simplification. This could be a primitive type, a union of types, an object type, or any other structure.

The keyword type is used to create these aliases, essentially giving a new name to an existing type or a complex structure. This is especially useful for making your code cleaner and more understandable, particularly when dealing with intricate type definitions.

type Article = {
  title: string;
  link: string;
  pubDate: string;
};

TypeScript's Union and Intersection types add flexibility and power to type definitions, particularly useful in complex React applications.

Union Types

They allow a variable to be one of several types. For example, if you have a component that can accept a string or number as a prop, you'd use a union type.

Intersection Types

They combine multiple types into one. This means an object of this type must satisfy all the combined types.

import React from 'react';

type Admin = {
  adminRights: string[];
};

type User = {
  name: string;
  email: string;
};

type SuperUser = Admin & User;

const UserProfile: React.FC<{ user: User | SuperUser }> = ({ user }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      {'adminRights' in user && (
        <ul>
          {user.adminRights.map((right) => (
            <li key={right}>{right}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default UserProfile;

Generics in TypeScript provide a way to create reusable components that work with a variety of types instead of a single one. They allow you to write flexible and type-safe code by enabling you to define components, functions, or hooks that can operate with different data types while preserving type information.

Example in a Web Application: Let's say you have a list component that can render lists of different types, such as users, products, or orders. By using generics, you can create a single List component that works for any type of data.

• The List component is a generic component that takes a type parameter T.
• The ListProps interface uses this type parameter to define the shape of the props.
• The items prop is an array of T, and the renderItem prop is a function that takes an item of type T and returns a React node.

import React from 'react';

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

const users = [{ name: 'Alice' }, { name: 'Bob' }];
const products = [{ name: 'Laptop' }, { name: 'Phone' }];

const App: React.FC = () => {
  return (
    <div>
      <h2>Users:</h2>
      <List items={users} renderItem={(user) => <span>{user.name}</span>} />
      <h2>Products:</h2>
      <List items={products} renderItem={(product) => <span>{product.name}</span>} />
    </div>
  );
};

export default App;

TypeScript type assertions are a way to tell the compiler that you know more about the type of a value than it does. It's essentially a way to override the compiler's inferred type and specify a more specific type, which can be useful in certain scenarios.

Imagine you have an input field where users can enter their age, and you want to ensure that the value is treated as a number. Since the input value is always a string by default, you can use a type assertion to convert it to a number.

import React, { useState } from 'react';

const AgeInput: React.FC = () => {
  const [age, setAge] = useState<number | null>(null);

  const handleAgeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputAge = e.target.value as unknown as number;
    setAge(inputAge);
  };

  return (
    <div>
      <label htmlFor="age">Enter your age:</label>
      <input type="text" id="age" onChange={handleAgeChange} />
      {age !== null && <p>Your age is: {age}</p>}
    </div>
  );
};

export default AgeInput;

Enums, or enumerations, in TypeScript are a way to define a set of named constants. They can be a great tool to make your code more readable and expressive, especially when dealing with sets of related values.

Example in a Web Application: Suppose you are building a task management app where each task can have a specific status.

• An enum TaskStatus is created to define the possible statuses a task can have: ToDo, InProgress, and Done.
• The Task interface includes a status property that uses the TaskStatus enum, ensuring that only valid statuses can be assigned.
• The TaskComponent uses the enum to manage and display the task's status, providing buttons to change the status.

import React, { useState } from 'react';

enum TaskStatus {
  ToDo = 'ToDo',
  InProgress = 'InProgress',
  Done = 'Done'
}

interface Task {
  id: number;
  title: string;
  status: TaskStatus;
}

const TaskComponent: React.FC<{ task: Task }> = ({ task }) => {
  const [status, setStatus] = useState<TaskStatus>(task.status);

  const handleStatusChange = (newStatus: TaskStatus) => {
    setStatus(newStatus);
  };

  return (
    <div>
      <h3>{task.title}</h3>
      <p>Status: {status}</p>
      <button onClick={() => handleStatusChange(TaskStatus.ToDo)}>To Do</button>
      <button onClick={() => handleStatusChange(TaskStatus.InProgress)}>In Progress</button>
      <button onClick={() => handleStatusChange(TaskStatus.Done)}>Done</button>
    </div>
  );
};

const App: React.FC = () => {
  const task: Task = {
    id: 1,
    title: 'Learn TypeScript enums',
    status: TaskStatus.ToDo
  };

  return <TaskComponent task={task} />;
};

export default App;

React Native, like React, allows components to receive data and event handlers through props. Using TypeScript with React Native adds the benefit of strong typing to these props, enhancing code quality and reducing bugs.

GreetingProps Interface

This defines the structure of the props expected by the Greeting component. It specifies that the component expects a name (mandatory string) and an optional age (number).

Greeting Component

This functional component takes GreetingProps as its props type. It destructures name and age from the props and conditionally renders content based on whether the age prop is provided.

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

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

TypeScript classes are a way to create reusable blueprints for objects, encapsulating both data and behavior. They bring an object-oriented approach to TypeScript, much like classes in C#.

Classes also allow you to define a constructor, a special method used for creating and initializing objects of the class. TypeScript classes can include methods that define behaviors related to the class's data and support inheritance for code reuse and creating specialized classes.

class Article {
  title: string;
  link: string;
  pubDate: string;

  constructor(title: string, link: string, pubDate: string) {
    this.title = title;
    this.link = link;
    this.pubDate = pubDate;
  }

  // Method to get a formatted article summary
  getSummary(): string {
    return `${this.title} was published on ${this.pubDate}. Read more at ${this.link}`;
  }
}

// Example usage
const article = new Article('New TypeScript Release', 'https://typescriptlang.org', '2024-10-12');
console.log(article.getSummary());