JavaScriptとJSXの違うところ[初歩]

JavaScriptからプログラミングの勉強を始めた私が、最近JSXを学び始めました。

で、JavaScriptの書式に一通り慣れた身が、JSXを触ってみて感じた「違い」のまとめです。

注：深い意味でのJavaScriptの挙動とココが違う！みたいな考察記事ではありません。
JavaScriptをちょっとやった人が、JSXをさわるにあたって前もって知ってたらおトク！程度の軽い内容です。

文字列連結にはキャストが必須

// JavaScript!
var cnt = 30;
console.log(cnt + "点ゲット！"); // 30点ゲット！

JavaScriptでよくこういうの書いてたのですが、全部キャストしないといけないんですね。

// JSX!
var cnt = 30;
log(cnt as string + "点ゲット！"); // 30点ゲット！

:voidじゃないfunctionはreturn必須

// JavaScript!
var cnt = 1;
function countUp(){
  cnt++;
}
countUp();

何も返さない関数ってのが書けたけど

// JSX!
var cnt: number = 1;
function countUp(): void{ // :voidってつける
  cnt++;
}
countUp();

// もしくは

var cnt: number = 1;
function countUp(): number{ // 返り値の型つける
  cnt++;
  return cnt; // returnする
}
countUp();

: voidにするか、しっかり返り値の型と、関数内でのreturnが必要です。

同じ型しか比較できないので===はない

// JavaScript!
var cnt = 30;
var cntS = "30";
console.log(cnt === cntS); // false
console.log(cnt == cntS); // true

JavaScriptでは型違いでも無理やり比較できました。
でも＝2つはいわゆるBadPartsなので、＝3つが推奨。

// JSX!
var cnt: number = 30;
var cntS: string = "30";
log(cnt === cntS); // そもそも＝3つは書式のエラー
log(cnt == cntS); // 型違いなので比較不可能でエラー
log(cnt == cntS as number); // これならtrue

比較するのは同じ型同士で、っていう文化がなかった・・。

配列、オブジェクトは型統一 or variant

// JavaScript!
var cnt = function(){};
var arr = [1, "2つ目", cnt, {key1: 2, key2: "あいうえお"}];

JavaScriptの配列には、なんでも入れれました。

// JSX!
var cnt = function(): void{};
var arr = [1, "2つ目", cnt, {key1: 2, key2: "あいうえお"}]: variant[];

JSXの場合は、型を揃えるか、variant型の配列にするしかないです。

オブジェクトも型固定or variant

// JSX!
var cnt = function(): void{};
var obj = {
  one: 1, 
  two: "2つ目", 
  three: cnt, 
  four: {key1: 2, key2: "あいうえお"}: Map.<variant>
}: Map.<variant>;

うおー、面倒くさい！ｗ

なんで配列はstring[ ]みたいに書けるのに、マップはMap.みたいに書かないとダメなんでしょう。
リテラル記法？したい！

intにキャストすればMath.floorいらず

コレハベンリー。

// JavaScript!
var enshu = 3.14159;
enshu = Math.floor(enshu);
console.log(enshu); // 3

キャストしちまえば・・・！

// JSX!
var enshu = 3.14159;
log enshu as int; // 3

とかなんとか書いた後に気になってコンパイルされたやつを見たら、あっさりその仕組が。

// JavaScript!
var enshu = 3.14159;
//enshu = Math.floor(enshu);
console.log(enshu | 0); // 3

ビット演算で簡単にできるんですね・・ｗ

何かと決まりがあって試すのも大変

JavaScriptだととりあえず定義すればとりあえず使えたのに、JSXだとクラスやら型やら気にしないといけなくて面倒やなぁ・・っと。

// JavaScript!
var sample = 20;
cosole.log(sample);

たったこれだけしたくても

// JSX!
class Test { // class作らなきゃダメ！
  static var sample = 20; // staticって付けないとダメ！

  static function run() : void {
    log Test.sample; // Test.ってしないとダメ！
  }
}

そもそもクラスベースの言語なら当たり前というか、気にするまでもない事項というか・・。
でも、気軽に触れないのはなぁー。
オフライン環境・電車の中とかで勉強できひんし。

最後に

ほんとはPrototype的な感じの違いやら、JavaScriptでいうクラス的なものとの違いやら書けたら良いんでしょうけど、そこまで理解できてないので。
きっとそこは達人プログラマの皆さんが書かれると思います。
検索すると現にいっぱい出てくるし。

ここ最近思う一番の敗因は、クラスベースの言語からプログラミングを学び始めなかったことです。
そういう意味でJavaScriptをプログラミングの第一歩にするのって、どうなんかなぁ・・と思う今日この頃。
ブラウザベースでDOM操作を専門にやる、jQuery使えればOK！とかそういうのなら良いんでしょうけど。

他でも言われてるようですが、私はまだJSXのターゲットではないようです。
もっと根本的なトコが足りてない！