Types of property 'delimiters' are incompatible. Type 'string[]' is not assignable to type '[string, string]'. の対処法

概要

Django + vue.js などの場合、どちらも変数展開に mustache記法({{ }}) を用いるため、
vue.js 側の delimiters オプションを使用して、以下のように回避することがあると思います。

vue.js

delimiters: ['[[', ']]']

Javascript と Typescript が混在しているプロジェクトの場合、
これが原因でビルド時にタイトルのエラーを吐くことがあります。

具体的には、ts 形式のファイルから上記のオプションが設定されている js 形式のモジュールを import して使用する場合などです。

原因

vue.js のランタイムにて、delimiters は以下のように型付けされています。

delimiters?: [string, string];

これは、文字列型が二つ含まれるタプル型です。
ところが、Javascript にはタプル型は存在しないため、文字列が含まれる配列型と誤認してしまうためにエラーとなります。

解決策

解決策はいくつかありますが、
たったこれだけのために副作用のありそうな諸々の無効化オプションを設定したくはないので、最も影響の小さい解決方法を考えました。

1. ts ファイルで、正しい型定義を行った変数を定義する

   export const typedDelimiters: [string, string] = ["[[", "]]"];
   

2. 上記変数を、js形式のファイルで import し、delimiters オプションの値として使用する

   import { typedDelimiters } from '../utils';
   
   ...中略...
   
   delimiters: typedDelimiters
   

トランスパイル時には、js も ts も全て Typescript として認識されます。
そこで、JS による動的型付けに任せず、明示的に型付けしてしまうというわけです。

以上です。