仕事ですぐに使えるTypeScriptを読んでいくその14

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

非同期処理4

昨日はpromiseの分岐と待ち合わせの制御についてでした

ループの中の await に注意

制御構文と非同期のところで非同期処理と制御構文の組み合わせは便利ということでしたが
forをはじめとしたループ文の中にあるawaitについては注意が必要。

// doSomethingで外部APIをコールしていると要素数xアクセス分だけ時間がかかる

for (const value of iterable) {
  await doSomething(value); 
}

上記の例の場合を回避したい場合はPromise.allを使用する
一度に全部処理を投げられるのでループごとにAPIコールをかけるよりずっと処理が早くなる。
ただし外部APIの場合リクエストの上限があるため、エラーとなってしまう。
APIを利用して並列数の制御やmapに似た機能を持つp-mapなどを使用してリクエスト上限に引っかからないようにする

長々と非同期処理をやってきましたが、結局謎が深まっただけでした・・・
復習を胸に

今日はここまで。

仕事ですぐに使えるTypeScriptを読んでいくその13

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

非同期処理3

昨日は非同期と制御構文についてでした。

Promiseの分岐と待ち合わせの制御

Promiseはタスクが完了した時に通知する約束。
awaitを使えばタスクの組み合わせも簡単にできる。

・asyncのついた関数「魚を切る」と「ビールを注ぐ」
・Promise.all()は全部のPromiseが完了するのを待つ
・Promise.allは引数全ての結果が得られると結果をリストで返すPromiseを発行する
・類似しているものでPromise.race()が存在し、それはどれか一つでも完了すると実行される。

async function 魚を切る(): Promise<お刺身> {
    await 包丁();
    return new お刺身;
}

async function ビールを注ぐ(): Promise<ナマ> {  
   await サーバー;
   return new ナマ;
}

const [aお刺身, aナマ] = await Promise.all([魚を切る(), ビールを注ぐ()]);
カンパイ(aお刺身, aナマ); 

今日はここまで。

仕事ですぐに使えるTypeScriptを読んでいくその12

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

非同期処理2

昨日は非同期処理のお話のうち、コールバックは使わない。
promiseというのがあるよというお話でした。

非同期と制御構文

ifなどは関数呼び出しを伴わないフラットなのでawaitとも一緒に使える。
条件によって非同期処理を追加するコードは困難だが、awaitを使えば簡単にできる。

for (const  val of iterable) {
    await doSome(val);
}
console.log("この行は全部ループが終わったら実行される");

iterable.forEach(async value => {
  await doSomething(value);
});
console.log("この行はループ内の各処理が回る前に即座に実行される");

便利なのはわかるのですがなかなかイメージがついてこないです。

今日はここまで。

仕事ですぐに使えるTypeScriptを読んでいくその11

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

非同期処理

async / awaitですね。コールバックもかな。
あとPromiseがあると紹介されていました。

非同期処理は難しそうなので何回かやっていきたいと思います。

基本的にコールバックは使わない。
コールバック時代はネストが深くなって読みにくい地獄だった。

コールバック → Promise → async / awaitの順で登場してきている。
Promiseは直接書く機会は減っているものの、現在も有用な方法。

Promiseの話はこの辺を読んでみた。
www.sumirelab.com

developer.mozilla.org

今日はここまで。

仕事ですぐに使えるTypeScriptを読んでいくその10

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

クラス

かつては関数とprototypeという属性をいじくり回してクラスを表現していたが、
クラスという概念が追加されたことで良くなりました。

クラスの表現方法

// 新しいクラス表現
class SmallAnimal {
    // プロパティは名前: 型
    animaltype: string;

    // コストラクタ(省略可能)
    constructor() {
        this.animaltype = "ポメラニアン";
    }

    say() {
        console.log(`${this.animalType}だけどMSの中に永らく居たBOM信者の全身の毛をむしりたい`);
    }
}

