TypeScriptの基本的な使い方を実列で説明する

TypeScriptはマイクロソフトが開発したJavaScriptのスーパーセットで、TypeScriptはJavaScriptと互換性があり、JavaScriptコードをロードして実行することができます.TypeScriptがJavaScriptと比較して進歩した点は、サポートされているオブジェクトと関数をコンパイラに理解させるために注釈を追加し、コンパイラが注釈を削除し、オーバーヘッドを増加させないことです.完全なクラス構造を追加し、従来のオブジェクト向け言語を更新します.
JavaScriptのTypeScriptの違いTypeScriptはJavaScriptのスーパーセットであり、JavaScriptの構文が拡張されているため、既存のJavaScriptコードはTypeScriptと一緒に作業することができ、何の修正も必要なく、TypeScriptはタイプ注釈によってコンパイル時の静的タイプチェックを提供する.TypeScriptは、既存のJavaScriptコードを処理し、その中のTypeScriptコードのみをコンパイルすることができます.
私はシラサギエンジンを使ってゲームを開発することにしました.ゲームを開発する前にType Scriptを勉強して、現在その可視化ツールはすでにマルチエンドパッケージを作ることができます.
Egretは完全なHTML 5ゲーム開発ソリューションです.Egretには複数のツールとアイテムが含まれています.Egret EngineはTypeScript言語に基づいて開発されたHTML 5ゲームエンジンで、このプロジェクトはBSDライセンスの下で発表されています.
1.文字列の新しい特性``
1.文字列の改行

var content = `1111 
22222`

2.文字列テンプレート

var name = "   "
var getName = function(){
    return "  "
}
console.log(`  ${name}  ${getName()}`)//  ：         

文字列テンプレートは、変数を使用するために広く使用しないでください.また、関数呼び出しを使用するために広く使用します.
文字列の自動分割

function test(tp,name,age){
   console.log(tp)
   console.log(name)
   console.log(age)
}
   var myname = '   '
   var getAge = function(){
   return 18;
}
test`  ,${myname},  ${getAge()}`

戻り値:
2.パラメータの新しい特性
1.パラメータタイプ:

var name :string = '   ' //           
var alias :any = 'all' //any           
var age :bumber = '25' //          
var man : boolean = true //           
function test(): void{} //void        
function test(): string{} //             
function test(name:string): string{} /           

変数宣言タイプに加えて、関数宣言タイプにも関数宣言タイプにも広く適用されます.
2.カスタムタイプ

class Person{
    name:string;
    age:number;
} 
var name : Person= new Person();
//                ,           ，     

3.パラメータのデフォルト

function test(a:string,b:string,s:string = 'C'){
    console.log(a)
    console.log(b)
    console.log(c)
}

test('A','B','C')/出力A B Ctest('A','B')/出力A B C
注意:typescriptではパラメータが完全に伝達されず、例外が放出されるため、デフォルト値のパラメータ宣言は後にあります.
4.オプションのパラメータ

function test(a:string,b?:string,s:string = 'C'){
    console.log(a)
    console.log(b)
    console.log(c)
}

test('A')/出力A undefined C
注:同じように、オプションパラメータは必須パラメータの後に宣言されます.
5.オペレータ-ワイヤレスパラメータ

function test(...args){
    args.forEach(function(arg){
        consloe.log(arg)
    })
}

test(1,2,3)//出力1 2 3
test(1,2,3,4,5)/出力1 2 3 4
6.オペレータ-固定パラメータ

function test(a,b,c){
   console.log(a)
   console.log(b)
   console.log(c) 
}
var args = [1,2]
test(...args) //   1 2 undefined 
var args2 = [4,5,6,7,8,9]
test(...args2) //   4 5 6

7.genertor関数

function* test(){
    console.log(1)
    yield;
    console.logg(2)
}
var fun1  = test();
fun1.next(); //  next,   1
fun1.next(); //       2 

function* test(){
    while(true){
        yield Math.random()*1000
    }
}
var p = test()
var limitPrice = 15
var price = 100
while(price > limitPrice ){
   price  =  p.next().value
   console.log(`   ${price}`) 
}
console.log(`      ${price}`) 

ランダム出力:
8.構造式-オブジェクト

function test(){
    return{
        code:'100'，
        peice:'1000',
        obj:{
            a:2000,
            b:3000
        }
    }
}
var {code,peice} = test()
console.log(code) //  100
console.log(peice) //  1000

