手を動かしながら学ぶTypeScript 3日目(サンプルアプリ作成に入ろうと思ったが・・)
■思ったこと
ゴールデンラヴィットの興奮冷めやらぬ。
■ やってみよう
SECTION-010の環境構築から改めてやっていきます。やっていけるのか?
[SECTION-010]TypeScriptでHelloWorld
①package.jsonの設定
これは1日目にもう作ってたので、scriptsの追記だけしようと思う!
ここに設定するとnpm run キー
でスクリプトを実行できるようになる。startに最初に動かしたいファイル名書いとけばOK
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "tsc", "dev": "tsc -w", "start": "node dist/index.js" },
②index.ts記載
index.tsにHelloWorld的なものを書く
const pleaseKeyword = (name: string) => { return `キーワード発表は${name}お願いします!` }; console.log(pleaseKeyword(`おいでやす小田さん`));
③ビルドする
tsc
するとjsファイルになるよ。一日目にtsconfig.jsonでincludeを設定してたので、実行場所はどこでもOK
④npm run startする
こんな感じで実行される
PS E:\mizunomu1v1\work\practice-typescript\practice-typescript> npm run start > practice-typescript@1.0.0 start E:\mizunomu1v1\work\practice-typescript\practice-typescript > node dist/index.js キーワード発表はおいでやす小田さんお願いします!
[SECTION-011]対話用の関数作成
サンプルで作るpromptInput関数難しくない!?
非同期処理
- 一個の処理が完了してなくても同時に動かせちゃう、つまり並行処理!
- ただし、処理の順序は制御できない、これじゃあ不便じゃありませんか・・?
- コールバックを使うことである程度制御できるけど、ネスト地獄に陥りやすい
- そこでスッキリかけてオススメされるのが
Promise
、他にもasync/await
がいる
● コールバック
- 引数に関数を渡して、渡した先で受け取った関数をしかるべき処理の後に実行させて…てな感じで順番を制御できる
- ので、順番にやりたい処理があったらそのたびコールバックしなきゃいけない・・そんなことはやってられないぞ
● Promise
- 引数は、第一引数にresolve、第二引数にrejectが使える。resolveは成功したとき用、rejectは失敗したとき用
- pending、fulfilled、rejectedの3つの状態を持ってる
- 基本はpending(待機)、resolveされるとfulfilled(終了)に、rejectされるとrejected(処理失敗)
new Promise((resolve.reject) => { ... });
- 終わってから実行させるには
then
をメソッドチェーンみたいにして使える - が、async/awaitを使って書くこともできる
● async/await
- awaitを処理の前につけると上から下に処理を実行してくれる!スッキリ
- そのためには、関数にasyncをつけてあげる必要アリ、簡単だね?
■ 思ったこと
やっぱりもっと基礎知識つけてからじゃないと手を動かすどころではない!本の対象がある程度わかる人向けだからね、、勉強して出直す!!!!!