TypeScript Tutorial: Creating a Simple Interactive Stock Ticker

Written by

learnmodernjavascript

in

In today’s fast-paced financial world, staying informed about stock prices is crucial for both seasoned investors and those just starting out. Wouldn’t it be great to have a simple, real-time display of stock prices right at your fingertips? This tutorial will guide you through building a dynamic and interactive stock ticker using TypeScript, a powerful language that enhances JavaScript with static typing, making your code more robust and maintainable. We’ll cover everything from setting up your development environment to fetching real-time data and displaying it in a user-friendly manner. By the end of this tutorial, you’ll have a functional stock ticker that you can customize and expand upon to meet your specific needs. Let’s dive in and build something useful!

Why TypeScript?

Before we get started, let’s address why we’re choosing TypeScript for this project. TypeScript offers several advantages over plain JavaScript, especially for larger projects like this:

  • Type Safety: TypeScript introduces static typing, which allows you to catch errors during development rather than runtime. This prevents common bugs and makes your code more reliable.
  • Code Completion and Refactoring: With types, your IDE can provide better code completion suggestions and make refactoring easier.
  • Maintainability: Typed code is easier to understand and maintain, especially as your project grows.
  • Modern JavaScript Features: TypeScript supports the latest JavaScript features, allowing you to write cleaner and more concise code.

Setting Up Your Development Environment

To follow along with this tutorial, you’ll need the following:

  • Node.js and npm (or yarn): These are essential for managing your project’s dependencies and running TypeScript. Download and install them from the official Node.js website.
  • A Code Editor: A code editor like Visual Studio Code (VS Code) is highly recommended. It offers excellent TypeScript support, including code completion, error highlighting, and debugging.

Once you have these installed, let’s create a new project:

  1. Create a Project Directory: Open your terminal or command prompt and create a new directory for your project. For example: mkdir stock-ticker
  2. Navigate to the Project Directory: cd stock-ticker
  3. Initialize npm: Run npm init -y (or yarn init -y if you’re using yarn) to create a package.json file.
  4. Install TypeScript: Run npm install typescript --save-dev (or yarn add typescript --dev) to install TypeScript as a development dependency.
  5. Create a TypeScript Configuration File: Run npx tsc --init to generate a tsconfig.json file. This file configures how TypeScript compiles your code.

Your directory structure should now look something like this:

stock-ticker/
├── node_modules/
├── package.json
├── tsconfig.json
└──

Now, let’s configure tsconfig.json. Open the file and modify it to include the following settings. These settings will help us compile our TypeScript code into JavaScript, and also enable certain features:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Here’s a breakdown of what these options mean:

  • target: Specifies the JavaScript version to compile to (e.g., “es5”, “es6”, “esnext”).
  • module: Specifies the module system to use (e.g., “commonjs”, “esnext”).
  • outDir: Specifies the output directory for the compiled JavaScript files.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • strict: Enables strict type-checking options.
  • skipLibCheck: Skips type checking of declaration files (.d.ts files).
  • include: Specifies the files and directories to include in the compilation.

Creating the HTML Structure

Let’s create the basic HTML structure for our stock ticker. Create a file named index.html in your project directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Ticker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="stock-ticker-container">
        <!-- Stock prices will be displayed here -->
    </div>
    <script src="dist/app.js"></script>
</body>
</html>

This HTML provides the basic structure for our application. We have a container div (stock-ticker-container) where we’ll display the stock prices. We also link to a CSS file (style.css) for styling and a JavaScript file (dist/app.js), which will be generated from our TypeScript code.

Now, let’s create a basic CSS file named style.css. This will include some basic styling for our ticker:

#stock-ticker-container {
    display: flex;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    overflow-x: auto; /* Enable horizontal scrolling if needed */
}

.stock-item {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    min-width: 150px; /* Adjust as needed */
    text-align: left;
}

.stock-item span {
    display: block;
}

.stock-item .price {
    font-weight: bold;
}

.up {
    color: green;
}

.down {
    color: red;
}

This CSS provides basic styling for the ticker container and individual stock items. The overflow-x: auto; property allows the ticker to scroll horizontally if there are too many stock items to fit on the screen.

Writing the TypeScript Code

Now, let’s write the TypeScript code that will fetch stock data and display it in our HTML. Create a directory named src in your project directory, and inside that, create a file named app.ts. This is where we’ll write our main application logic.

