Try it yourself with our free Json To Csv tool — runs entirely in your browser, no signup needed.

How to Parse CSV in TypeScript

How to parse CSV in TypeScript

Parsing CSV (Comma Separated Values) files is a common task in software development, and TypeScript is no exception. CSV files are widely used for data exchange and storage, and being able to parse them efficiently is crucial in many applications. In this guide, we will explore how to parse CSV files in TypeScript, covering the basics, edge cases, common mistakes, and performance tips.

Quick Example

To get started quickly, here is a minimal example that parses a CSV string into an array of objects:

import * as csv from 'csv-parser';

const csvString = `Name,Age,Country
John,25,USA
Jane,30,UK`;

const records = [];
csv.parse(csvString, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    records.push(data);
  }
});

console.log(records);
// Output: [{ Name: 'John', Age: '25', Country: 'USA' }, { Name: 'Jane', Age: '30', Country: 'UK' }]

This example uses the csv-parser library, which can be installed using npm install csv-parser or yarn add csv-parser.

Step-by-Step Breakdown

Let's break down the code line by line:

  • import * as csv from 'csv-parser';: We import the csv-parser library and assign it to the csv variable.
  • const csvString = ...: We define a sample CSV string with three columns and two rows.
  • const records = [];: We create an empty array to store the parsed records.
  • csv.parse(csvString, (err, data) => { ... });: We call the parse method of the csv object, passing in the CSV string and a callback function. The callback function takes two arguments: err (an error object) and data (the parsed record).
  • if (err) { ... } else { ... }: We check if an error occurred during parsing. If so, we log the error to the console. Otherwise, we push the parsed record to the records array.
  • console.log(records);: Finally, we log the parsed records to the console.

Handling Edge Cases

Here are some common edge cases to consider when parsing CSV files in TypeScript:

Empty/Null Input

const csvString = '';
try {
  csv.parse(csvString, (err, data) => {
    if (err) {
      console.error(err);
    } else {
      console.log(data); // Output: []
    }
  });
} catch (err) {
  console.error(err); // Output: Error: Invalid CSV string
}

In this example, we pass an empty string to the parse method. The library will throw an error, which we catch and log to the console.

Invalid Input

const csvString = 'Invalid CSV string';
try {
  csv.parse(csvString, (err, data) => {
    if (err) {
      console.error(err);
    } else {
      console.log(data); // Output: []
    }
  });
} catch (err) {
  console.error(err); // Output: Error: Invalid CSV string
}

In this example, we pass an invalid CSV string to the parse method. The library will throw an error, which we catch and log to the console.

Large Input

const largeCsvString = Array(10000).fill('Name,Age,Country\nJohn,25,USA\nJane,30,UK').join('');
csv.parse(largeCsvString, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data); // Output: Array of 10,000 records
  }
});

In this example, we create a large CSV string with 10,000 rows. We pass this string to the parse method, which will parse the entire string into an array of records.

Unicode/Special Characters

const csvString = 'Name,Age,Country\nJohn,25,USA\nJane,30,UK\nÉmile,35,France';
csv.parse(csvString, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data); // Output: Array of records with Unicode characters
  }
});

In this example, we create a CSV string with a record containing a Unicode character (Émile). We pass this string to the parse method, which will parse the entire string into an array of records, preserving the Unicode characters.

Common Mistakes

Here are three common mistakes developers make when parsing CSV files in TypeScript, along with the correct solutions:

Mistake 1: Not handling errors

// Wrong code
csv.parse(csvString, (data) => {
  console.log(data);
});

// Corrected code
csv.parse(csvString, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

In this example, the developer forgets to handle errors that may occur during parsing. The corrected code checks for errors and logs them to the console.

Mistake 2: Not checking for empty input

// Wrong code
csv.parse(csvString, (data) => {
  console.log(data);
});

// Corrected code
if (csvString.trim() !== '') {
  csv.parse(csvString, (err, data) => {
    if (err) {
      console.error(err);
    } else {
      console.log(data);
    }
  });
} else {
  console.log('Empty input');
}

In this example, the developer forgets to check if the input string is empty. The corrected code checks for empty input and logs a message to the console if so.

Mistake 3: Not handling large input

// Wrong code
csv.parse(largeCsvString, (data) => {
  console.log(data);
});

// Corrected code
const chunkSize = 1000;
const chunks = [];
for (let i = 0; i < largeCsvString.length; i += chunkSize) {
  chunks.push(largeCsvString.slice(i, i + chunkSize));
}
chunks.forEach((chunk) => {
  csv.parse(chunk, (err, data) => {
    if (err) {
      console.error(err);
    } else {
      console.log(data);
    }
  });
});

In this example, the developer forgets to handle large input strings. The corrected code splits the large string into smaller chunks and parses each chunk individually.

Performance Tips

Here are three practical performance tips for parsing CSV files in TypeScript:

Tip 1: Use a streaming parser

Instead of parsing the entire CSV file into memory, use a streaming parser to parse the file in chunks. This approach reduces memory usage and improves performance.

const fs = require('fs');
const csv = require('csv-parser');

const fileStream = fs.createReadStream('large.csv');
fileStream.pipe(csv()).on('data', (data) => {
  console.log(data);
});

Tip 2: Use a fast parsing library

Choose a fast parsing library, such as csv-parser, which is optimized for performance.

const csv = require('csv-parser');

const csvString = 'Name,Age,Country\nJohn,25,USA\nJane,30,UK';
csv.parse(csvString, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

Tip 3: Avoid unnecessary string concatenation

Avoid concatenating strings unnecessarily, as this can lead to performance issues. Instead, use an array to store the parsed records and join them at the end.

const records = [];
csv.parse(csvString, (err, data) => {
  if (err) {
    console.error(err);
  } else {
    records.push(data);
  }
});
console.log(records.join('\n'));

FAQ

Q: What is the best way to parse CSV files in TypeScript?

A: Use a fast parsing library, such as csv-parser, and consider using a streaming parser to parse large files.

Q: How do I handle errors during CSV parsing?

A: Check for errors in the callback function and log them to the console.

Q: What is the maximum size of a CSV file that can be parsed in TypeScript?

A: The maximum size depends on the available memory. For large files, consider using a streaming parser.

Q: Can I use TypeScript to parse CSV files with Unicode characters?

A: Yes, most parsing libraries, including csv-parser, support Unicode characters.

Q: How do I improve the performance of CSV parsing in TypeScript?

A: Use a fast parsing library, avoid unnecessary string concatenation, and consider using a streaming parser.

AI agent tools available. The CodeTidy MCP Server gives Claude, Cursor, and other AI agents access to 60+ developer tools. One command: npx @codetidy/mcp