Theo's Typesafe Cult•2y ago

CODEREVIEW - Typescript noob

in javascript i would write this by first defining the empty object and then filling it up, so as to keep my code DRY typescript doesn't seem to like this... is there a best practice?

export type ParsedLighthouseReport = {
  savingsOpportunities: SavingsOpps[] ;
//  .. a bunch more properties
  error: {
    errorCode: string | null;
    errorMessage: string | null;
  } | null;
};

export default function parseReport(report): ParsedLighthouseReport {
  const parsedReport = {
    error: null,
    savingsOpportunities: null,
   // all the properties: null
  };

  if (report.runtimeError) {
    parsedReport.error = {
      errorCode: report.runtimeError.code,
      errorMessage: report.runtimeError.message,
    };
    return parsedReport;
  }

  parsedReport.savingsOpportunities = getSavingsOpps(report);
  // more properties

  return parsedReport;
}

export type ParsedLighthouseReport = {
  savingsOpportunities: SavingsOpps[] ;
//  .. a bunch more properties
  error: {
    errorCode: string | null;
    errorMessage: string | null;
  } | null;
};

export default function parseReport(report): ParsedLighthouseReport {
  const parsedReport = {
    error: null,
    savingsOpportunities: null,
   // all the properties: null
  };

  if (report.runtimeError) {
    parsedReport.error = {
      errorCode: report.runtimeError.code,
      errorMessage: report.runtimeError.message,
    };
    return parsedReport;
  }

  parsedReport.savingsOpportunities = getSavingsOpps(report);
  // more properties

  return parsedReport;
}

2 Replies

fotofloOP•2y ago

From ChatGPT: In TypeScript, it is best practice to use a more explicit approach for initializing variables, especially when working with interfaces or types. Instead of initializing all properties as null, you can use a technique called "object destructuring with default values" to initialize the properties with their appropriate types and default values. An example of this technique would be:

export default function parseReport(report): ParsedLighthouseReport {
  const parsedReport = {
    savingsOpportunities: getSavingsOpps(report) || [],
    diagnostics: getDiagnostics(report) || {},
    audits: getAudits(report) || {},
    scores: getScores(report) || [],
    resourceCharts: getResourceCharts(report) || [],
    error: report.runtimeError ? {
      errorCode: report.runtimeError.code,
      errorMessage: report.runtimeError.message,
    } : null,
  };
  return parsedReport;
}

export default function parseReport(report): ParsedLighthouseReport {
  const parsedReport = {
    savingsOpportunities: getSavingsOpps(report) || [],
    diagnostics: getDiagnostics(report) || {},
    audits: getAudits(report) || {},
    scores: getScores(report) || [],
    resourceCharts: getResourceCharts(report) || [],
    error: report.runtimeError ? {
      errorCode: report.runtimeError.code,
      errorMessage: report.runtimeError.message,
    } : null,
  };
  return parsedReport;
}

This way, you can ensure that the properties of the object will always have the correct type and default value. Alternatively, you could use a method like Object.assign() to copy over the properties and default values, but this approach is not as readable and might be harder to maintain. ME >> i woudl check if there's a runtime error first bbefore running the getters CHATGPT: Yes, checking for runtime errors first before running the getters is a good idea. This way, you can avoid running the getters and unnecessary processing if there is a runtime error. Here is an example of how you could check for runtime errors before running the getters:

export default function parseReport(report): ParsedLighthouseReport {
  let parsedReport: ParsedLighthouseReport;
  if (report.runtimeError) {
    parsedReport = {
      error: {
        errorCode: report.runtimeError.code,
        errorMessage: report.runtimeError.message,
      },
    };
    return parsedReport;
  }

  parsedReport = {
    savingsOpportunities: getSavingsOpps(report) || [],
    diagnostics: getDiagnostics(report) || {},
    audits: getAudits(report) || {},
    scores: getScores(report) || [],
    resourceCharts: getResourceCharts(report) || [],
    error: null
  };
  return parsedReport;
}

export default function parseReport(report): ParsedLighthouseReport {
  let parsedReport: ParsedLighthouseReport;
  if (report.runtimeError) {
    parsedReport = {
      error: {
        errorCode: report.runtimeError.code,
        errorMessage: report.runtimeError.message,
      },
    };
    return parsedReport;
  }

  parsedReport = {
    savingsOpportunities: getSavingsOpps(report) || [],
    diagnostics: getDiagnostics(report) || {},
    audits: getAudits(report) || {},
    scores: getScores(report) || [],
    resourceCharts: getResourceCharts(report) || [],
    error: null
  };
  return parsedReport;
}

This way, if there is a runtime error, the function will return the error object and skip running the other getters. its a little wrong, but amazing

Unknown User•2y ago

Message Not Public

Gaming

Programming

CODEREVIEW - Typescript noob