カテゴリー: TypeScript

投稿日:

Static TypeScriptはmakecode for microbitの拡張機能作成で使われる

makecodeはマイクロソフトが開発したオープンソースでユーザ側が自由に拡張できますが、その元になっている仕組みを調べ始め。ネット上には情報が少ないですが、

きっかけは、

https://interface.cqpub.co.jp/magazine/202202/

ですが、雑誌というのは決まった分量に収めないといけないので、行間が省略されているので、雑誌のテキストだけではよく理解できないので自分なりに理解のための整理。

makecodeで何ができるのか？

開発がマイクロソフトなので、① Arcade、② micro:bit、③ Minecraftができるということです。

makecodeの開発言語はStatic TypeScript、なぜStaticなのかというとメモリの少ないマイコンでJavaScriptの動作環境は用意できないからネーティブのコードに変換する、つまりJavaScriptが持つDynamicな機能は削除されたTypeScriptのサブセットなのでStaticという名前がつけられています。実はmakecodeの開発環境にはTypeScipt以外にBlocksとStatic Pythonも使われている（BlocksとStatic Pythonはコンパイル時にTypeScriptに変換される）ようです。Blockは” Blocks is implemented using Google Blockly.“だそうですが、ScratchもGoogle Blocklyを使っています。

<makecode用の言語についてのリンク>

https://makecode.com/language

一方pxtはStatic TypeScriptコンパイルの実行環境。

<pxtについてのリンク>

https://github.com/Microsoft/pxt

pxtの実行環境には三種類あるそうですが、

“PXT programs are executed in at least three different environments: microcontrollers, with native code compilation (ARM) browsers * server-side JavaScript engines (node.js, etc)”

実際的にはnode.jsを使うのが一番ポピュラーでしょう。

 

admin

 

投稿日:

TypeScriptを使ってみる

TypescriptはMicroSoftの開発で今はオープンソースになっていて、大規模プロジェクトで使えるJavaScript上位互換のある「コンパイラ言語」、JavaScriptに型定義などの機能を付加した上位互換なので、JavaScriptの既存ソースはそのまま使えます。

 

<TypeScriptとは何か>

https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6

コードがある程度以上の規模になったら、スクリプト言語で直接実行は辛くなるから、事前にコンパイルで基本的な文法をチェックしてくれる方がありがたいし、それ以外にもinterface, class, type alias, genericなどの大規模プロジェクト向けの拡張機能が使えます。

 

<VScodeで使うための設定>

VScodeとの相性が良いから、この環境で使うのが良いだろう。

https://qiita.com/masakinihirota/items/7ee5c2aa405c2b37d1c5

tsc : コンパイラー

ts-node : jsファイルを作成しないで直接実行、VScodeで実行するとjsファイルを作成しないからts-nodeが動いています。

それぞれの版数、

% ts-node -v

v10.9.1

% tsc -v

Version 4.8.4

 

一番シンプルなコード例、

// .js is a compiled file
// $ tsc ts_basic.ts

function greeter_ts(person: string) {
  return "Hello, " + person;
}

let user_ts = "John";

console.log(greeter_ts(user_ts));

jsファイルにコンパイルすると、

// .js is a compiled file
// $ tsc ts_basic.ts
function greeter_ts(person) {
    return "Hello, " + person;
}
var user_ts = "John";
console.log(greeter_ts(user_ts));

tsファイルで指定した型指定は取れていて、型指定はコンパイル時だけ使用されます、letがグローバル変数にもなっていますが。

 

<実践的な使い方>

https://reffect.co.jp/html/hello-typescript-tutorial#TypeScript

基本のまとめページです

例えば、VScodeでデフォルトだとtscでコンパイルするとjsファイルが同一ディレクトリに作成されてtsファイルと重複してるとエラーメッセージが出ますが、tsconfig.jsonファイルを作成すれば、jsファイルをtsファイルとは別のディレクトリに格納できるというような実践的な記述があるので有用です。

コンパイル時のjjsファイル出力ディレクトリ設定方法は、

% tsc -init

で作成されたtsconfig.jsonファイルでコメントアウトされているoutDir部分に、

“outDir”: “j_s”,
のように設定、ここでj_sはtsファイルが存在するファイル階層に作成したディレクトリを指定しています。
以下がディレクトリ構成です、
この状態で、
% tsc
で、存在するtsファイルをj_s配下にコンパイルしてjsファイルを作成します。ファイル名を指定すると、ディレクトリ指定は有効にならないで同じディレクトリにjsファイルが作成されます。
設定の為の公式ドキュメントは以下のリンクです。

https://www.typescriptlang.org/tsconfig

GitHubのリンクは、

https://github.com/chateight/type_script

 

admin