TypeScript の簡単な紹介

TypeScriptは、Microsoft によって開発された JavaScript のスーパーセットです。Typescript は JavaScript と互換性があり、JavaScript コードをロードして実行できます。js と比較して、ts は、ストレージによってサポートされているオブジェクトと関数をコンパイラーが理解できるようにコメントを追加することで改良されています。コンパイラ オーバーヘッドを追加することなくコメントが削除され、完全なクラス構造を追加することで、従来のオブジェクト指向言語に合わせた最新の状態になります。

なぜ TypeScript があるのでしょうか?

JavaScript は単なるスクリプト言語であり、大規模な Web アプリケーションの開発用に設計されたものではありません。JavaScript にはクラスやモジュールの概念がありませんが、TypeScript は JavaScript を拡張してこれらの機能を実装します。TypeScript の主な機能は次のとおりです。

• TypeScript は、Apache ライセンス契約を使用して Microsoft によって開始されたオープンソース言語です。
• TypeScript は JavaScript のスーパーセットです。
• TypeScript はオプションの型、クラス、モジュールを追加します
• TypeScript は読みやすい標準 JavaScript にコンパイルされます
• TypeScript は大規模な JavaScript アプリケーションの開発をサポートします
• TypeScript は大規模なアプリケーションの開発用に設計されており、コンパイルされた JavaScript コードの互換性を保証します。
• TypeScript は JavaScript の構文を拡張するため、既存の JavaScript コードを変更せずに TypeScript で直接実行できます。
• TypeScript ファイルの拡張子は ts で、TypeScript コンパイラーはそれを js ファイルにコンパイルします。
• TypeScript の構文は JScript .NET と同じです
• TypeScript は学習と理解が簡単です

JavaScriptとTypeScriptの違い

TypeScript は、JavaScript の構文を拡張した JavaScript のスーパーセットであるため、既存の JavaScript コードは変更せずに TypeScript で動作できます。TypeScript は、型注釈を通じてコン​​パイル時の静的型チェックを提供します。TypeScript は既存の JavaScript コードを取得し、その中の TypeScript コードのみをコンパイルします。

TypeScript の利点

問題点の解決
TypeScript の設計は、弱い型と名前空間がないという JavaScript の「問題点」を解決します。これにより、プログラムのモジュール化が難しくなり、大規模なプログラムの開発には適していません。

構文のヒント プログラムを作成するときに、エディターはオブジェクト指向
プログラミングをより便利に実践できるように、正確な構文のヒントを提供します。

TypeScript の設計上のハイ
ライトの 1 つは、JavaScript の構文を放棄して新たに開始するのではなく、JavaScript のスーパーセットです。合法的な JavaScript ステートメントはすべて TypeScript で合法であり、JavaScript の使用習慣に従い、従来から学習コストは非常に低いと言えます。

問題点の解消

コンパイル時の強い型指定

TypeScript は、コンパイル時に強力な型判定を保証する一連の型メカニズムを設計しました。

簡単な例: 変数の型を宣言した後、他の型の代入を行うとコンパイル エラーが発生します。

興味深いことに、C# の var 変数宣言と同様に、TypeScript は割り当てられた変数の型を推測します。

例えば：

基本単位

TypeScript のキーワード module を使用すると名前空間と同様の効果が得られ、export により外部からアクセスするかどうかを制御できます。
例:

上記の例から、次のことがわかります。

モジュールはネストすることができ、アクセス時に区切り文字として . を使用することも、モジュールのネストを省略する区切り文字として . を使用することもできます。エクスポート キーワードを持つモジュールのみが外部からアクセスできます。モジュールはマージできますが、エクスポートされていないオブジェクトは他のオブジェクトにあり
ます
。 funcA() などの module は、同じ名前であってもアクセスできません。

TypeScriptの基本構文

TypeScriptのデータ型は、Boolean、Number、String、Array、Enum、Any、Voidの7種類に分類されます。

