TypeScriptをインストールする

　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をやってみよう。

情報源

• typescript - npm
• TypeScript入門

対象環境

• 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