First, let’s define some types to represent our stock data. This will help us ensure type safety and make our code more readable:

// src/app.ts

interface StockData {
    symbol: string;
    price: number;
    change: number;
    changePercent: number;
}

This StockData interface defines the structure of the data we’ll receive from our API. It includes the stock symbol, current price, change in price, and percentage change. Next, we’ll write a function to fetch the stock data. We’ll use the fetch API to retrieve data from a free stock API. For this tutorial, we will use a mock API to simulate real-time stock data. This is because real-time APIs often require API keys and can have rate limits. The mock API will return a JSON response that is formatted as an array of StockData objects. This approach allows us to focus on the core functionality of our stock ticker without the complexities of API authentication and rate limiting.

// src/app.ts

interface StockData {
    symbol: string;
    price: number;
    change: number;
    changePercent: number;
}

async function fetchStockData(): Promise<StockData[]> {
    // Replace with your API endpoint (or a mock API) 
    const apiUrl = 'https://mock-api.com/stock-data'; // Replace with your actual API endpoint
    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data: StockData[] = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching stock data:', error);
        return [];
    }
}

In this function:

  • We define the fetchStockData function as async because it performs an asynchronous operation (fetching data).
  • We use the fetch API to make a GET request to the specified API endpoint.
  • We check if the response is successful (status code 200-299). If not, we throw an error.
  • We parse the response body as JSON and cast it to an array of StockData objects.
  • We handle any errors that occur during the fetch operation.

Important: You’ll need to replace 'https://mock-api.com/stock-data' with the actual URL of your API endpoint. For testing purposes, you can create a simple JSON file (e.g., mock-data.json) with some sample stock data and serve it locally or use a service like JSONPlaceholder to simulate an API.

Now, let’s write a function to display the stock data in our HTML:

// src/app.ts

interface StockData {
    symbol: string;
    price: number;
    change: number;
    changePercent: number;
}

async function fetchStockData(): Promise<StockData[]> {
    // Replace with your API endpoint (or a mock API) 
    const apiUrl = 'https://mock-api.com/stock-data'; // Replace with your actual API endpoint
    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data: StockData[] = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching stock data:', error);
        return [];
    }
}

function displayStockData(stockData: StockData[]): void {
    const container = document.getElementById('stock-ticker-container');
    if (!container) return;

    container.innerHTML = ''; // Clear previous data

    stockData.forEach(stock => {
        const stockItem = document.createElement('div');
        stockItem.classList.add('stock-item');

        const changeClass = stock.change > 0 ? 'up' : 'down';

        stockItem.innerHTML = `
            <span>${stock.symbol}</span>
            <span class="price">${stock.price.toFixed(2)}</span>
            <span class="${changeClass}">${stock.change.toFixed(2)} (${stock.changePercent.toFixed(2)}%)</span>
        `;

        container.appendChild(stockItem);
    });
}

In this function:

  • We get a reference to the stock-ticker-container element.
  • We clear any existing content in the container.
  • We iterate over the stockData array.
  • For each stock, we create a new div element with the class stock-item.
  • We determine the change class (up or down) based on the stock’s change value.
  • We use template literals to construct the HTML for each stock item, including the symbol, price, and change information.
  • We append the stock item to the container.

Finally, let’s create our main function to initialize the stock ticker:

// src/app.ts

interface StockData {
    symbol: string;
    price: number;
    change: number;
    changePercent: number;
}

