TypeScriptを使用せずにJavaScriptで型をチェックする方法

TypeScriptを使用せずにJavaScriptに型を追加する方法をご覧ください

あなたが岩の下に住んでいないなら、あなたは何かを知っていますTypeScript。これはMicrosoftによって導入された新しい言語であり、基本的には型を使用したJavaScriptです(ブラウザーで実行するためにJavaScriptにコンパイルされます)。

今、私はいくつかのテストプロジェクトでそれを使用しましたが、さまざまな理由でTypeScriptでチュートリアルを書くことを避ける傾向があります。

1つ目は、私は主に初心者向けのチュートリアルを作成しており、TypeScriptは通常人々が始めるものではないということです。

また、TypeScriptで書き始めると、混乱が生じると思います。何について話しているのでしょうか。

JavaScriptはTypeScriptファイルに非常によく適合しますが、その逆は当てはまらないため、TypeScriptファンはJavaScriptチュートリアルを引き続き利用できます。

そのため、私はWebプラットフォームの上に構築されたテクノロジーではなく、Webプラットフォームの基本に固執しています。

そうは言っても…

JavaScriptで型を使用することでメリットが得られる場合があります。彼らは役に立ちます。

おかげでこのビデオ素晴らしいポールルイスによって、私はそれを見つけました私たちは実際にJavaScriptで型を持つことができます、を使用してVisualStudioコード

まず、TypeScriptをまだインストールしていない場合は、インストールする必要があります。

npm install -g typescript

次に、tsconfig.jsonプロジェクトのルートにファイルします。にJavaScriptファイルがあると仮定しますsrcフォルダー、これはそのファイルで必要な構成の最小量です:

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ]
}

フォルダを除外することを決定できます。たとえば、除外することをお勧めしますnode_modules

{
  "compilerOptions": {
    "outFile": "../../built/local/tsc.js",
    "checkJs": true,
    "allowJs": true
  },
  "include": [
    "src/*"
  ],
  "exclude": [
    "node_modules",
  ]
}

これで、VSCodeはJavaScriptコードのタイプエラーを指摘できます。

そして、私たちが何もしなくても、自動的にそれを行うことができます。

特に、デフォルト値を使用して関数パラメーターのタイプを推測できます。

この関数があるとしましょう。timesデフォルト値2が割り当てられます。

const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

2番目のパラメーターにはデフォルト値があるため、この関数を次のように呼び出すことができます。

multiply(20)

20を2で乗算するか、次のように10を乗算します。

multiply(20, 10)

しかし、たとえば、次のような2番目のパラメータとして文字列を渡すとmultiply(20, 'hey')、VS Codeは、問題があることを通知します。

タイプ '"hey"'の引数をタイプ 'number'のパラメータに割り当てることはできません

驚くばかり!

この種の型チェックは、デフォルト値を持たない引数に対しても実行できます。あなたはを使用してそうすることができますJSDoc、通常はAPIジェネレーターとして使用され、型のヒントを追加します。

/**
 * @param {number} aNumber
 */
const multiply = (aNumber, times = 2) => {
  return aNumber * times
}

⚠️ダブルを忘れないでください**コメントの冒頭に、それ以外の場合は期待どおりに機能しません。

今あなたが電話しようとするとmultiply('ho!')エラーも発生します:

タイプ '“ ho!”'の引数は、タイプ 'number'のパラメーターに割り当てることができません。

以外number、次のタイプを設定できます。

  • null
  • undefined
  • boolean
  • string
  • Array
  • Object

例:

/**
 * @param {null} aNull
 * @param {undefined} anUndefined
 * @param {boolean} aBoolean
 * @param {string} aString
 * @param {Array} anArray
 * @param {Object} anObject
 */
const multiply = (aNull, anUndefined, aBoolean, aString, anArray, anObject) => {
  console.log(aNull, anUndefined, aBoolean, aString, anArray, anObject)
}

もちろん、コメントに注釈を追加する必要はなく、コード自体に真実のほうがいい。あなたがこのようなやり方で生きることができれば、素晴らしいです!それ以外の場合は、TypeScriptがあります。

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: