vue で ts を使用するためのヒント

注: この記事はすべての vue を ts に置き換えるのではなく、元のプロジェクトに ts ファイルを埋め込むことを目的としています。現在は実践段階であり、ts 変換プロセスに移行するだけです。

何に使われますか?

型チェック、ネイティブjsへの直接コンパイル、新しい糖衣構文の導入

なぜtsを使うのですか?

TypeScript は、JavaScript の「問題点」を解決するように設計される必要があります。つまり、型が弱く、名前空間 がないため、モジュール化が難しく、大規模なプログラムの開発には適していません。さらに、誰もがオブジェクト指向プログラミングをより便利に実践できるようにするための糖衣構文も提供します。

Typescript は、私たちのコーディング習慣を制限するだけでなく、

コメント

の役割も果たします。関数を見ると、その関数の使用法、どのような値を渡す必要があるか、そして戻り値の型をすぐに知ることができます。値は です。これにより、大規模プロジェクトの保守性が大幅に向上します。開発者が自分の足を撃つようなことはありません。 Angular: TypeScript を選んだ理由は何ですか?

TypeScript の優れたツール
TypeScript は JavaScript のスーパーセットです
TypeScript により抽象化が明確になります
TypeScript によりコードが読みやすく理解しやすくなります
はい、これが直観的ではないと思われることは承知しています。私の言いたいことを例を挙げて説明しましょう。この関数 jQuery.ajax() を見てみましょう。その署名からどのような情報が得られるのでしょうか?

確かにわかっていることは、この関数には 2 つのパラメーターがあるということだけです。これらのタイプは推測できます。おそらく最初は文字列で、2 番目は構成オブジェクトです。しかし、これは単なる推測であり、間違っている可能性があります。設定オブジェクトにどのようなオプションが含まれるか (その名前とタイプ)、関数が何を返すかはわかりません。

ソースコードまたはドキュメントを確認せずにこの関数を呼び出すことは不可能です。ソース コードを調べるという選択肢はありません。関数やクラスの目的は、実装方法を知らなくてもそれらを使用することです。言い換えれば、実装ではなくインターフェイスに依存する必要があります。ドキュメントを確認することもできますが、これは最高の開発エクスペリエンスではありません。余分な時間がかかり、ドキュメントが古くなっていることがよくあります。

つまり、jQuery.ajax(url,settings) を読むのは簡単ですが、この関数の呼び出し方法を実際に理解するには、その実装またはそのドキュメントを読む必要があります。

ここにタイプのバージョンがあります:

より詳しい情報が得られます。

この関数の最初のパラメータは文字列です。
パラメータの設定はオプションです。関数に渡すことができるすべてのオプションを、名前だけでなく型も確認できます。
関数は JQueryXHR オブジェクトを返し、そのプロパティと関数を確認できます。
型付き署名は型なし署名よりも明らかに長くなりますが、:string、:JQueryAjaxSettings、および JQueryXHR は乱雑ではありません。 これらは、コードの理解を向上させる重要なドキュメントです。実装を詳しく調べたり、ドキュメントを読んだりしなくても、コードをより深く理解できます。 私の個人的な経験では、型によってコードを理解するためのより多くのコンテキストが提供されるため、型付きコードをより速く読むことができます。

Angular からの抜粋: なぜ TypeScript を選んだのか?

学ぶ意欲はありますか?

TypeScript の設計上のハイライトの 1 つは、JavaScript の構文を放棄して新しい構文を開始するのではなく、JavaScript のスーパーセットにすることです (このクレジットは Anders にクレジットされるべきです)。これは、JavaScript を比較的深く理解していれば、TypeScript の設計が JavaScript の使用習慣と慣例に基づいているため、学習コストが非常に低いことを意味します。

一目で理解しやすいいくつかの簡単な例:

基本型

  let isDone: boolean = false;  // 布尔值
  let decLiteral: number = 6;    // 数字
  let name: string = "bob";  // 字符串
  let list: number[] = [1, 2, 3]; // 数组
  ...
  ...

インターフェース

function printLabel(labelledObj: { label: string }) {    console.log(labelledObj.label);
  }  let myObj = { size: 10, label: "Size 10 Object" };
  printLabel(myObj);

型チェッカーは printLabel への呼び出しを調べます。 printLabel にはパラメータが 1 つあり、このオブジェクト パラメータには文字列型の label という名前の属性が必要です。 渡すオブジェクト パラメーターには実際には多くのプロパティが含まれますが、コンパイラーはそれらの必要なプロパティが存在するかどうか、およびそれらの型が一致するかどうかのみをチェックすることに注意してください。

もちろん、高度な使用法もいくつかありますが、ここではあまり詳しく説明しません。詳細をご覧ください

