Bug (Minor) - Linting error in source code

[KC900201]

Describe the bug

• A few source codes in the repo have linting errors.

To Reproduce

• Steps to reproduce the behavior:
  • Navigate to the mentioned source codes for example:
  • hero-action.ts
  • BaseLayout.astro

Expected behaviour

• Linting errors should be prevented by prefixing the coding before performing git commit to prevent errors.
• Solution: some errors that may caused by Typescript compilation. We can perform type-guarding to predefine the variables

Screenshots

• BaseLayout.astro

• hero-action.ts

[KC900201]

Hi @RayMathew,

Is it possible to look into this issue?

cc: @Buzzpy

[RayMathew]

I'm new to TypeScript. Could you give an example of type-guarding that fixes the issue?

[KC900201]

Hi @RayMathew,

Apologies for not getting back to you sooner. TypeScript is a superset of JavaScript that enforces static typing and variables needed to be pre-defined their object types to avoid compilation errors. With the errors found in the code detected by prettier, this could cause compilation errors when production build is undergoing.

An example of a compilation error is shown below when running npm run build

Cause of issue: Typescript enforces static typing, hence it is possible that the type of a value that TypeScript can’t know about. The return type can be ambiguous as the code might return a null value if it doesn't run successfully.

Suggested workaround for this issue:

We could use type assertion to specify a specific type for the code line

const modalBody = document.getElementById("modal-body") as HTMLElement;

Reminder: Because type assertions are removed at compile-time, there is no runtime checking associated with a type assertion. There won’t be an exception or null generated if the type assertion is wrong.

[KC900201]

@RayMathew I suggest we run a thorough code check using existing code linters. You may check for eslint which is a popular linting tool for most TypeScript projects.

There is an existing eslint-plugin for Astro framework that you can look for.

If it's required, you may assign to me on this task.

References:

• How to get VSCode, eslint and prettier work with Astro

cc: @Buzzpy

[RayMathew]

I see. I understand that type assertion will suppress the compilation error. What if instead we had null checks in the code? example:

const modalBody = document.getElementById("modal-body");
if (modalBody) {
  modalBody.innerHTML = "Some content";
}
else throw Error();

[KC900201]

@RayMathew, apologies for not getting to you sooner. I think your solution works too. If I may ask, would you like to assign me the task?

In addition to solve the null error checking, my suggestion would be to add lint checkers as well.

@RayMathew I suggest we run a thorough code check using existing code linters. You may check for eslint which is a popular linting tool for most TypeScript projects.

There is an existing eslint-plugin for Astro framework that you can look for.

If it's required, you may assign to me on this task.

References:

• How to get VSCode, eslint and prettier work with Astro

cc: @Buzzpy

[RayMathew]

Agreed to the need for the linting tool as well 👍🏻 Please let us know in advance which rules you plan to add in the config file.

P.S. It's up to @Buzzpy to assign tasks, she's the repo owner.

[KC900201]

@Buzzpy may we know your opinion?