Learn how to Delete Useless Code in TypeScript Tasks






What’s lifeless code?

“Useless code” is code that’s by no means used. It isn’t referenced by another code, it isn’t imported, it isn’t used within the closing construct in any manner.

Refactoring a undertaking to make sure varieties, strategies, or properties out of date with out eradicating that out of date code will create lifeless code. Altering the path of a undertaking, like selecting to make use of a special API or library also can produce lifeless code. On giant tasks with many various groups and shifting priorities, the prevalence of lifeless code is inevitable.



Why must you delete lifeless code?

There are lots of explanation why it’s best to delete lifeless code. There are lots of results that lifeless code can have on a big undertaking:

  1. Useless code have to be compiled, which slows down the compilation time. It might be included within the closing output too, rising the entire executable dimension.
  2. Useless code have to be downloaded, which enhance the undertaking dimension.
  3. Useless code might reference different lifeless code and make it seem necessary.
  4. Useless code have to be understood, which makes the undertaking more durable to keep up and work on.

Once you delete lifeless code, you:

  1. Make it simpler to know and preserve a undertaking.
  2. Velocity up compilation time.
  3. Lower the undertaking dimension.

On account of eradicating lifeless code, a program might be sooner to obtain and compile, and its output executable might be smaller and sooner.



Learn how to discover lifeless code

First, you have to to be utilizing TypeScript in your tasks for these instruments to work. TypeScript simplifies the tough process of figuring out whether or not any given piece of code is definitely used or not.

Second, you’ll want to set up ts-prune and ts-unused-exports globally, to allow them to be used for any undertaking. Run these instructions in a terminal:

npm set up -g ts-prune ts-unused-exports
Enter fullscreen mode

Exit fullscreen mode

In my expertise, no single software will give excellent outcomes for figuring out lifeless code. So, I like to recommend alternating between each of those instruments to seek out lifeless code.



Learn how to use ts-prune

To run ts-prune, run the next command in a terminal:

ts-prune --project tsconfig.json
Enter fullscreen mode

Exit fullscreen mode

It’s best to see some output like this:

srccomponentsAvatarindex.ts:18 - STYLE_CLASSES
srccomponentsBulkActionsindex.ts:26 - BulkAction
srccomponentsCheckableButtonindex.ts:13 - CheckableButtonProps
srccomponentsChoiceindex.ts:9 - ChoiceProps
srccomponentsComboboxindex.ts:2 - ComboboxTextField
srccomponentsDataTableutilities.ts:34 - isEdgeVisible (utilized in module)
srccomponentsDropZoneindex.ts:38 - DropZoneFileType
srccomponentsIndexTableindex.ts:6 - CellProps
srccomponentsIndexTableindex.ts:11 - Cell
Enter fullscreen mode

Exit fullscreen mode

The left-hand aspect is the file and line variety of the place the potential lifeless code happens. The proper-hand aspect is the title of the export that seems to be unused. If the export is simply used internally, it’s going to have the textual content (utilized in module) appended to it. If the default export is unused, the right-hand aspect will say default.

I am OK with unused exports so long as the export is used internally, so I like to recommend filtering out the strains with (utilized in module) in them. You are able to do that by piping the output into grep:

ts-prune --project tsconfig.json | grep -v '(utilized in module)'
Enter fullscreen mode

Exit fullscreen mode



Learn how to use ts-unused-exports

To run ts-unused-exports, run these instructions in a terminal:

ts-unused-exports tsconfig.json
Enter fullscreen mode

Exit fullscreen mode

which ought to create some output like this:

