es6プロジェクトの改修タイプスクリプトの問題メモ(継続的に更新)

1. typescriptを使用する理由

typescript主に複雑なアプリケーションのプログラミングソリューションに使用されます。弱い型のjavascriptがこの複雑なアプリケーションプログラミング環境に対応できない場合。使用を検討しますtypescriptたとえば、SDKパッケージ、クラスライブラリの記述など。
もちろん、書かれたコードブラウザは直接実行することはできず、コンパイラとパッケージツールに依存する必要があります。ここではを使用していrollupます。rollupクラスライブラリのパッケージ化は非常に柔軟です。以前にes6 + classプログラミング方式を使用したことがある場合はtypescript、プラグインをインストールして構成するだけで済みます。

第2に、typescriptIDEのエラープロンプトも非常にユーザーフレンドリーであり、一目で理解できるため、これは個人が非常に気に入っている方法です。
ここに画像の説明を挿入
以前にjava、c#などの強く型付けされた言語を使用したことがある場合は、すぐに使い始めることができます。

2. javascriptからtypescriptへ

それrollup使用する開発者向け元のプラグイン構成にプラグrollup-plugin-typescriptインを追加するだけです。もちろん、プラグインは最も基本的なtypescriptパッケージ(コアコンパイラ)とtslibパッケージ(コア依存)に依存しています

npm install --save-dev rollup-plugin-typescript typescript tslib

次に、プラグインを構成します。
ここに画像の説明を挿入
次に、プロジェクト内のすべての.js終了ファイル終了ファイル置き換えました.ts次に、IDEのプロンプトに従って、エラーを1つずつ変更します。

3、問題の記録を修復する

次に、変更プロジェクト中に発生した問題を記録します。

クラス1の使用

1.1クラス宣言

これを直接割り当ててクラス変数を宣言する元の方法は適用されなくなります。クラスの先頭で変数を宣言してから、その型を設定する必要があります。
ここに画像の説明を挿入
着替える:

ここに画像の説明を挿入
最初に宣言する必要があります。再利用。

1.2修飾子の使用

元ES6クラスの構文がサポートされていないprivatepublicprotected、このようなキーワードの使用など。これで、typescriptで使用できます。これは、クラスの内部変数と継承の使用を公開したくない場合に非常に良い意味と効果があります。

たとえば、元々はこのようなプライベート変数(関数)を書きました。これは単に自分をだますことです。この_init関数は引き続き外部からアクセスできるためです。
ここに画像の説明を挿入

これで、次の
ここに画像の説明を挿入
ように記述できます。外部から_init関数にアクセスできません。もちろん、これはコンパイル段階に限定されます。コンパイル後に生成されたオブジェクトでは、クラスオブジェクトを通じて_init関数にアクセスできます。(Tucao、tsはクロージャーの形で処理を実行できるはずです)

たとえば、このtsコード

class A{
    private name: string;

    constructor(name){
        this.name=name;
    }

    print(){
        this.console();
    }

    private console(){
        console.log(this.name);
    }
}

let a=new A('jc');
a.print();

コンパイル後:

var A = (function () {
    function A(name) {
        this.name = name;
    }
    A.prototype.print = function () {
        this.console();
    };
    A.prototype.console = function () {
        console.log(this.name);
    };
    return A;
}());
var a = new A('jc');
a.print();

TypeScriptはプライベート属性と関数の処理を行わないことがわかりますが、プライベート変数が外部からアクセスされると、コンパイル中にエラーが報告されます。TypeScriptは、コンパイルプロセスの下部でプライベート変数の検査を実装していることがわかります。

私の意見では、プライベート変数のコンパイルはクロージャーの形で実現できます。

var A = (function () {
    var name = ""
    function A(name) {
        name = name;
    }
    A.prototype.print = function () {
        this.console();
    };
    A.prototype.console = function () {
        console.log(name);
    };
    return A;
}());
var a = new A('jc');
a.print();

tsがこれを行わないのはなぜですか?理由は明確ではありません。修飾子については、公式ウェブサイトを参照してください

2インターフェースの使用。