const smallAnimal = new SmallAnimal();
smallAnimal.say();
// ポメラニアンだけどMSの中に永らく居たBOM信者の全身の毛をむしりたい

アクセス制御(public/ protected / private)

C++にもあるようなアクセス制御をTypeScriptは持っていて、
安全性を担保しています。

少ないですが今日はここまで。

仕事ですぐに使えるTypeScriptを読んでいくその9

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

第7章

アロー関数とthis

JavaScriptではthisが何を示しているものかわからなくなりやすいらしい。
確かに、これまで見てきたようにJavaScriptはかなり自由な書き方ができることもあって
人によって書き方に違いがあって読みにくくなっているのは容易に想像できる。

TypeScriptではアロー関数を使うことで、その問題をかなり改善することができる。

// 無名関数のイベントハンドラではその関数が宣言されたところのthisにアクセスできない
// そのためthisがなんだったのかわからなくなってしまう
var self=this;
this.button.addEventListener("click", function() {
  self.smallAnimal.walkTo("タコ公園");
});
// アロー関数ならその外のthisが維持される。
// thisの意味が追える。
this.button.addEventListener("click", () => {
  this.smallAnimal.walkTo("タコ公園");
});

関数の引数と返り値の型定義

オーバーロード使えません。
・型が明確な場合は省略可能。
・returnなしの場合はvoidを使う。

今日はここまで。

仕事ですぐに使えるTypeScriptを読んでいく番外編

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者:フューチャー株式会社(Future Corporation)様

future-architect.github.io

番外編

7章まで読み進めてきましたが、今日は公式のチュートリアルをやってみようと思います。

公式のチュートリアル

www.typescriptlang.org

5分でTypeScript

TypeScriptの入手については2種類
 ・npm経由  ・VisualStudio経由 npmはコマンドを使ってinstallする方法ですね。
VisualStudioはインストールの時にプラグインを選択していればインストールされる
または後からインストールが可能。MSが開発しているだけあってVisualStudioとの親和性はたかそうですね。
とはいえTypeScriptを使う場面がVisualStudioを使える場所とは限らないので、OS依存度の低いVisualStudioCodeでやっていくのが良さそう

チュートリアルではまずgreeter.tsを作るようになっていてtscコマンドを使ってコンパイルしています。

// 最初に作るgreeter.ts
// これをベースに発展させていくのが本チュートリアル
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

tscコマンドは該当するtsファイルがある場所で

tsc greeter.ts

VisualStudioCodeだと下にターミナルウィンドウがあるので楽に実行できます。
コンパイル後はjsがファイルが作成され、実行はjsを指定して上げる形になります。

TypeScriptは柔軟で動的なJavaScriptの拡張版になるので、
型定義について曖昧であっても、意図しない動作をすることはあれど、
基本的にjsファイルへコンパイルされるようです。

インターフェース
TypeScriptに構造的に互換性があればインターフェースは明示的なimplementsなしに実装可能

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

クラス
オブジェクト指向になれた人だと使いにくかったクラスは
TypeScriptで親しみやすくなったという点をいろんなサイトを見ているとよく見かける。
このチュートリアルでも似た話が出てきていて、便利だよねとなっていた。

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    middleInitial: string; // せっかくあるんだし使おう
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.middleInitial + person.lastName;
}

let user = new Student( "Jane", "M.", "User" );

document.body.textContent = greeter(user);

実行
いろんな方法があるようだけれどここではHTMLを使ってブラウザで表示させている。
一つ作っておけばワークスペースで使い回しできるし、ブラウザ表示の方が好き。
VisualStudioCodeだとChromeのデバッガーがあるのでそちらを使うのもいいかも。

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

表示させるとこんな感じ f:id:torikizi:20190710231017p:plain

混乱しそうなので避けてましたが、
他のドキュメントを参考にして理解を深めるの必要かもしれません。
(当然と言われるとその通りなのですが...)

今日はここまで。