srcutilitiesfeaturesindex.ts: Options, useFeatures
srcutilitiesfocus-managerindex.ts: FocusManagerContextType
srcutilitiesframeindex.ts: FrameContextType
srcutilitiesindex-tableindex.ts: useRowHovered
srcutilitieslistboxindex.ts: ListboxContextType
srcutilitiesmedia-queryindex.ts: MediaQueryContextType
srcutilitiesportalsindex.ts: PortalsManager
srcutilitiesresource-listindex.ts: ResourceListContextType
srcutilitiesthemeindex.ts: ProcessedThemeConfig
srcutilitiesthemetypes.ts: ThemeLogo, Function, AppThemeConfig
srcutilitiesthemeutils.ts: buildCustomPropertiesNoMemo
Enter fullscreen mode

Exit fullscreen mode

The left-hand aspect lists the file that incorporates unused exports. The proper-hand aspect lists the names of unused exports within the file. If the default module export is unused, the right-hand aspect will embody default.

I’ll typically ignore unused varieties, since it’s sometimes not a lot of a difficulty. In lots of circumstances, it’s indicative of labor that
is in progress. Additionally it is not included within the compiled JavaScript (since varieties do not exist in JavaScript), so leaving it within the undertaking will not have an effect on the construct dimension. To try this, add the --allowUnusedTypes flag to the command:

ts-unused-exports tsconfig.json --allowUnusedTypes
Enter fullscreen mode

Exit fullscreen mode



Learn how to delete lifeless code

Sadly, you’ll have to manually undergo every consequence and decide whether or not to maintain it or delete it. There may be typically a average false constructive charge relating to discovering lifeless code. Not all unused code is lifeless code, however all lifeless code is unused code.

If any patterns emerge whereas figuring out lifeless code, I like to recommend automating the method. Create scripts to mix the outcomes from these instruments. Filter it to take away any false positives. Then, mechanically generate diffs to take away lifeless code. For small tasks, that is most likely overkill (and that is OK). For big tasks, this can be a force multiplier that can make everybody in your staff extra productive.

When deleting lifeless code, there are a pair exceptions that I all the time consider:

  1. Exported element prop varieties are OK. These might not be “used,” however they are going to doubtless be utilized by customers of the module to create by-product varieties.
   // OK:
   export kind ComponentProps = {
     /* ... */
   };
Enter fullscreen mode

Exit fullscreen mode

  1. Exported default values are OK. These enable customers of a module to entry the implicit default values of objects and capabilities, that are in any other case inaccessible programmatically.
   // OK:
   export const defaultFadeTime = 100;
   export operate animate(fadeTime = defaultFadeTime) {
     /* ... */
   }
Enter fullscreen mode

Exit fullscreen mode

  1. Lately added code (lower than a month outdated) might be OK. Generally in-progress work will seem unused as a result of it’s incomplete.
   // Most likely OK:
   const UserTable = () => {
     /* TODO: Going to implement this subsequent week */
   };
   // NOT OK:
   const UserTable = () => {
     /* TODO: Going to implement this subsequent week ... 2015-06-01 (6 years in the past) */
   };
Enter fullscreen mode

Exit fullscreen mode

  1. Metadata and particular code could also be OK. If there are items of code that serve a particular objective (e.g. preprocessed by one other software, anticipated by a framework, and so forth.) then it might not be unused or lifeless code. For instance, server-side rendered frameworks might export capabilities that aren’t used within the consumer output, however are rendered on the server as a substitute.
   // OK: particular operate utilized by the Subsequent.js framework
   export async operate getServerSideProps({ req, res }) {
     /* ... */
   }
Enter fullscreen mode

Exit fullscreen mode



Conclusion

Deleting lifeless code is a worthwhile effort that may make working in a undertaking sooner and simpler. Utilizing the ts-prune and ts-unused-export instruments, we will simplify the method of figuring out lifeless code.

If you’re a junior developer, automating the method of discovering lifeless code and deleting it’s a nice senior-level process to learn to do. Everybody in your staff will respect having much less code to obtain, compile, and perceive. And it’ll assist you perceive your codebase higher. You may most likely study many different helpful expertise alongside the way in which too.

Good luck and completely satisfied looking!



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Delete #Useless #Code #TypeScript #Tasks