単純な例を使用して、tsでのインターフェースの使用を示します。元のJavaScriptの場合、プラグインの作成経験がある場合は、通常、次のコードが表示されます

function setConfig(config)
{
	var defaults = {
		color:'red',
		num:2,
		length:15
	}
	var opts = $.extend(true,defaults,config)
}

プラグインのデフォルトオプションをいくつか提供します。次に、マージオプションを使用してプラグインアプリケーションの構成アイテムを確認します。その場合、構成アイテムはオブジェクトオブジェクトです。ユーザーが渡すものを制限できない、またはユーザーが何を渡すかわからない。現時点ではtypescriptinterfaceインターフェースを使用できます。

interface MyConfig
{
	color:string,
	num:number,
	length:15
}

上記のコードはインターフェイスタイプを定義し、MyConfig次のようにトップコードを変更します。

function setConfig(config:MyConfig) : void
{
	var defaults:MyConfig = {
		color:'red',
		num:2,
		length:15
	}
	//--合并选项
}

このようにして、ユーザーが正常に動作するためには、上記で指定したタイプを渡す必要があると規定できます。もちろん、パラメータは固定されていません。インターフェイスの定義を次のように変更するだけです。

interface MyConfig
{
	color?:string,
	num?:number,
	length?:15
}

このようにして、ユーザーは定義されたインターフェースで任意の属性を自由に転送できます。
もちろん、これはインターフェースを使用する最も簡単な方法の1つにすぎません。詳しくは公式サイトをご覧ください

3オブジェクト属性の割り当て

JavaScriptでは、多くの場合、空のオブジェクトを宣言してから、このプロパティに値を割り当てます。ただし、この操作をTypeScriptに配置すると、エラーが発生します。

let a = {};
a.b = 1;
// 终端编译报错:TS2339: Property 'b' does not exist on type '{}'.
// 编辑器报错:[ts] 类型“{}”上不存在属性“b”。

これは、TypeScriptでは宣言されていないプロパティを追加できないためです。

したがって、このエラーを解決するには2つの方法があります。

1オブジェクトに属性定義を追加します(推奨)。具体的な方法は次のとおりです。leta = {b:void 0};。この方法は、根本的に現在の問題を解決でき、オブジェクトの任意の割り当ての問題も回避できます。

2オブジェクトに属性を追加します(緊急時)。具体的な方法は次のとおりです:a:any = {};。このメソッドを使用すると、TypeScriptは型チェック中にこのオブジェクトを無視できるため、コンパイルはエラーなしで成功します。この方法は、多数の古いコード変換に適しています。

これは、ツール関数のエクスポートに問題があります。

4サードパーティライブラリの使用と参照

typescriptで、サードパーティのライブラリを参照する場合、すべてのライブラリに必須のタイプを指定することは不可能であるため、IDEはそれを知らないため、エラーを表示します。エラーを報告します。typescrptにこの種のライブラリを知らせるために、.d.tsこの種の記述ファイルがあります。ファイルが正しくインポートされると、typescriptはライブラリを認識できます。次に、文法プロンプト、関数パラメーターの説明、およびその他の関数があります。しかし、サードパーティのライブラリ記述ファイルは開発者が作成することが不可能であるため、typescriptは3つのプロセス(DefinitelyTypedから型付けまでtypescript2.0最後に@types)を経て、最終@types的に方法が完成しました。@typestypescriptコンパイラnode_modulesディレクトリ.d.ts内の記述ファイルを自動的に認識させる方法です。例としてjqueryライブラリーの紹介を見てください。プロジェクトディレクトリで実行するだけ

npm install @ types / jquery --save

node_modules@ types / jqueryフォルダーディレクトリに自動的に生成
ここに画像の説明を挿入
できるため、コードで$を使用できます。

import $ from 'jquery'
//--
       $.extend;
 //--
};;

VScodeプロンプト画像を投稿する:
ここに画像の説明を挿入
メソッド関数の説明は非常に明確です。

5、ActiveXObjectが見つからない場合の対処方法

@typesを使用する

npm install --save-dev @types/activex-excel

常に更新しています...

おすすめ

転載: blog.csdn.net/qq_29722281/article/details/95306173