Preview Typescript files with MacOS Quicklook


If you use both Quicklook and Typescript, you've probably been frustrated by the blank previews you get for .ts and .tsx files. Thankfully there's an easy, if fiddly, fix:

First, install the QLColorCode Quicklook plugin. This is easy with Homebrew:

brew cask install qlcolorcode

Alternately, you can download and copy it manually into ~/Library/Quicklook. This should give you nice previews of javascript and other code, but not TS.

Then find the content types for .ts and .tsx:

mdls -name kMDItemContentType /full/path/to/file.ts
mdls -name kMDItemContentType /full/path/to/file.tsx

Copy the file types into the LSItemContentTypes array in


These will be something like dyn.ah62d4rv4ge81k652 for .tsx and probably public.mpeg-2-transport-stream for .ts (MacOS thinks its a video file)

See adding language types for more info

Finally, reboot Quicklook by moving QLColorCode.qlgenerator out of ~/Library/QuickLook/, then moving it back.

Now you should see nice syntax-highlighted previews of all your typescript

Note, this will break video previews for certain video files - this is
something I can live with!