1. typescriptを使用する理由
typescript
主に複雑なアプリケーションのプログラミングソリューションに使用されます。弱い型のjavascriptがこの複雑なアプリケーションプログラミング環境に対応できない場合。使用を検討しますtypescript
。たとえば、SDKパッケージ、クラスライブラリの記述など。
もちろん、書かれたコードブラウザは直接実行することはできず、コンパイラとパッケージツールに依存する必要があります。ここではを使用していrollup
ます。rollup
クラスライブラリのパッケージ化は非常に柔軟です。以前にes6 + classプログラミング方式を使用したことがある場合はtypescript
、プラグインをインストールして構成するだけで済みます。
第2に、typescript
IDEのエラープロンプトも非常にユーザーフレンドリーであり、一目で理解できるため、これは個人が非常に気に入っている方法です。
以前に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クラスの構文がサポートされていないprivate
、public
、protected
、このようなキーワードの使用など。これで、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)
}
プラグインのデフォルトオプションをいくつか提供します。次に、マージオプションを使用してプラグインアプリケーションの構成アイテムを確認します。その場合、構成アイテムはオブジェクトオブジェクトです。ユーザーが渡すものを制限できない、またはユーザーが何を渡すかわからない。現時点ではtypescript
、interface
インターフェースを使用できます。
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
的に方法が完成しました。@types
typescriptコンパイラに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
常に更新しています...