TypeScriptでonkeyupを動作させる

Question

前提・実現したいこと

現在TypeScriptを勉強中です。
onkeyupを用いてfunctionを実行したいのですが下記のようなエラーが出て実行できません。

発生している問題・エラーメッセージ

Uncaught ReferenceError: test is not defined
    at HTMLInputElement.onkeyup

該当のソースコード

<%= javascript_pack_tag 'test' %><!--jsファイル読み込み-->
<input type="text" onkeyup="test('aaa')">

function test(str: string) {
  console.log(str);
}

console.log('test')とすると結果は返ってくるためjsファイル自体の読み込みは正常に出来ていると思われます。

動作環境は
Ruby 2.6.5
Rails 6.0.1

Vue,React,Angular等のフレームワークは使用しておりません。

ご教示いただければ幸いです。

Comments

[hoshi-takanori]

その TypeScript ファイルは HTML からどうやって読み込んで実行していますか？

[miyabi_pudding]

なにかライブラリかフレームワークを使用している（React.js、Vue.js、Angularなど）のであれば、その質問タグの追加と、
質問文へ提示して下さい。
また、場合によっては、フレームワーク上のTypeScript構文をある程度まで記載必要かと思います。

[miyabi_pudding]

なるほど、Ruby on RailsからTypeScriptを使用しているわけですね。
質問タグに、Ruby on Railsを追加してください。

あと、見る限り、TypeScriptではなく、JavaScriptな気がしますが、
いかがでしょうか？
コメントアウトに、jsファイル読み込みと書いていますし。

Answer 1

いくつか原因が考えられます。

• testメソッドが、グローバルに定義となっていない。
  on系の属性から呼び出せるものは、グローバルに定義されている、ないし、
  グローバルスコープからアクセスできる変数やオブジェクトに限ります。
  なので、そのtestメソッドが、(function(){ /* ここに定義されている */ })();などの中に定義されている場合、原則、on系の属性からは呼び出せません。
• 構文がTypeScriptのため、メソッドとして認識されていない
  これは限りなく薄いですが、
  質問の構文function test(str: string)は、引数に型指定を行っておりますが、
  現状、JavaScriptはまだ引数に型を指定はできません。
  よって、関数として正しく認識されていない可能性があります。
  ただし、Ruby On Railsによって、TypeScriptをJavaScriptにコンパイルして返しているのであれば、
  （<%= javascript_pack_tag 'test' %>の構文でですね）この可能性は限りなく薄いでしょう。
• Ruby On Railsによって、TypeScriptをJavaScriptにコンパイルする関係上、<script>要素生成のタイムラグがある
  上記に若干付随しますが、コンパイルする関係上、<script>要素生成が遅れ、
  <input onkeyup="test('aaa')">においてのtestメソッドの認識が先に走ってしまい、
  testがない、とエラーが出てしまっている可能性です。
  なので、その場合、HTMLの書き方や順番などに工夫が必要かと思います。
  ただし、HTMLの、ブラウザからの解析の仕様上、この可能性も限りなく薄いです。

上記いずれの可能性でもないなどありましたら、コメントいただければと思います。

Comments

[mobile105]

お世話になります。
グローバルに定義されていないという部分が怪しいと思いTypeScriptでどのようにグローバルに関数を定義するか調べて下記のように記述したら動作するようになりました！

interface Window {
test(): void;
}
window.test = () => {
console.log("aaa");
};

これでようやく次に進めそうです。ありがとうございました。

[miyabi_pudding]

解決よかったです。
おお、なるほど・・・。
こちらも勉強になりました。
ただし、アロー関数だと、thisの扱いが変わってしまいますので、注意が必要かも。

onkeyup属性付けたinput自身を取ってきたいなら、
window.test = (str: string, valueDom: HTMLInputElement) => {
console.log(valueDom);
};
として、inputは、
<input type="text" onkeyup="test('aaa', this)">
とするといいかもしれません。

[mobile105]

ご返答おくれまして申し訳ございません。
webpackでビルドすると変数のスコープが通常とは異なるようですね。

いただいたコードでinputの要素も取ることも出来ました！

ご丁寧にありがとうございました！
感謝致します。