vue プロジェクトに ts を適用するにはどうすればよいですか?

1. まず ts をインストールします

npm install --save-dev typescript npm install --save-dev ts-loader

2. ルートディレクトリに tsconfig.json ファイルを作成します

<code>{
    "compilerOptions": {
      "experimentalDecorators": true,
      "emitDecoratorMetadata": true,
      "lib": ["dom","es2016"],
      "target": "es5"
    },
    "include": ["./src/**/*"]  <br>}</code>

3.設定に ts-loader

{
    test: /\.tsx?$/,
    loader: 'ts-loader',    exclude: /node_modules/,      options: {
      appendTsSuffixTo: [/\.vue$/],
    }
  }

4. 最後に、.ts サフィックスを追加すると、webpack.base.conf.js ファイル

で元のプロジェクトで ts ファイルを使用できるようになります。

どうやって練習しますか？

1. jsでtsファイルを参照するにはどうすればよいですか?

js ファイルには型検出がないため、ts ファイルをインポートすると、ts ファイルは js ファイルに変換されるため、js ファイル内で ts ファイルを参照するためのメソッドの型検出メカニズムは有効になりません。つまり、タイプ検出メカニズムは ts ファイル内にのみ存在します。

では、js ファイルで型検出メカニズムを使用するにはどうすればよいでしょうか?エディターは、参照のみを目的として、一連の typeCheck デコレータ メソッドをカプセル化しました。使用法は次のとおりです:

@typeCheck('object','number')  deleteItem(item,index) {}

deleteItem メソッドのパラメータを検出します: item はオブジェクト型、index は数値型、型が一致しない場合は例外がスローされます

コードの一部を示します:

<code>const _check = function (checked,checker) {
        check:    <br>        for(let i = 0; i < checked.length; i++) {      <br>        if(/(any)/ig.test(checker[i]))        <br>            continue check;      <br>        if(_isPlainObject(checked[i]) && /(object)/ig.test(checker[i]))<br>            continue check;      <br>        if(_isRegExp(checked[i]) && /(regexp)/ig.test(checker[i]))<br>            continue check;      <br>        if(Array.isArray(checked[i]) && /(array)/ig.test(checker[i]))<br>            continue check;      <br>        let type = typeof checked[i];      <br>        let checkReg = new RegExp(type,'ig')      <br>        if(!checkReg.test(checker[i])) {        <br>            console.error(checked[i] + 'is not a ' + checker[i]);        <br>            return false;
      }
    }    return true;
  }  /**
   * @description 检测类型
   *   1.用于校检<a href="http://www.php.cn/wiki/147.html" target="_blank">函数参数</a>的类型，如果类型错误，会打印错误并不再执行该函数；
   *   2.类型检测忽略大小写，如string和String都可以识别为字符串类型；
   *   3.增加any类型，表示任何类型均可检测通过；
   *   4.可检测多个类型，如 "number array",两者均可检测通过。正则检测忽略连接符 ；
   */
  export function typeCheck() {    <br>      const checker =  Array.prototype.slice.apply(arguments);    <br>          return function (target, funcName, descriptor) {      <br>              let oriFunc = descriptor.value;
              descriptor.value =  function () {        <br>              let checked =  Array.prototype.slice.apply(arguments);        <br>                  let result = undefined;        <br>                  if(_check(checked,checker) ){
                      result = oriFunc.call(this,...arguments);
        }             return result;
      }
    }
  };</code>

ts typeCheck による型検出は基本的に行われます。ニーズに応えます。

2. ts で js ファイルを参照するにはどうすればよいですか?

js ファイルには型検出がないため、ts ファイルは js ファイルにインポートされるときに任意の型に変換されます。もちろん、.d.ts ファイルで型を宣言することもできます。

global.d.tsファイルなど

もちろん、いくつかのライブラリを使用する必要がある場合もありますが、宣言ファイルがない場合、tsファイルで参照するときに未定義になります。この時、私たちは何をすべきでしょうか？

たとえば、util.ts ファイルで ‘query-string’ を使用したい場合は、次のように引用します:

import querystring from 'query-string';

ただし、querystring を出力すると、クエリ文字列は未定義になります。どうやって解決すればいいでしょうか？エディターの方法はあくまで参考です

module.jsファイルを新規作成

import querystring from 'query-string';  export const qs = querystring;

utile.tsファイル

import { qs } from './module.js';

解決しました。 qs の印刷は未定義ではなくなり、qs ライブラリを通常どおり使用できるようになりました。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

フロントエンドにおけるHTMLの基礎知識

CSSフロートボックスモデルの位置

以上がvue で ts を使用するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。