async function fetchStockData(): Promise<StockData[]> {
    // Replace with your API endpoint (or a mock API) 
    const apiUrl = 'https://mock-api.com/stock-data'; // Replace with your actual API endpoint
    try {
        const response = await fetch(apiUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data: StockData[] = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching stock data:', error);
        return [];
    }
}

function displayStockData(stockData: StockData[]): void {
    const container = document.getElementById('stock-ticker-container');
    if (!container) return;

    container.innerHTML = ''; // Clear previous data

    stockData.forEach(stock => {
        const stockItem = document.createElement('div');
        stockItem.classList.add('stock-item');

        const changeClass = stock.change > 0 ? 'up' : 'down';

        stockItem.innerHTML = `
            <span>${stock.symbol}</span>
            <span class="price">${stock.price.toFixed(2)}</span>
            <span class="${changeClass}">${stock.change.toFixed(2)} (${stock.changePercent.toFixed(2)}%)</span>
        `;

        container.appendChild(stockItem);
    });
}

async function main(): Promise<void> {
    const data = await fetchStockData();
    displayStockData(data);

    // Refresh data periodically (e.g., every 5 seconds)
    setInterval(async () => {
        const newData = await fetchStockData();
        displayStockData(newData);
    }, 5000);
}

main();

In the main function:

  • We call fetchStockData to get the initial stock data.
  • We call displayStockData to display the data in the HTML.
  • We use setInterval to refresh the data periodically (every 5 seconds in this example). This creates the real-time effect.

Compiling and Running the Application

Now that we have our TypeScript code, let’s compile it and run the application.

  1. Compile the TypeScript code: Open your terminal and navigate to your project directory. Run the command: tsc. This will compile your TypeScript code into JavaScript and put the output in the dist directory.
  2. Open the HTML file in your browser: Open index.html in your web browser. You should see the stock ticker displaying the sample stock data.

If everything is set up correctly, you should see the stock ticker displaying the stock symbols, prices, and changes. The data will update automatically every 5 seconds. Congratulations, you have built your first interactive stock ticker!

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect API Endpoint: Double-check the API endpoint you’re using in fetchStockData. Make sure it’s correct and that the API is working.
  • CORS Issues: If you’re fetching data from a different domain, you might encounter CORS (Cross-Origin Resource Sharing) issues. The server you’re fetching data from needs to have CORS enabled. For local development, you can use a browser extension to disable CORS temporarily.
  • Type Errors: TypeScript will help you catch type errors during development. Review the error messages and make sure your data types match what the API is returning.
  • Incorrect HTML Element IDs: Make sure the IDs you’re using in your TypeScript code (e.g., stock-ticker-container) match the IDs in your HTML.
  • Console Errors: Use your browser’s developer console to check for any errors. These errors can provide valuable clues about what’s going wrong.

Enhancements and Next Steps

This is just a basic stock ticker. Here are some ideas for enhancements:

  • Real-time Data: Integrate with a real-time stock data API (e.g., from IEX Cloud, Alpha Vantage, or Yahoo Finance).
  • User Input: Allow users to enter stock symbols to add to the ticker.
  • Error Handling: Implement more robust error handling to gracefully handle API errors and other issues.
  • Styling: Improve the styling of the ticker to make it more visually appealing.
  • User Preferences: Allow users to customize the ticker (e.g., change the refresh interval, choose which stocks to display).
  • Local Storage: Store user preferences and stock symbols in local storage.

Summary / Key Takeaways

In this tutorial, we’ve built a simple, interactive stock ticker using TypeScript. We’ve covered the basics of setting up a TypeScript project, fetching data from an API, and displaying that data in a web page. We’ve also explored common mistakes and how to fix them. The use of TypeScript provides benefits like type safety and improved code organization. This project serves as a great starting point for building more complex web applications that interact with real-time data. Remember to experiment with the code, add your own features, and explore the possibilities of TypeScript.

FAQ

Here are some frequently asked questions about building a stock ticker:

  1. What is TypeScript? TypeScript is a superset of JavaScript that adds static typing. It helps catch errors early, improves code maintainability, and provides better code completion.
  2. How do I get real-time stock data? You can use a real-time stock data API. There are many APIs available, some of which are free and some of which require a subscription.
  3. What are the benefits of using TypeScript for this project? TypeScript provides type safety, which helps prevent errors, makes your code more readable, and improves maintainability. It also provides better tooling support, such as code completion and refactoring.
  4. How can I customize the stock ticker? You can customize the stock ticker by adding features such as user input, improved styling, error handling, and user preferences.
  5. Where can I find stock data APIs? You can find stock data APIs from providers such as IEX Cloud, Alpha Vantage, and Yahoo Finance. Make sure to review the API’s terms of service and any associated costs.

Building a stock ticker can be a rewarding project, allowing you to learn about web development, data fetching, and real-time data visualization. By using TypeScript, you gain the advantages of type safety and improved code structure, making your project easier to manage and extend. As you build, remember to experiment, learn from your mistakes, and continually strive to improve your code. The world of finance and web development is vast, and there’s always something new to discover. Keep coding, keep learning, and enjoy the journey!

More posts