TypeScript構文の基本

2012年に、MicrosoftのC＃開発者はJavaScriptのスーパーセットであるTypeScriptを作成しました。 10万行から大規模なアプリケーションを開発するように設計されています。 TypeScript構文の例、その主な長所と短所を見て、人気のあるライブラリと対話する方法を分析しましょう。



この恩恵を受けるのは誰ですか ：TypeScriptの実用的なアプリケーションに興味のあるWeb開発者とクライアントアプリケーション開発者。



JavaScriptでコンパイルされたコードを作成できるさまざまなツールがあります。CoffeeScript、Dart、Uberscriptなどです。 これらには、JavaScriptに固有のいくつかの欠点を修正できるTypeScriptプログラミング言語が含まれます。

JavaScriptの欠陥

• モジュール性の欠如-大きなファイルの競合が原因で問題が発生する場合があります。
• 不正な行動。
• 動的型付け-IntelliSenseはありません。そのため、書き込み中にどのエラーが発生するかはわかりませんが、プログラムの実行中にのみ表示されます。

TypeScriptの主な利点

• 静的タイピング。
• 良いjavascriptにコンパイルします。
• 開発者向けのツールの可用性。
• ネイティブコードは読みやすく、理解しやすいです。
• TypeScriptは、Visual Studio、PHP Storm、その他のIDEなど、多くの開発ツールでサポートされています。
• ECMAScript 6.0がサポートされています。
• コンパイラは、コンパイルする前に型の不一致エラーを見つけてスローします。

TypeScriptがサポートするタイプタイプ

1. 数
2. ひも
3. ブール値
4. 配列
5. 列挙型
6. どれでも
7. ボイド

これらは、変数、関数、クラス、ジェネリック型、およびその他の構造を宣言するために使用されます。

機能

関数パラメーターは、オプションとデフォルトに分けられます。

• オプションのパラメーター
  
  function _ (_?:): __


  
  
  
  
• デフォルト設定
  
  function _ (_?: = ""):__


  
  
  
  
• 同じタイプのパラメーター
  
  function _ (..._?: ):__


  
  
  
  

C＃と同様に、変数の後の疑問符は、その値を省略できることを意味します。