ブール型

数値タイプ

文字列型

配列型

Enum列挙型クラス

任意の不定型

ボイド型

親切

基本的な文法

// 通过class创建类
class Animal {
    
    
    // 类的属性
    name: string;
    // 类的构造器
    constructor(name: string) {
    
    
        this.name = name;
    }
    // 类的方法
    sayHello():void{
    
    
        alert("hello animal:"+this.name);
    }
}
// 实例化类
var tom = new Animal("tom");
tom.sayHello();

クラスの継承

// 通过class创建类
class Animal {
    
    
    // 类的属性
    name: string;

    // 类的构造器
    constructor(name: string) {
    
    
        this.name = name;
    }

    // 类的方法
    sayHello(): void {
    
    
        alert("hello animal:" + this.name);
    }
}

// 继承Animal
class Cat extends Animal {
    
    
    // 重写方法
    sayHello(): void {
    
    
        alert("hello cat:" + this.name);
    }
}

class Dog extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello dog:" + this.name);
    }
}

修飾子

class Animal {
    
    
    private name: string; // 这里把name修饰符改为private

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

    sayHello(): void {
    
    
        alert("hello animal:" + this.name);
    }
}

class Cat extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello cat:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    }
}

class Dog extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello dog:" + this.name); //这里会报错，因为无法引用父类private修饰的属性
    }
}

属性の修飾子をプライベートに変更すると、サブクラスの継承後にエラーが報告されます。では、どうすれば解決できるでしょうか？次のセクションを参照してください。

取得/設定アクセサー

class Animal {
    
    
    private name: string;

    get name(): string {
    
     //通过get和set解决子类不能引用父类private修饰的属性的问题
        return this.name;
    }

    set name(name: string) {
    
    
        this.name = name;
    }

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

    sayHello(): void {
    
    
        alert("hello animal:" + this.name);
    }
}

class Cat extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello cat:" + this.name); 
    }
}

class Dog extends Animal {
    
    
    sayHello(): void {
    
    
        alert("hello dog:" + this.name); 
    }
}

静的プロパティ

class Table {
    
    
    static width: Number = 100;
    static height: Number = 50
}

var width: Number = Table.width;

インターフェース

基本的な文法

interface Graphic {
    
    
    width: Number;
    height: Number;
}

class Square implements Graphic {
    
    
    width: Number;
    height: Number;

    constructor() {
    
    
        this.width = 100;
        this.height = 100;
    }

    constructor(width: Number, height: Number) {
    
    
        this.height = height;
        this.width = width;
    }
}

インターフェースを継承する

interface Graphic {
    
    
    width: Number;
    height: Number;
}

interface PenStroke {
    
    
    penWidth: Number;
}

interface Square extends Graphic, PenStroke {
    
    
    sideLength: number;
}

モジュール

モジュールの役割

名前空間の競合を防ぐには、
機能モジュールを異なるファイルに分割するのが簡単で、保守が容易になります。

基本的な文法

module MyDemo{
    
    
    export class Animal {
    
    
        private name: string;

        get name(): string {
    
     
            return this.name;
        }

        set name(name: string) {
    
    
            this.name = name;
        }

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

        sayHello(): void {
    
    
            alert("hello animal:" + this.name);
        }
    }

    export class Cat extends Animal {
    
    
        sayHello(): void {
    
    
            alert("hello cat:" + this.name);
        }
    }
}

エイリアス

module Shapes {
    
    
    export module Polygons{
    
    
        export class Square{
    
    }
        export class Triangle{
    
    }
    }
}

import polygons = Shapes.Polygons;
var sq = new polygons.Square(); //类似于 new Shapes.Polygons.Square()
var sq1 = new Shapes.Polygons.Square();

関数

基本的な文法

function add(x:number,y:number):number{
    
    
    return x+y;
}

var myAdd = function(x:number,y:number):number{
    
    
    return x+y;
}