Type Scriptのメリット

1.JavaScriptの履歴

1995年にNetscape社のBrandan EichがWebブラウザNavigator 2に搭載するために開発したスクリプト言語である.
Webアシスト機能を実行するための限定的な用途であり、この時期、ほとんどの論理は主にWebサーバ上で実行され、ブラウザ(クライアント)はサーバからのHTMLとCSSをレンダリングする.
HTML 5が登場するまでプラグインに依存するインタラクティブなWebページを構築してきましたが、HTML 5が登場した後、プラグインに依存する方法はJavaScriptに取って代わられました.
また、AJAXのアクティブ化によりSPAが主流となり、過去にサーバ側の多くの作業がクライアントに移行したため、JavaScriptは重要な言語となり、Webのアセンブリ言語と呼ぶことができるようになった.

2.JavaScriptやC、JavaなどのC-family言語との違い

Prototype-based Object Oriented Language

Scopeとthis

動的言語または分散型言語

3.TypeScript

上記の特性は、デバッグやテスト作業量の増加などの問題を引き起こす可能性があり、特に規模の大きいプロジェクトでは、これらの問題に特に注意する必要があるため、C#の創始者でデンマークのソフトウェアエンジニアAnders Hejlsber(아네르스 하일스베르)が開発したTypeScriptは、Microsoftが2012年に発表したオープンソースであり、静的であるEX 6(ECMAScript 2015)のクラス、モジュールなど、ES 7のDecoratorなどをサポートします.

ソース:https://poiemaweb.com/typescript-introduction

4.Type Scriptのメリット

既存のJavaScript(ES 5)構文

を使用

は、BABEのような独立したコンバータを使用することなく、新しい機能

を実現することができる.

静的タイプ

javascriptは、実行時に動的にチェックされるため、プログラムを実行する前にタイプエラーをキャプチャできませんが、タイプスクリプトは、このような問題を作成する前に(実行時に)タイプをチェックできます.

ツールサポート
統合開発環境(IDE)など、さまざまなツールをサポートします.IDEなどのツールにタイプ情報を提供することで、より高いレベルのスマートライセンス、コード・アシスタント、タイプチェック、再構築などのサポートを受けることができます.ツールのサポートも大規模なプロジェクトに必要です.

強力なオブジェクト向けプログラミングサポート
インタフェース、汎用などの強力なオブジェクト向けプログラミングリソースは、膨大で複雑なプログラミングコードの基礎を簡単に構築し、クラスベースのオブジェクト向け言語に精通している開発者の障害を低減します.

ES 6/ESNextサポート
その利点は、ES 6を完全にサポートしていないブラウザを考慮して、他のコンバータを使用せずに開発環境を構築できることです.
また、TypeScriptはECMAScript規格には組み込まれていませんが、標準化能力の強いspecを先制的に導入し、新しいspecの有用な機能を安全に導入するのに役立ちます.

Angular
TypeScriptだけでなくJavaScriptやDartを使って作成することもできますが、Angularドキュメントやコミュニティ活動で最も多く使われているのはTypeScriptです.

静的タイプの例

function sum(a, b) {
return a + b;
}

sum('x', 'y') //'xy'

以上のようにJavaScriptでは,どのタイプのパラメータを渡すべきか,どのタイプの戻り値を返すべきかはコードでは不明である.
JavaScriptの構文に問題がないため、上記のコードが実行されます.
これは,変数や戻り値を予め指定していないタイプのJavaScriptの動的タイプ化(Dynamic Type)が原因である.

function sum(a: number, b: number) {
return a + b;
}

sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

TypeScriptは静的タイプをサポートし,コンパイル段階でエラーをキャプチャする利点がある.明確な静的タイプ指定は,開発者の意図をコードで明確に記述できる.これにより、コードの可読性、予測性が向上し、デバッグが容易になります.
ソース:https://poiemaweb.com/typescript-introduction
タイプ宣言

function CheckNumberIsZero(par){
return par == 0;
}

checkNumberIsZero(0); //true
checkNumberIsZero([]); //true
checkNumberIsZero(""); // true
checkNumberIsZero(false); //true
checkNumberIsZero(this); //? (this에 따라 달라진다.)

以上のようにjavascriptでは、checkNumberIsZero()関数はパラメータのタイプを制限せず、任意のタイプやパラメータとして使用し、比較部分で強制変換を行い、ビジネスでは考えられない動作を生み出すことができます.

function checkNumberIsZero(par: number): boolean {
return par === 0;
}

checkNumberIsZero(0); //true
checkNumberIsZero([]); // error
checkNumberIsZero(""); // error
checkNumberIsZero(false); // error
checkNumberIsZero(this); // error

これにより、タイプスクリプトを作成できます.
ソース:人間スケート技術ブログ

ソース

1. https://poiemaweb.com/typescript-introduction
2. 人間スケート技術ブログ