Building My First React Site Using Vite and GitHub

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.

Type annotations in my App.tsx file enhance code quality and developer experience by ensuring type safety and improving readability. Integrating these annotations fosters a more reliable and maintainable codebase. Here are three key points:

• 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;

GreetingProps

We define a type for the function parameters. It expects two properties: name (a string) and age (a number).

Greet

This is a React functional component that uses the GreetingProps type for its parameters. The function returns a JSX element (the type is JSX.Element).

App

This is the main component that uses the Greet component, passing the required props (name and age).

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. If profileData is not available, the function defaults to a predefined defaultProfile, ensuring the component always has data to render. This approach reduces the risk of errors due to missing information and maintains the smooth operation of the component under various circumstances. Ultimately, it exemplifies how TypeScript's optional and default parameters can create more adaptable and resilient code.

import React from 'react';
import defaultProfile from '../data/profile.json'; // Adjust the path according to where you place profile.json

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

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

// Check if profile is null or empty
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. It's a way to make complex types more readable and easier to manage.

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. They don't add any new functionality or behavior to the type itself—they just give it a more convenient or meaningful name.

On the other hand, the type keyword in TypeScript is also used to define these Type Aliases. So when we talk about 'type' in TypeScript, it often refers to the process of creating these aliases, encapsulating the concept of type definitions that enhance code clarity and maintenance. Here is a type alias example in TypeScript that defines an article.

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. This is handy for functions and components that can handle multiple types of inputs.

Intersection Types

They combine multiple types into one. This means an object of this type must satisfy all the combined types. Useful when you need an object to have multiple sets of properties.

Example in a Web Application: Imagine you have a UserProfile component that displays different user information based on user roles.

Union Type:

The user prop can be either User or SuperUser. This allows the UserProfile component to accept different user types, providing flexibility.

Intersection Type:

SuperUser combines the properties of both Admin and User, meaning a SuperUser must have all properties of both types. This is useful for users who have combined roles.

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. In the context of React, generics are often used in components and hooks to ensure they can handle a wide range of data types without losing the benefits of TypeScript's type-checking.

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.

Using generics this way ensures that the List component can handle any type of data, making it highly reusable and type-safe. This flexibility is a powerful feature of TypeScript, allowing you to write more generic and adaptable components while retaining strong type-checking benefits.

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. For instance, let's say you retrieve a value from an API response that is of type unknown or any, and you know it’s actually a string. You can use type assertions to inform TypeScript of this fact and proceed with string-specific operations. There are two syntaxes for type assertions: the as syntax and the angle-bracket <Type> syntax.

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. Enums help avoid magic strings or numbers in your code, making it easier to manage and understand. In the context of a React application, enums are often used to represent a fixed set of possible values for a prop, state, or parameter. This ensures that only valid values are used, reducing the risk of bugs.

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, each using values from the TaskStatus enum.

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. Props in React Native: Props are used to pass data from one component to another, creating dynamic and reusable components. They ensure that components can be customized and controlled by their parent components.

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). The age property has a question mark (?), indicating it is optional.

Greeting Component:

This functional component takes GreetingProps as its props type. It destructures name and age from the props. Within the component:

• It renders a View containing a Text element that always displays the name.
• It conditionally renders another Text element showing the age if the age prop is provided.
• This setup ensures that the Greeting component is type-safe and can flexibly handle the presence or absence of the age prop while always displaying the name.

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>
  );
};

In this example, name is a required prop, and age is optional. TypeScript will enforce the correct usage of these props when using the Greeting component.

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#. In the context the Article class, TypeScript classes allow you to define the structure and functionality of an Article. The class encapsulates properties like title, link, and pubDate, which are all essential attributes of an article. By defining these properties in the class, you ensure that every instance of Article has a consistent structure.

Classes also allow you to define a constructor, a special method used for creating and initializing objects of the class. In the Article class, the constructor takes parameters that correspond to the article's properties and assigns them to the class's properties. This ensures that whenever you create a new Article, you provide the necessary data for title, link, and pubDate.

TypeScript classes can include methods that define behaviors related to the class's data. In the Article class, for example, you might have a method called getSummary that returns a formatted string summarizing the article's information. This method encapsulates the behavior related to presenting an article's summary, keeping the logic within the class where it belongs.

The use of TypeScript classes also supports inheritance, where a new class can inherit properties and methods from an existing class. This promotes code reuse and allows for the creation of more specialized classes that build on the functionality of base classes.

Overall, TypeScript classes like Article provide a powerful way to define and work with structured data, offering clear, maintainable, and scalable code. They combine data and behavior in a way that aligns with object-oriented principles, making your TypeScript code more robust and easier to understand.

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());