AltJS/TypeScriptによるプログラミングに関する世界観です。
JavaScript フレームワーク入門を参考にしています。
JavaScript代替言語は、AltJSとして知られ、「ブラウザで動くJavaScriptをもっと別の言語で書きたい」というニーズにこたえている。
たとえば、JavaScriptではプロトタイプベースの「とても特殊」なオブジェクト指向を用いるが、「C#やJavaのような静的型付けのクラスベースなオブジェクト指向開発がしたい」というニーズが、特に会社のシステム開発などでは多く見られる。この時、AltJSのTypeScriptを使うことができる。
また、TypeScriptは単なるAltJSではなく、「JavaScriptフレームワークの採用言語」でもある。ここでは、GoogleやFacebookなどが作ったAngularやReact/Vue.jsのような「クライアントサイドでのフレームワーク」を用いた時に、TypeScriptを使うことになる。特にAngularでは全面的にTypeScriptが採用されており、Angularを使う開発者は必然的にTypeScriptを学ばざるを得ない。
自分の書いたブログ「神々とともに生きる詩人」2021/01/27より。
RubyやLaravelなどは、C++やJavaと同様のクラスベースのオブジェクト指向を行うが、JavaScriptでは、クラスベースではなくプロトタイプベースのオブジェクト指向を採用している。
クラスのメンバ変数とメソッドを用いることなく、JavaScriptではプロトタイプを作成することでオブジェクト指向ができるが、従来のプログラミングとは異なるため、クラスベースのオブジェクト指向を行うためにTypeScriptと呼ばれる言語を用いる。
また、C++やJavaには型がある（静的型付け）が、JavaScriptには型が無い（動的型付け）。
動的型付けはプログラムの開発が簡単であるというメリットがあるが、多くの場合、静的型付けの方がプログラムの信頼性や保守性が向上し、たとえばプログラムとプログラムを結合した際にもバグがでることが少ない。
このため、TypeScriptではJavaScriptにおいても静的型付けを実現できる。
TypeScriptでは、TypeScript独自の型のチェックをした後で、TypeScriptコードがJavaScriptコードに変換される。
以前のトレンドでは、RubyやPythonといった動的型付け言語が、プログラムの書きやすさといった点から流行していたが、最近は大規模なプログラム開発において静的型付けが再流行しており、RubyやPythonといった動的型付け言語でも、型アノテーションや型宣言ファイルを用いて、静的型解析を行うことが一般的になりつつある。
TypeScriptは、DelphiやC#などの開発をリードした元ボーランドで現マイクロソフトのアンダース・ヘルスバーグが関わっています。
僕はDelphi大好きっ子であるため、たとえMSの言語であっても「ヘルスバーグ天才すぎる」と言わざるを得ません。
Microsoftによる、JavaScriptの代替言語。
JavaScriptがクラスベースではないプロトタイプベースのオブジェクト指向をするのに比べて、TypeScriptはクラスベースのオブジェクト指向を行うことが出来る。静的型付けであると考えて良い。
GoogleによるDartと言う似たような言語プロジェクトもある。
TypeScriptはnpmでインストールするため、まずNode.jsをインストールする。Node.jsをインストールすることでnpmが利用可能となる。
Node.jsをインストールしたら、以下のコマンドを実行する。
npm install -g typescript
詳しくはTypeScriptチュートリアル① -環境構築編- - Qiitaが参考になる。
TypeScriptで.tsファイルをコンパイルするには以下のようにする。
tsc hoge.ts hoge.js
コンパイルが成功すると、hoge.jsファイルが出力される。これをNode.jsで実行するには、
node hoge.js
とする。
また、以下のコマンドで、TypeScriptの設定ファイルであるtsconfig.jsonが出力される。
tsc --init
これにより、TypeScriptの設定を自動化できる。
詳しくは以下のページが参考になる。
以下はJavaScript フレームワーク入門を参考に執筆・編集して引用しました。
基本的に、
let 変数名 : 型名 ; let 変数名 : 型名 = 値 ;
のように、変数名の後にコロンを付け、型名を記す。
TypeScriptでは、JavaScriptのコードを変数の型を指定して記述しますが、型はコンパイル時にチェックされるだけで、生成されるJavaScriptコードは型を指定しない場合と全く同じです。注意してください。
配列にも型を設定できるほか、型の別名であるエイリアスを使うことができる。列挙型やタプルも使うことができる。タプルは、すべての要素にそれぞれの型を指定した配列のようなもので、データベースにおけるレコードのような用途に使用できる。
後日注記：また、TypeScriptでは単に変数や関数に型を指定できるだけではなく、class構文を使ったクラスベースのオブジェクト指向もできる。クラスベースはプロトタイプベースよりも劣ったものでは決してなく、class文を使った方がオブジェクトの要素や構造をすっきりと書ける。
自分の書いたブログ「神々とともに生きる詩人」2021/01/11より。編集済み。
TypeScriptについて勉強した。
TypeScriptの型は、number（数値）, boolean（真偽値）, string（文字列）, any, voidなどを使う。
これを、変数なら変数名の後に、関数定義なら引数名やカッコの後ろに、コロンをつけて記述する。
let n:number = 0;
let s:string = "Hoge";
function returnAdd(x:number, y:number): number {
return x + y;
}
配列はnumber[]とする。
let arr:number[] = [0, 1, 2, 3, 4];
また、interfaceを用いれば、オブジェクトの要素となるメンバと型の一覧を記述できる。
オブジェクトの場合、interfaceを記述し、それぞれの要素に型名を記述し、名前を付けてDataObjectなどとし、変数名の後に、このDataObjectを付ける。
interface DataObject {
x: number;
y: number;
}
let values: DataObject = { x: 10, y: 30 };
この時、?を付けることで、あってもなくても構わない要素とすることができる。
nullを許容するにはstring | nullとする。明示的にnullを許容しない限り、nullは許容されないため、nullチェックをする必要はない。
そして、TypeScriptはJavaScriptのスーパーセットであり、JavaScriptモジュールを利用できるが、JavaScriptモジュールは当然ながらJavaScriptで書かれているため、型情報がない。
このようなモジュールのために、型定義ファイル（型宣言ファイル）が利用できる。
これはC言語のヘッダファイルのようなもので、関数などが型とともに記述されている。
TypeScriptでは、npmでモジュールを導入する際に、モジュールだけでなく、型定義ファイルも追加的にインストールする。
TypeScriptで書かれたtsファイルは、tscでjsにコンパイルする。たとえば、npx tscを使う。この際に型チェックが行われる。
また、VS-Codeでは、コードを書いている際に、型が間違っている時にその部分を教えてくれる。
以上は、以下の動画を見て、自分なりに書きました。
自分の書いたブログ「神々とともに生きる詩人」2021/01/11より。編集済み。
TypeScriptでは、このほか、列挙型、タプル型、ジェネリクス型、可変長引数、などを利用できる。
また、TypeScriptでのオブジェクト指向では、class文を用いて、クラスベースのオブジェクト指向が可能。
class Calc {
x: number;
y: number;
constructor(a: number, b: number){
this.x = a;
this.y = b;
}
returnAdd(): number {
return this.x + this.y;
}
}
クラスにはコンストラクタ、メソッド、プロパティがあり、継承やオーバーライドも可能。
インスタンスをnewで生成でき、getやsetも使うことができる。
そして、インターフェースを使うことで、メソッドやプロパティを必ず実装しなければならないように、強制できる。
interface Calc {
x: number;
y: number;
returnAdd(): number;
}
class CalcAdd implements Calc {
public x: number;
public y: number;
constructor(a: number, b: number){
this.x = a;
this.y = b;
}
returnAdd(): number {
return this.x + this.y;
}
}
TypeScriptでは、インターフェースも型として扱われる。
以上は、以下の書籍を参考に執筆しました。
自分の書いた「ニュース - 2021-04-第五週（2021-05-第一週）」2021/04/29より。編集済み。
TypeScriptのタプル型が便利だということが分かった。
JavaScriptの配列には、どんな型の値でも自由に入れることができる。
これに対して、TypeScriptのタプルは、決まった型の値しか入れることができない。
enum型などと組み合わせることで、「決められた型の値だけを格納する」ということが可能である。
これは、データベースレコードなどのような場合に便利だ。
たとえば、nameはstring、ageはnumber、genderはmaleあるいはfemaleのenum型などとし、これらの型の値しか受け付けないタプルを定義できる。
enum Gender {male, female};
let tpl : [string, number, Gender];
tpl = ["Assy", 32, Gender.male];
詳しくはJavaScript フレームワーク入門が参考になります。
型エイリアスは、型に別名をつける機能。たとえば、stringの別名としてName、numberの別名としてAgeなどとできる。
enum Gender {male, female};
type Name = string;
type Age = number;
let tpl2 : [Name, Age, Gender];
型定義ファイルは、もし@typesで提供されていた場合以下でインストールできる。
npm install --save @types/hoge
あるいは、
yarn add @types/hoge
提供されていない場合、型定義ファイル（d.tsファイル）を自分で作るか、importではなくrequireを使って読み込む方法（型はany型として扱われる）で対応することができます。
詳しくは以下のページを参照のこと。
自分で書いたコード。
class Calc {
private x:number;
private y:number;
private a:number;
private s:number;
private m:number;
private d:number;
constructor(x:number, y:number) {
this.x = x;
this.y = y;
this.a = x + y;
this.s = x - y;
this.m = x * y;
this.d = x / y;
}
printAll():void {
console.log(this.x + " + " + this.y + " = " + this.a);
console.log(this.x + " - " + this.y + " = " + this.s);
console.log(this.x + " * " + this.y + " = " + this.m);
console.log(this.x + " / " + this.y + " = " + this.d);
}
}
let calc_list:Calc[] = [ new Calc(1, 3), new Calc(13, 23), new Calc(16, 15), new Calc(20, 7) ];
for (const value of calc_list.values()) {
value.printAll();
}
最近のJavaScriptでは、糖衣構文としてのclass文が導入されたため、クラスベースのオブジェクト指向だけをやりたいなら、TypeScriptを使う必要は必ずしもない。
だが、静的型付けの型宣言（型アノテーション）を使いたい場合は、引き続きTypeScriptの利用が必要となる。
CoffeeScriptはAltJSのひとつで、後発のTypeScriptが登場する以前から存在し、かつてはAltJSの最前線だった。
Dartを参照のこと。
Elmを参照のこと。
Haxeを参照のこと。
JavaScriptでは、標準でプロトタイプベースの「委譲」と呼ばれるオブジェクト指向を行う。JavaScript（プロトタイプチェーン）を参照のこと。
型も参照のこと。
オブジェクト指向も参照のこと。
TypeScriptなどはJavaScriptでクラスベースの静的型付け言語を実現する。
TypeScriptではコンパイルされた後は型情報は残らず、コンパイルの時にチェックして通常のJavaScriptを吐く。