アマチュアjavaScriptエンジニアがTypeScriptにビクビク触る(Hello worldまで)

前書き

note初投稿です。どんな風に書けばいいのか全く把握していませんが、連休で余った体力を持て余したため勢いで書きはじめます。
基本情報も終わり暇を持て余した若手SE(2年目)がTypeScriptに初チャレンジ致します。TypeScriptに全力でうろたえていきます。

アドバイス・ご指摘等あれば上から目線で罵ってください。喜びます。

触る前のTypeScriptの印象

・型定義あるから、javaScriptよりデバッグ早くなるのでは？
・実行して初めてチェックしてくれるBabelより、初心者に優しいのかな？

Todo

・.tsでHello world挨拶
・let's 型定義

参考

TypeScript in 5 minutes
TypeScript + Node.js プロジェクトのはじめかた2019
速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ！ 速習シリーズ

開発環境

新人研修の2か月くらいはjavaメインでしたが、配属以降はBabelを使用したjavaScriptをnode, npm で開発を行っています。

$ node -v
v8.12.0

$ npm -v
6.4.1

$ npm run tsc -v
6.4.1

開始地点のディレクトリ

全くのずぶの素人ゆえ、tsconfig.jsonが何たるかもわかりません。

$ tree -L 1
.
|-- node_modules
|-- .babelrc
`-- package.json

公式documentを参考に実行しようとする ～実行ファイル作成

TypeScriptリファレンスの初めの方を参考に、ファイル作成してコンソールに文字を表示させたい！

$ mkdir src
$ cd src
$ touch introduce.ts

$ tree -L 2 -I node_modules
.
|-- .babelrc
|-- src
|   `-- introduce.ts
`-- package.json

introduce.ts

公式documentからコピペして格納する文字列と表示方法を変えました。

function introduce(person) {
   return "Hello, " + person;
}

let user = "My name is SickSheep";

console.log('-------------introduce');
console.log(introduce(user));

公式documentを参考に実行しようとする　～ Let's Hello world!

TypeScript in 5 minutesより

Compiling your code #
We used a .ts extension, but this code is just JavaScript. You could have copy/pasted this straight out of an existing JavaScript app.

At the command line, run the TypeScript compiler:

tsc greeter.ts

tscコマンドにコンパイルしたいファイルを指定して実行すればjavaScriptにコンパイルできる、って理解しました。
ん？コンパイルと実行って違くない？まいっかやってみよ

package.jsonにスクリプトを追加

  "scripts": {
   "introduce": "tsc src/introduce.ts"
 }

実行

$ npm run introduce

結果

$ tree -L 2 -I node_modules
.
|-- .babelrc
|-- src
|   |-- introduce.js
|   `-- introduce.ts
`-- package.json

あああ、、コンパイルでしょ？！TypeScriptをjavaScriptに変換するだけでしょ？！実行はできないよねそりゃ！！（コンパイルして実行までしてくれる便利なコマンドかとてっきり思ってたなんて言えない）

ファイルの中身を実行するためには、、、
TypeScript + Node.js プロジェクトのはじめかた2019によると、
ts_node っていうモジュールで実行できるとのこと

$ npm i -D ts-node

package.jsonにscript追加

  "scripts": {
   "introduce": "tsc src/introduce.ts",
   "introduceTS": "ts-node src/introduce.ts" //追加箇所
 }

実行

$ npm run introduceTS

TSError: ⨯ Unable to compile TypeScript:
src/introduce.ts(1,20): error TS7006: Parameter 'person' implicitly has an 'any' type.

これがTypeScriptの型定義ってやつですか、、、
引数parsonに型の指定がないからエラーになってます、ということ

introduce.tsの引数にstringを付与して、、

function introduce(person: string) {  // string追加
   return "Hello, " + person;
}

let user = "My name is SickSheep";

console.log('-------------introduce');
console.log(introduce(user));

実行！

$ npm run introduceTS

-------------introduce
Hello, My name is SickSheep

コンソールに表示できましたーーー！！！！！
javaScriptでは引数の型を示すためにJSDockでコメントを書いていましたが、これで型のコメント箇所はおさらばなんですねーいやー感慨深い。
やっとHello挨拶できましたね。

後書き

今までコンパイルがどうとか全く気にせず、与えられた環境で開発してきた自分にとっては新しい技術への挑戦は些細な結果がでるだけでも嬉しいものでした。
TypeScriptの便利さを知るとともに、今まで何となく使っていたjavaScriptについて理解・把握していなかった箇所が見つかっていくことを願って開発を進めていきます。

以上です。お読み頂きありがとうございます。