関数宣言

 [csharp] function getCarName(manufacturerName: string, model?: string): string { if (model) { return manufacturerName + " " + model; } return manufacturerName; } [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コールバック関数

関数をパラメーターとして渡すこともできます。

 [csharp] function numberOperation(x: number, y: number, callback: (a: number, b: number) => number) { return callback(x, y); } function addCallBackNumbers(x: number, y: number): number { return x + y; } function multiplyNumbers(x: number, y: number): number { return x * y; } console.log(numberOperation(5, 5, addCallBackNumbers)); // 10 console.log(numberOperation(5, 5, multiplyNumbers)); // 25 [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

numberOperation



関数を呼び出して、2つのパラメーターと関数をコールバックとして渡します。

関数の組み合わせとオーバーロード

厳密なタイピングにもかかわらず、TSには、異なるタイプの転送された値で同じ関数を使用する機能があります。 たとえば、渡された値のタイプに応じて、1つの関数が数値を連結し、2番目の関数が加算します。

 [csharp] // 2      function addOvverload(x: string, y: string): string; // 2  int   int  function addOvverload(x: number, y: number): number; function addOvverload(x, y): any { return x + y; } [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おっと。 クラス

Class _ {





;





();





constructor(); }

 [csharp] class Car { var mazda = new Car(1, "Mazda", "6"); console.log(mazda.getCarInfo()); class Car { //    id: number; name: string; model: string; //  ,   constructor(carId: number, carModel: string, model: string) { this.id = carId; this.name = carModel; this.model = model; } //      getCarInfo(): string { return "Car model = " + this.name + " model= " + this.model; } } var mazda = new Car(1, "Mazda", "6"); console.log(mazda.getCarInfo()); [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おっと。 静的プロパティと関数

staticキーワードは、静的な関数とプロパティを定義するために使用されます。

 [csharp] class Formula { static PI: number = 3.14; static Half = 0.5; //    static getircleSquare(radius: number): number { return this.PI * radius * radius; } //    static getTriangleSquare(length: number, height: number): number { return this.Half * length * height; } } // .   Formula    var circle = Formula.getircleSquare(16); var triangle = Formula.getTriangleSquare(4, 7); console.log("  = " + circle); console.log("  = " + triangle); [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おっと。 継承

OOPの重要な要素の1つは継承であり、これはextends



を使用してTSに実装されます。 extends



を使用すると、基本クラスから継承し、クラスを継承者として記述することができます。

 [csharp] interface IAnimal { //   —      name: string; danger: number; getInfo(): void; } class Animal implements IAnimal { //     IAnimal name: string; danger: number; constructor(name: string, danger: number) { this.name = name; this.danger = danger; } getInfo(): void { console.log(" . : " + this.name + ", : " + this.danger); } } class Fox extends Animal { tailLength: number; constructor(name: string, danger: number, tailLength: number) { super(name, danger); this.tailLength = tailLength; //   super —    , //        , //      . } getInfo(): void { super.getInfo(); console.log(" .  : " + this.tailLength + " "); } } var goose: Animal = new Animal("", 1); goose.getInfo(); var fox: Animal = new Fox("", 10, 1); fox.getInfo(); [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おっと。 インターフェース

インターフェイスは、TSだけでなく、TSに実装されていないカスタムデータ型を定義するために使用されます。 インターフェイスを宣言するには、キーワードInterface



ます。

 [csharp] module InterfaceModule { //   IAnimal         //        . interface IAnimal { name: string; danger: number; getInfo(): string; } class Animal implements IAnimal { name: string; danger: number; constructor(name: string, danger: number) { this.name = name; this.danger = danger; } getInfo(): string { return this.name + " " + this.danger; } } var seal: IAnimal = new Animal("", 1); console.log(seal.getInfo()); } [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おっと。 カプセル化

オブジェクトの状態への外部アクセスを隠し、この状態へのアクセスを制御するために、TSはpublic



とprivate



2つの修飾子を使用します。



クラス内では、外部からアクセスできないメソッドを記述し、それらの助けを借りて操作できます。



これはC＃のように実装されます。

 [csharp] module Encapsulation { class Animal { private _id: string; name: string; danger: number; constructor(name: string, danger: number) { //    _id     . this._id = this.generateGuid(); this.name = name; this.danger = danger; } private generateGuid(): string { var d = new Date().getTime(); var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } public getInfo(): string { return "Id = " + this._id + " name = " + this.name + " danger = " + this.danger; } } var parrot: Animal = new Animal("", 1); console.log(parrot.getInfo()); [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、 generateGuid()



メソッドへのアクセスを制限しました。 デフォルトでは、フィールドとメソッドにはパブリックアクセスがあります。

おっと。 ジェネリック

TypeScriptを使用すると、ジェネリック型を作成できます。



function _(_: ):





ここで、Tは、関数が入力される型です。 TSは、インターフェイスとクラスの入力もサポートしています。



Class _





Interface _





ここで、Tは、関数が入力される型です。

 [csharp] module GenericModule { function getId<T>(id: T) : T { return id; } // Generic  Animal,      generic    id class Animal<T> { private _id: T; constructor(id: T) { this._id = id; } getId(): T { return this._id; } } var cat = new Animal<number>(16); console.log("Cat id = " + cat.getId()); var dog = new Animal<string>("2327c575-2f7c-46c3-99f2-a267fac1db5d"); console.log("Dog id = " + dog.getId()); } [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タイプを転送し、IDを設定してタイプを決定し、動物に情報を返します。 したがって、ジェネリック型が使用されます。

モジュール

JavaScriptの欠点の1つは、多数のファイルが互いに交差する可能性があり、固有の競合があることです。 TypeScriptでは、モジュールがこの問題を解決します。



モジュールは、クラス、列挙、変数、関数、およびその他のモジュールを定義できる名前空間です。 クラス、インターフェイス、関数の任意のセットは、いくつかのブラケットで結合され、特定のモジュールと呼ばれます。 そして、このモジュールを使用すると、簡単かつ簡単に対話できます。



モジュールを定義するには、moduleキーワードを使用します。

 [csharp] import test = MyTestModule.MyTestClass; module CarModule { //   CarModule     iCar. export interface ICar { //   export    ,         .     export,        CarModule. id: number; carModel: string; model: string; getCarInfo(): string; } export class Car implements ICar { //   Car,    ICar id: number; carModel: string; model: string; //     ,  IntelliSence   ,     model constructor(carId: number, carModel: string, model: string) { this.id = carId; this.carModel = carModel; this.model = model; } getCarInfo(): string { var t = new test().getInfo(); return "Car model = " + this.carModel + " model= " + this.model + " " + t; } } } let car = new CarModule.Car(16, "", "2107"); console.log(car.getCarInfo()); [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

用語の変更：TypeScript 1.5以降、命名法が変更されていることが重要です。 ECMAScript 2015の用語との不一致を避けるため、「内部モジュール」は「名前空間」として知られるようになり、「外部モジュール」は単に「モジュール」になりました。 つまり、モジュールX {は、より優先されるネームスペースX {と明確に一致します。

ヘッダーファイル

一部のグローバル変数とバインドするには、ヘッダーファイルを含める必要があります。これはTypeScriptの欠点の1つです。 TSの外部JavaScriptスクリプトファイルにリンクするには、拡張子が* .d.tsの宣言ファイルまたはヘッダーファイルを使用する必要があります。



メインライブラリのヘッダーファイルは既に説明されており、非常にシンプルで簡単に操作できます。 これを行うには、サイトにアクセスして、jQueryなどの目的のヘッダーファイルセットを接続します。 次に、jQueryで使用される主要なグローバル変数が宣言され、後でTSファイルで使用されます。

 [csharp] /// <reference path="../lib/typings/jquery.d.ts" /> class Cars { private cars: Array<Car> = new Array<Car>(); load(): void { $.getJSON('http://localhost:53923/api/Car', (data) => { this.cars = data; alert(' '); }); } displayUsers(): void { var table = '<table class="table">'; for (var i = 0; i < this.cars.length; i++) { var tableRow = '<tr>' + '<td>' + this.cars[i].id + '</td>' + '<td>' + this.cars[i].name + '</td>' + '<td>' + this.cars[i].model + '</td>' + '</tr>'; table += tableRow; } table += '</table>'; $('#content').html(table); } } window.onload = () => { var cars: Cars = new Cars(); $("#loadBtn").click(() => { cars.load(); }); $("#displayBtn").click(() => { cars.displayUsers(); }); }; [/csharp]
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TypeScriptの欠点

• DefinitelyTyped-場合によっては、人気のあるライブラリがありません。
• .ts .d.ts .map-tsファイルのコンパイル後の多数の追加ファイル。
• 暗黙的な静的型付け。 any型の変数を宣言した場合、静的型付けの利点は得られません。

TypeScriptの利点

• 厳密なタイピング。 大きなメリットは、IntelliSenceです。これは、コンパイル段階でエラーを示し、実行段階の前に修正できます。
• おっと。 OOPのすべての基本原則により完全にサポートされています。
• JavaScriptのスーパーセット。 JavaScriptからコードをコピーしてTSに貼り付けるだけで機能します
• 複雑なソリューションの開発。 モジュール性のサポートにより、大規模な開発チームは大規模なアプリケーションを作成できます。

ツール

• Visual Studio 2015。
• WebStorm、Eclipse。
• 基本的なチップhttps://github.com/DefinitelyTyped/DefinitelyTyped

おわりに

TypeScriptは、既存のコードとの互換性を維持しながら、開発チームの生産性を大幅に向上できる優れたラッパーです。 TypeScriptはVisualStudio 2015でサポートされ、ECMAScript 6.0と相互作用します。 JavaScriptには強力な型付けはありませんが、TypeScriptは優れた代替手段であり、その使用には多大な時間を費やす必要はありません。