macOS では Quick Look と呼ばれる機能により、Finder でファイルを選択した状態でスペースキーを押すとファイルによっては中身が表示されます。ですが TypeScript ファイル(拡張子が .ts / .tsx のファイル)については、デフォルトではソースコードは表示されません。ここでは TypeScript で書かれたファイルを Quick Look に対応させる手順を紹介します。

(※)2019年10月11日現在、macOS Catalina には対応していません。

QLColorCode をインストール

まずは homebrew で QLColorCode をインストールします。
brew cask install qlcolorcode

TypeScript ファイルのコンテンツタイプを調べる

ts ファイルと tsx ファイルのコンテンツタイプを調べます。
mdls -name kMDItemContentType /full/path/to/file.ts
mdls -name kMDItemContentType /full/path/to/file.tsx
/full/path/to/file.ts で指定するファイルは ts ファイルであればどのファイルでも構いません。最初のコマンドでの出力は
kMDItemContentType = "public.mpeg-2-transport-stream"
のようなものになり、2番目のコマンドの出力は
kMDItemContentType = "dyn.ah62d4rv4ge81k652"
のようになると思います。このダブルクォーテーションで囲まれたものが次の手順で必要になります。

Info.plist にコンテンツタイプを追加

次に ~/Library/QuickLook/QLColorCode.qlgenerator/Contents/Info.plist を開いてください。Xcode よりも Visual Studio Code のようなテキストエディタの方が編集が楽だと思います。Info.plist ファイルの最初の方に
<dict>
    <key>LSItemContentTypes</key>
    <array>
        <string>public.source-code</string>
        <string>public.php-script</string>
        ...
    </array>
</dict>
という箇所があるので、array の最後に先ほど調べたコンテンツタイプを追加します。
<dict>
    <key>LSItemContentTypes</key>
    <array>
        <string>public.source-code</string>
        <string>public.php-script</string>
        ...
        <string>public.mpeg-2-transport-stream</string>
        <string>dyn.ah62d4rv4ge81k652</string>
    </array>
</dict>
以上で設定は完了です。これで Quick Look でソースコードが表示されない場合は、~/Library/QuickLook/ ディレクトリから QLColorCode.qlgenerator を別の場所に移動させ、すぐに元に戻してください(この操作で Quick Look が再起動されるようです)。

参考サイト

Preview Typescript files with MacOS Quicklook