var {code：codex,peice} = test()
console.log(codex) //  100
console.log(peice) //  1000

var {code,peice,obj} = test()
console.log(obj) //  object  

var {code,peice,obj:b} = test()
console.log(b) //  3000

注意:解析された変数変数は、関数が返す値と同じです.
9.構造式-配列

var arr1 = [1,2,3,4]

var [number1,number2] = arr1 
console.log(number1) //   1
console.log(number2) //   2

var [,,number1,number2] = arr1 
console.log(number1) //   3
console.log(number2) //   4

var [number1,,,number2] = arr1 
console.log(number1) //   1
console.log(number2) //   4

var [number1,number2,...others] = arr1 
console.log(number1) //   1
console.log(number2) //   2
console.log(others) //   3 4

      
function test([number1,number2,...others]){
    console.log(number1)
    console.log(number2)
    console.log(others)
}
test(arr1 )//    1 2 [3,4]

プロファイル式は、より少ないコードを書くことができます.
3.矢印式
1.1行矢印:

 var foo = (arg1,arg2) => arg1 + arg2;
 //        
 var foo = function (arg1, arg2) { return arg1 + arg2; };

2.パラメータなし:

 var foo = () => {} 
 //        
 var foo = function () {}

単一パラメータ

var fn = x => x * x;

これは

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this  obj  
        return fn();
    }
};
obj.getAge(); // 25

矢印関数を使用して、コードの読み取りと理解を向上させる
3.for inとfor of
for in

var myArray=[1,2,4,5,6,7]
myArray.name="   "
for (var index in myArray) {
  console.log(myArray[index]);
}

for of

var myArray=[1,2,4,5,6,7]
myArray.name="   ";
for (var value of myArray) {
  console.log(value);
}

for inは配列のインデックス(すなわちキー名)を遍歴し、for ofは配列要素値を遍歴する.for ofは配列内の要素のみを遍歴し,配列のインデックスnameを含まない
4.クラス
1.クラスの作成

class Test{
    name;
    eat(){
        console.log('     ')
    }
}

var p1  = new Test();
p1.name = 'a'
p1.eat()

var p2  = new Test();
p2.name = 'b'
p2.eat()

同じクラスの中でnewの複数の実列ができて、複数の実列はすべて同じ属性と方法があって、ただ状態が異なるだけです
アクセス制御子

class Test{
    private name;//      
    public eat(){ //      
        console.log('     ')
    }
}

クラスの作成時、デフォルトはpublicprivateキーワードでプライベートを宣言し、クラスの内部でのみprotectedを使用して保護され、クラスとクラスのサブクラスでのみ使用されます.
コンストラクタ

class Test{
    name
    constructor(){
        this.name = '   name '
    }
            =>
    //constructor(public name:string='   name '){
    //   
    //}
    
    eat(){
        console.log(this.name)
    }
}

コンストラクション関数(constructor)は1回のみ呼び出されます
クラスの継承

//  
class Test{
  constructor(public name:string){
      this.name = '   name '
  }
  eat(){
     console.log('      ')       
  }    
}
//  
class Pest extends Test{
  constructor(name:string,code:string){
      super(name);
  }
  tat(){
      super.eat() //super        
  }
}
var p = new Pest('')
p.tat() //  ：      

super 1.サブクラスコンストラクション関数は、親コンストラクション関数を呼び出す必要があります.2.super広以来の親メソッドの呼び出し
汎用<>

var qsts : Array  = []
qsts[0] = new Test('')
qsts[1] = new Pest('')
//       Test     

インターフェイス

interface ITest(){
    name:string,
    age:number
}
class Test(){
  constructor(public config:ITest){
     
  }  
}
var p1  = new Test({
    name:"   ",//                 
    age:'18'
})

インタフェースは,属性を明らかにする以外にも広く方法を明らかにする.

interface ITest(){
    eat()
}
class Test extends ITest(){
 eat() 
}
class Pest extends ITest(){
 eat() 
}

*ITestインタフェースのカスタマイズを実装するすべてのクラスはeat()を実装する必要があります.
モジュールexport:モジュールを定義するために使用され、オブジェクト、関数、クラス、文字列などをエクスポートできます.mport:インポートに使用されるものもasで名前を変更することもできます.注意:通常の開発でexport defaultが見られる可能性があります.exportとexport defaultの違いは、前者がエクスポートしたものはインポート時に{}を追加する必要がありますが、後者は必要ありません.