なぜWebアプリケーションの開発にTypeScriptを使うのか？

I. TypeScriptとは

TypeScriptJavaScriptのスーパーセットです。

次に、TypeScriptの歴史について簡単に説明します。

III. TypeScriptを使う理由

• TypeScriptはJavaScriptのコードを単純化し、読みやすく、デバッグしやすくします。
• TypeScriptオープンソースです。
• TypeScript は、JavaScript の理想と実践のための効率的な開発ツールを提供します。
• TypeScriptはコードを読みやすく、理解しやすくします。
• TypeScriptを使うことで、通常のJavaScriptを大幅に改善することができます。
• TypeScriptは、ES6のすべての利点を提供するだけでなく、生産性も向上させます。
• TypeScriptは、コードの型チェックを行うことで、JavaScriptを記述する際にしばしば遭遇する手痛いエラーを回避するのに役立ちます。
• ジェネリックを含む強力な型システム。
• TypeScriptはJavaScriptにいくつかの機能を追加したものに過ぎません。
• TypeScriptのコードは、最新のブラウザをサポートするためにES5およびES6標準にコンパイルすることができます。
• 互換性のために ECMAScript に合わせました。
• JavaScriptで始まりJavaScriptで終わります。
• 静的な型がサポートされています。
• TypeScriptは開発者の時間を節約します。
• TypeScriptES3、ES5、ES6のスーパーセットです。

• オプションの引数を持つ関数。
• REST パラメータを使用する関数。
• 汎用的なサポート
• モジュールのサポート

IV.雄牛は語る

• 「TypeScriptには、私が気に入っている点がたくさんあります。"-ブラッド・グリーン、エンジニアリング・ディレクター、Angular"
• Ionicの主な目標の1つは、ツールがTypeScriptをサポートし、自動補完、型チェック、ソースドキュメントを提供することです。"-ティム・ランシナ、ツール開発者、Ionic"
• TypeScriptは、モダンなWebアプリケーションやJavaScriptベースのアプリケーションを書くときの賢い選択です。TypeScriptの注意深く考慮された言語機能と機能、そして常に改善され続けるツールは、非常に生産的な開発体験をもたらします。-アーロン・コーネリアス、エピックフェロー"
• TypeScriptは、C#と同じ素晴らしい開発体験を提供することで、同じチームのスピードを維持するのに役立っています......通常のJavaScriptよりも大きな改善です"-バリオ・ストイチェフ、PMリード-NativeScript"

V. 意外と知らないTypeScriptのトップ機能

class CustomerModel {
 customerId: number;
 companyName: string;
 contactName: string;
 country: string;
}
class CustomerOperation{
 addCustomer(customerData: CustomerModel) : number {
 // ユーザーを追加する
 let customerId = 5;// 保存後に返されるID
 return customerId;
 }
}

インターフェイス

interface ITax {
 taxpayerId: string;
 calculateTax(): number;
}
class IncomeTax implements ITax {
 taxpayerId: string;
 calculateTax(): number {
 return 10000;
 }
}
class ServiceTax implements ITax {
 taxpayerId: string;
 calculateTax(): number {
 return 2000;
 }
}

class Customers{
 public companyname:string;
 private country:string;
}

class Employee{
 Firstname:string;
}
class Company extends Employee {
 Department:string;
 Role:string
 private AddEmployee(){
 this.Department="myDept";
 this.Role="Manager";
 this.FirstName="Test";
 }
}

function identity<T> (arg: T): T {
 return arg; 
}
// 汎用的な実装を示す例
let output = identity <string>("myString");
let outputl = identity <number> (23);

let testnumber: number = 6;
testnumber = "myNumber"; // そのため
testnumber = 5; // そのため、以下のことが可能になる。

let isDone: boolean = false;
isDone = "345"; // そのため
isDone = true; // そのため、以下のことが可能になる。

JavaScript よりも少ないコード

可読性

class Greeter {
 private greeting: string;
 constructor (private message: string) {
 this.greeting = message;
 }
 greet() {
 return "Hello, " + this.greeting;
 }
}

var Greeter = (function () {
 function Greeter(message) {
 this.greeting = message;
 }
 Greeter.prototype.greet = function () {
 return "Hello, " + this.greeting;
 };
 return Greeter;
})();

は、コードを提供するためにJavaScriptと同等のコードに変換することができます "コンパイラ"。

module Company {
 class Employee {
 }
 
 class EmployeeHelper {
 targetEmployee: Employee;
 }
 
 export class Customer {
 }
}
var obj = new Company.Customer();

setTimeout(() => {
 console.log("setTimeout called!")
}, 1000);

class functionOverloading{
 addCustomer(custId: number);
 addCustomer(company: string);
 addCustomer(value: any) {
 if (value && typeof value == "number") {
 alert("First overload - " + value);
 }
 if (value && typeof value == "string") {
 alert("Second overload - " + value);
 }
 }
}

export class SampleClass{
 private title: string; 
 constructor(public constructorexample: string){
 this.title = constructorexample; 
 }
}

class Greeter {
 greeting: string;
 constructor (message: string) {
 this.greeting = message;
 }
 greet() {
 return "Hello, " + this.greeting;
 }
}

var Greeter = (function () {
 function Greeter(message) {
 this.greeting = message;
 }
 Greeter.prototype.greet = function () {
 return "Hello, " + this.greeting;
 };
 return Greeter;
})();