Typescript – Javascriptとの違い
JavaScriptは、Webブラウザで実行されるプログラミング言語として代表的な存在です。しかし、JavaScriptで大規模アプリケーションを開発するのは難しいとして、代替のプログラミング言語、JavaScript風プログラミング言語、JavaScriptのスーパーセットとして開発されているプログラミング言語が存在しています。これらの中からどれを選択すればよいかを判断するのが難しい状況にあるものの、多くのユーザーは「TypeScript」を代替言語として使う動きが出てきているようです。
State of JavaScriptは、2019年におけるJavaScript関連の調査データとして、「The State of JavaScript 2019」を公開しました。調査の対象にJavaScriptの代替言語に関するものがあり、他の言語を引き離してTypeScriptが強い人気を示しています。今回のブログでは、２NFソフトウェアとTypeScriptの人気の秘密を解読していきましょう。
＜目次＞
1．Typescript の正体
TypescriptはMicrosoftによって開発されたオープンソースであり、Javascriptの進化版とも言え、Javascriptを拡張した言語になります。
ではなぜJavascriptの進化版と見なされるのでしょうか？それは静的オプションとオブジェクト指向のクラスの追加がされ、Javascriptの最新版であるES6(ECMAScript 6 2015)を含んでいるところにあります。
Typescriptは名前空間、クラス、オプションモジュールをJavascriptに追加します。どんなブラウザ、サーバー、運用システム上でも大規模なJavascriptアプリへツールを提供します。
Javascriptに慣れているプログラマーであれば、Javascriptでプログラミングする際にどのような問題があるかご存じでしょう。
・変更・更新管理において、変数使用の際のオープン性が問題となる。
・複雑なアプリが非常に多くのソースファイルを使用し、別々のフォルダーに大量に分ける必要があれば、手作業がほとんどのため、統一に手間がかかる。
・基本的にJavascriptはOOP（オブジェクト指向）のサポートがあるが、コード展開がJava、C#, Rubyといった他の高水準言語と比べて複雑なため、適応が非常に難しい。
それでは、Typescriptの強みと使用する理由はなんでしょうか？
2．Typescriptの利点
・巨大Javascriptフレームワークの補助が受けられ、大規模なプロジェクトの開発でも簡単である。
・OOPに強いサポートを提供する ： Typescriptは、ほとんどのオブジェクト指向のシンタックスをサポートする。例えば：継承、ラッピング、コンストラクタ、抽象、インターフェース、実装、オーバーライド…
・最新の技術やオブジェクト指向プログラミングの補助によってコーディング方法が明確である： 例えば、モジュール指向のコードシステムの設計をサポートする。また、名前空間のサポートにより、複数の開発者が協力できる大規模なシステムの構築が容易になります。
・Javascriptの最新性能が得られる。
・Typescriptはオープンソースなので、無料で利用者が非常に多い。
以上のような利点から、現在TypescriptはAngular 2, Ionicなどの一般的なフロントエンドフレームワークだけでなく、Node-jsといったバックエンド向けのプラットフォームでも使用されています。
3．設定の方法
しかし、TypescriptはJavascriptのようにブラウザですぐに直接実行することはできず、npmのコンパイラーによるJavascriptで変換することが必要になります。
Typescriptで作業ができるようにするには、node.js & npmを設定しなければなりません。設定ガイドは以下のリンクから飛べます。
https://docs.npmjs.com/getting-started/installing-node
Typescriptを設定し、TypescriptからJavascriptに変換します。
npm install -g typescript
以下のコマンドで設定を確認します。
tsc -v
Version 2.6.2
4．Typescriptの実践
設定が終わったら、コードを実践してTypescriptについて理解を深めましょう。
example.ts ファイル :
class Vehicle {
name: string;
brand: string;
constructor (name: string, brand: string) {
this.name = name;
this.brand = brand;
}
info() {
return “Name: ” + this.name + “, brand: ” + this.brand;
}
start() {
return this.brand + ” ” + this.name + ” is runing.”;
}
}
let bugati = new Vehicle(“Veyon”, “Bugati”);
bugati.start();
【tsc example.ts】のコマンドを実行したら、Typescriptは同名のJSファイルをコンパイルします。実行の際、実はexample.tsファイルではなく、このファイルが実行されます。
変換されたJavascriptコードを見てみましょう。
var Vehicle = /** @class */ (function () {
function Vehicle(name, brand) {
this.name = name;
this.brand = brand;
}
Vehicle.prototype.info = function () {
return “Name: “ + this.name + “, brand: “ + this.brand;
};
Vehicle.prototype.start = function () {
return this.brand + ” ” + this.name + ” is runing.”;
};
return Vehicle;
}());
var bugati = new Vehicle(“Veyon”, “Bugati”);
bugati.start();
コードは見やすく、まとまっています。これはJavascriptと比較した際のTypescriptの利点です。
Typescriptのコードのコンストラクタ関数に違和感がありませんか？これはTypescript内のクラスの関数で、OOPの現れです。
Typescriptの関数var、let
注意：現在でもES5は一般的であるため、この部分で比較しているのはES5以前のJavascriptです。ES6以降はletとconst の概念があり、このブログでは含めません。
Typescriptにはvar、let 、constという 3つの変数宣言方法があります。
Constは一定の値の宣言であるため、ここではvarとletのみに注目します。
Javascriptと比べ、Typescriptはvarを使用して変数宣言を行います。しかし、ここにletも追加します。それではvarとletの役割はなんでしょうか？区別するために、例を挙げてみましょう。
例１：
var foo = 123;
if (true) {
var foo = 456;
}
console.log(foo); // 456
例２：
let foo = 123;
if (true) {
let foo = 456;
}
console.log(foo); // 123
違いは何でしょうか？
letはその周りのブロック内でしか使用できません。varはそれを含む関数内でも一貫して使うことができるので、letより使用範囲が広いのです。
グローバルスコープにてvarで変数宣言した場合、グローバルオブジェクトに新属性(“this”)を作りますが、letの場合それはありません。
var x = “global”;
let y = “global”;
console.log(this.x); // “global”
console.log(this.y); // undefined
一方、Javascriptではvarのみとなります。
var name = “Bugati”;
Typescriptでデータ型に対して変数宣言をしたい場合：
var name: string = “Bugati”;
このことから、Typescriptはデータ型を明確にすることがわかります。これにより、発見しづらいデータ型に関するロジックのバグが複数あるJavascriptと比べ、コーディングやデバッグが簡単になります。
Javascriptは現在でも最も一般的な言語の1つです。だからといってTypescriptの様々な利点を否定することはできません。なぜなら、一定の規模のあるwebアプリのほとんどは一般的なフロントエンドフレームワークが使用されており、作業する際に初めてTypescriptがもたらす利便性と能率性がわかるのです。
原版：https://viblo.asia/p/gioi-thieu-typescript-su-khac-nhau-giua-typescript-va-javascript-LzD5dDn05jY
