手順
ツール等は特に使わず、下記手順で実施。
- tsconfig.jsonを追加する
- 新しいコードはTypeScriptで記述し、できるだけanyを使わないようにする
- 古いコードに戻り、型アノテーションを追加し、バグを修正する
- ソースコードの拡張子を .jsから.tsに変更する。any型を使ってエラーを抑制する
Vue3への移行も同時に実施し、CompositionAPIへの書き換えも行っていたので、setupもついでに付与。
あとはとにかくany使わず型付け。型を追い続ける。
test.vue
<script setup lang="ts">
</script>
困りポイント
console.log(window.testFunction)
=> Property 'testFunction' does not exist on type 'Window & typeof globalThis'.
別ファイルのjsでwindow直下に生やしたfunctionが、jsでは参照できるがtsだと見つからないと言われる。
解決
window.ts
interface Window {
function testFunction(s: string): string;
}
declare var window: Window
上記で記述で参照可能になる。ただambient宣言をあまり使いたくないので微妙。
実際の対応は、window直下に生やす意味がなさそうだったので、vueファイルの中に関数を移植した。