　JavaScriptのalt言語を入れてHelloWorldしてみる。

成果物

github

前提

ラズパイ4に最新Node.jsをインストールする

手順

sudo npm install -g typescript

バージョン確認

tsc -v

Version 4.6.3

ヘルプ確認

tsc -h

ヘルプ内容

tsc: The TypeScript Compiler - Version 4.6.3
TS
COMMON COMMANDS

tsc
Compiles the current project (tsconfig.json in the working directory.)

tsc app.ts util.ts
Ignoring tsconfig.json, compiles the specified files with default compiler options.

tsc -b
Build a composite project in the working directory.

tsc --init
Creates a tsconfig.json with the recommended settings in the working directory.

tsc -p ./path/to/tsconfig.json
Compiles the TypeScript project located at the specified path.

tsc --help --all
An expanded version of this information, showing all possible compiler options

tsc --noEmit
tsc --target esnext
Compiles the current project, with additional settings.

COMMAND LINE FLAGS

--help, -h Print this message.

--watch, -w Watch input files.

--all Show all compiler options.

--version, -v Print the compiler's version.

--init Initializes a TypeScript project and creates a tsconfig.json file.

--project, -p Compile the project given the path to its configuration file, or to a folder with a 'tsconfig.json'.

--build, -b Build one or more projects and their dependencies, if out of date

--showConfig Print the final configuration instead of building.

COMMON COMPILER OPTIONS

--pretty Enable color and formatting in TypeScript's output to make compiler errors easier to read
type: boolean
default: true

--target, -t Set the JavaScript language version for emitted JavaScript and include compatible library declarations.
one of: es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext
default: es3

--module, -m Specify what module code is generated.
one of: none, commonjs, amd, umd, system, es6/es2015, es2020, es2022, esnext, node12, nodenext
default: undefined

--lib Specify a set of bundled library declaration files that describe the target runtime environment.
one or more: es5, es6/es2015, es7/es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext, dom, dom.iterable, webwork er, webworker.importscripts, webworker.iterable, scripthost, es2015.core, es2015.collection, es2015.generator, es2015.iterable, es2015.promise, es2015.proxy, es2015.reflect, es2015.symbol, es2015.symbol.wellknown, es2016.a rray.include, es2017.object, es2017.sharedmemory, es2017.string, es2017.intl, es2017.typedarrays, es2018.asyncg enerator, es2018.asynciterable/esnext.asynciterable, es2018.intl, es2018.promise, es2018.regexp, es2019.array, es2019.object, es2019.string, es2019.symbol/esnext.symbol, es2020.bigint/esnext.bigint, es2020.promise, es2020. sharedmemory, es2020.string, es2020.symbol.wellknown, es2020.intl, es2021.promise/esnext.promise, es2021.string , es2021.weakref/esnext.weakref, es2021.intl, es2022.array/esnext.array, es2022.error, es2022.object, es2022.st ring/esnext.string, esnext.intl
default: undefined

--allowJs Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files.
type: boolean
default: false

--checkJs Enable error reporting in type-checked JavaScript files.
type: boolean
default: false

--jsx Specify what JSX code is generated.
one of: preserve, react, react-native, react-jsx, react-jsxdev
default: undefined

--declaration, -d Generate .d.ts files from TypeScript and JavaScript files in your project.
type: boolean
default: `false`, unless `composite` is set

--declarationMap Create sourcemaps for d.ts files.
type: boolean
default: false

--emitDeclarationOnly Only output d.ts files and not JavaScript files.
type: boolean
default: false

--sourceMap Create source map files for emitted JavaScript files.
type: boolean
default: false

--outFile Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a f ile that bundles all .d.ts output.

--outDir Specify an output folder for all emitted files.

--removeComments Disable emitting comments.
type: boolean
default: false

--noEmit Disable emitting files from a compilation.
type: boolean
default: false

--strict Enable all strict type-checking options.
type: boolean
default: false

--types Specify type package names to be included without being referenced in a source file.

--esModuleInterop Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultI mports` for type compatibility.
type: boolean
default: false

You can learn about all of the compiler options at https://aka.ms/tsconfig-reference

ソースコードを書く

hello-ng.ts

function increment(num: number) {
  return num + 1;
}

console.log(increment("999"));

　関数定義の引数にnum: numberとある。これは変数名: 型である。引数numをnumber（数値）型に指定している。なのに呼出元では文字列"999"が渡されている。なのでビルドするとエラーになるはず。

　JavaScriptは型の宣言ができないため、自動で型変換されるか実行時エラーになる。バグが生じやすいため、静的型チェックをしてくれる言語のほうがテストの手間なども減ってコードの品質が手間なく向上する。なのでTypeScriptで書いたほうがよい。

ビルドする

tsc hello-ng.ts

hello-ng.ts:5:23 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

5 console.log(increment("999"));
                        ~~~~~


Found 1 error in hello.ts:5

　OK。英語だけど意図したとおりのエラーが出ている。

修正してビルドする

　念のため、エラーがないコードもやる。

hello-ok.ts

function increment(num: number) {
  return num + 1;
}

console.log(increment(999));

tsc hello-ok.ts

　エラーなく正常終了した。以下ファイルが出力された。

hello-ok.js

function increment(num) {
    return num + 1;
}
console.log(increment(999));

　OK！

所感

　とりあえずビルドから出力確認まで最低限はできた。次はAssemblyScriptをやってみよう。

情報源

対象環境

2022-04-05
Raspbierry pi 4 Model B
Raspberry Pi OS buster 10.0 2020-08-20 ※
bash 5.0.3(1)-release
Node.js 16.14.2
npm 8.5.0

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux

やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

TypeScriptをインストールする

成果物

前提

手順