JavaScript から TypeScript に移行するにはどうすればよいですか?

この記事の内容は、JavaScript から TypeScript に移行する方法についてです。一定の参考値があるので、困っている友人は参考にしていただければ幸いです。

typeScript を学びたい場合は、まずネイティブ JavaScript に習熟する必要があると思います。最も基本的な知識が最も重要で、次に ES5 ES6 ES7 をマスターする必要があります (その後、いくつかの知識を習得するのが最善です) 7). 新しいテクノロジーをマスターすれば、それほど疲れることはありません。 typeScript =type JavaScript、ES5/6/7 JavaScript に基づいて型を追加します!

TS は、インターフェイスや値の型とわずかに一致しない限り、JS と比較して非常に厳密です。パラメータの数が正しくない場合、または値が変更されて元の値の型が

一貫していない場合、エラーが報告されます。 npm を使用して typeScript をグローバルにインストールし、その後 tsc *.ts を使用して TS ファイルをコンパイルすることをお勧めします

'typeScript の新しいコア概念:'let app:string=2;このコードはエラーを報告します。値 2 は数値で、アプリは文字列型として指定されているため、TS

新しい値の型:

any: 任意の型を指定できます#でエラーが報告されます。 ##vold:空の戻り値の型 (関数 move():vold{} など) これは、この関数には戻り値がないことを意味します。any に変更された場合は、関数が返すどの型でも構いませんが、返さなければなりませんそれ以外の場合、TS はエラーを報告します

新しい概念: 型推論

let app = 'hello' ; app=1 ; TS はこれを let app として扱うため、このコードはエラーを報告します。 :string = 'hello'、再度

• app の値を変更するには、文字列型である必要があります。そうでない場合は、エラーが報告されます。これは型推論です。

Union 型です。

let app: string |number = 'hello' ; app = 1; app は共用体型変数であるため、このコードはエラーを報告しません。

文字列または数値、タイプのいずれかに一致する限りこれだけです。もちろん、さらに書くこともできます。
• Interfaceインターフェース（フロントエンドプログラマにとって理解しにくい点）

JavaScriptもオブジェクト指向言語ですが、ES5ではプロトタイプをベースに実装されており、 ES6 ではクラス class が使用されており、これにより

オブジェクト指向という用語がより明確に理解できるようになりますが、TS における実際のオブジェクト指向はより完全なものです。 、インターフェイスとクラスを通じて完成します。

オブジェクトは女性であると想像できます (TS の変数 let app に抽象化されます)

この女性を記述するためにインターフェイスを使用します (TS で let app を使用します: インターフェイス名 )

• 最後に、いくつかのメソッドを使用して女性の連絡先情報を取得します (これを実現するには、TS の class クラスのメソッドを使用します)
• 例:

• class ask{
  
      name:string;
      
      tel ? :number  ;   //这里为什么加问号，因为你不一定能拿到她的号码，如果拿不到，那么便可以不传参数，
      
      但是如果不加? ，你又没那么号码，那么你没有参数传进来，TS就会报错 
      
      age:number ;
      
      constructor(name,age,tel){
           this.name=name;
           this.age=age;
           this.tel=tel
      }
  }
  
  interface check {
  
      name : string;
      
      age:number;
      
      tel ? :number;  
      
  }
  
  let woman :check = new ask ('rose',20,1888888888);//假设你拿到美女所有资料 传入构造函数

This console.log(women) を出力して、それがどのようなものであるかを確認できます。上記のコードにはエラーはありません。

上記のコードが tsc コマンドを通じて JS ファイルにコンパイルされた後、

• var ask = /* @class / (function () {
  function ask(name, age, tel) {
  
  
      this.name = name;
      
      
      this.age = age;
      
      
      this.tel = tel;
      
      
  }
  return ask;
  }());
  let woman = new ask('rose', 20, 1888888888);
  console.log(woman)

  "ここで注意すべき点は、多くの TS コードを実行した後です。 const enum 列挙、インターフェイスなどの JS ファイルに表示されます。もちろん、「

タプルの概念

配列」がさらに登場します。 JS 以降. 大量のコンテンツを保存できます. いわゆるタプルは、実際にはさまざまなデータ型の配列です

[1,'1',true,false] 実際、これはタプルです。しかし、呼び方が違います。
• enumeration enum と const enum の違い

enum app { red, blue, yellow, deeppink }

• console.log( app.red, app.blue, app.pink, app.deeppink) // 出力 0,1,2,3

enum app2 { red = 2, blue, ピンク, deeppink }

• console.log(app2.red, app2.blue, app2.pink, app2.deeppink) // 出力 2,3,4,5
• 列挙のデフォルトの最初のもの値は 0 です。自分で定義することもできます。カスタマイズがシステムのデフォルトと競合する場合、TS はそれを認識せず、
• はエラーを報告しませんが、そうすることはお勧めしません。結局のところ、誰も大丈夫です。トラブルを探していますか？

定数列挙型

const enum Directions {
Up,
Down,
Left,
Right
}
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right]; 
// 结果是 0 1 2 3

* もあります。これに計算メンバーが含まれる場合、コンパイル段階でエラーが報告されます。

* const enum Color { Red, Green , Blue = "blue".length};
* 定数列挙と通常の列挙の違いは、定数列挙はコンパイル段階で削除され、計算されたメンバーを含めることができないことです。試してみるとわかります。

クラスとインターフェイス (最も重要なものの 1 つ)

* クラスは一度に 1 つのインターフェイスのみを継承できますが、一度に複数のインターフェイスに対応できます。

# 複数のクラスの継承を実装する場合は、サブクラスを使用して他のクラスを継承し、サイクルが継続します。

interface check {
name: string;
age: number;
hobby: Array<number>
fuck: number[]   //这两种写法是一样的
}

class exp implements check {
name: string
age: number
hobby:Array<number>
fuck: number[]
constructor(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
}
let app = new exp('hello', 18, [1, 2, 3], [2, 3, 4])

------TS コンパイル後、

# が得られます。 ##

var exp = /* @class / (function () {
function exp(name, age, hobby, fuck) {
    this.name = name;
    this.age = age;
    this.hobby = hobby;
    this.fuck = fuck;
}
return exp;
}());
var app = new exp('hello', 18, [1, 2, 3], [2, 3, 4]);

typeScript はおそらく最も難しいです それがエレガントなオブジェクト指向プログラミングを理解する方法です. インターフェイスは説明のためだけです.

実際に実装するには, それを実装するクラスが必要です. ES6 typeScript では非常に重要な役割を果たします。

したがって、まずネイティブ JavaScript ES6 を学習してから、typeScript を学習することをお勧めします。そのほうがはるかに簡単です。

この記事はここで終了しています。さらに興味深いコンテンツについては、PHP 中国語 Web サイトの JavaScript チュートリアル ビデオ 列に注目してください。

以上がJavaScript から TypeScript に移行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。