django-compressorでTypeScriptを使う

前提

テンプレートはこんな感じ¹

{% load compress %}
{% compress js %}
<script type="text/typescript">
class Greeter {
    constructor(public greeting: string) { }
    greet() {
        return "<h1>" + this.greeting + "</h1>";
    }
};
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;
</script>
{% endcompress %}

ダメだったやりかた

settings.py

COMPRESS_PRECOMPILED = ('text/typescript', 'tsc --out {outfile} {infile}')

エラーが出る

error TS6053: File '/tmp/tmpxxt3rmzl.ts' not found.

理由

tscは拡張子に.tsまたは.d.tsしか使用できない。²

解決方法

tscをラップしたスクリプトを作ってそれを指定する。

settings.py

COMPRESS_PRECOMPILED = ('text/typescript', '/path/to/my-tsc {infile} {outfile}')

my-tsc

#!/bin/sh

cp $1 $1.ts
tsc $1 --out $2
rm $1.ts

参考

• https://github.com/django-compressor/django-compressor/issues/619

1. TypeScriptのコードは公式のサンプル ↩

2. https://github.com/Microsoft/TypeScript/blob/ed7b07dce1e66e56fdc9ca9a8b1f818a9ab92080/src/compiler/core.ts#L705 ↩