Help us understand the problem. What is going on with this article?

ワイ「いうても型なんて面倒くさいだけやろ?」

※登場人物等は全てフィクションです。

再就職したワイ

社長「やめ太郎くん」

ワイ「はい」

社長「今うちで開発中のブラウザゲームがあるんやけど」
社長「そのゲームの中に登場するジュースの自動販売機をプログラミングしてくれへんか」

ワイ「ええで」

社長「言語はTypeScriptや」

ワイ「・・・ええで(震え声)」

タイプスクリプト is 何

ワイ「なんやTypeScriptて」
ワイ「JavaScriptの打ち間違いか?」
ワイ「きっとそうやな」
ワイ「誰かがタイプミスで仕様書にTypeScriptって打ち込んでもうたんや」
ワイ「いわばタイポスクリプトや」

ハリー先輩「ちゃうで

ハリー先輩「知らん言葉が出てきたからって変な妄想で自己解決したらアカンで」
ハリー先輩「なにがタイポスクリプトや」
ハリー先輩「TypeScriptは静的型付けが出来るAltJSや」

ワイ「ほえー、静的なのあるJavaScriptでっか」

型があるメリット

ワイ「型があるとなんか嬉しいんでっか?」

ハリー先輩「けっこう嬉しいで」
ハリー先輩「例えば、引数として数値しか認めない関数とかを作れるんや」
ハリー先輩「あと返り値の型も指定できるで」

ハリー先輩「つまり関数や変数の使い方に関するルールを自分で決められるんや」
ハリー先輩「この関数は数値を受け取って文字列を返さなあきまへんよ
ハリー先輩「みたいなルールや」
ハリー先輩「そんで、その通りに実装せえへんとJSに変換してくれへんねん」

ハリー先輩「その関数が受け取るべき引数返すべき値・・・」
ハリー先輩「それがコード上に明記されることになるから、可読性も爆上がりや」
ハリー先輩「あとからプロジェクトに参加したメンバーも助かるやろ」

ワイ「ワイみたいなザコーダーが関数の使い方を間違えてウンコードを生産してしまうのを防いでくれるわけでんな」

ハリー先輩「せや」

さらに

ハリー先輩「自作の型みたいなもん1も定義できるで」

ワイ「型を自作・・・」
ワイ「そもそも型を作りたいとか思ったことないですわ」
ワイ「型が作れると何が嬉しいんでっか」

ハリー先輩「めっちゃ嬉しいで
ハリー先輩「例えばやな」
ハリー先輩「ジュースの自販機の例やと・・・」

type Coin = 10 | 50 | 100 | 500;

ハリー先輩「こうや」

ハリー先輩「コインいうのは10円玉、50円玉、100円玉、500円玉の事ですよ
ハリー先輩「っちゅう意味や」
ハリー先輩「ジュースの自販機には1円玉や5円玉は入れられへんからな」

ハリー先輩「そんで次はこうや」

type Bill = 1000;

ハリー先輩「これは」
ハリー先輩「紙幣(Bill)いうのは千円札の事ですよ、いうことや。」
ハリー先輩「ジュースの自販機には二千円札、五千円札、一万円札は入らへんからな」

ハリー先輩「さらにこうや」

type Money = Coin | Bill;

ハリー先輩「お金いうのは、硬貨と紙幣のことですよ、と」

ハリー先輩「こうやって、硬貨として受け取るべき値紙幣として受け取るべき値・・・」
ハリー先輩「そして自販機に投入されるお金としてあるべき値
ハリー先輩「そんなんを自分で定義できるんや」

ハリー先輩「そうすることで、Money型の引数しか受け取らへん関数とかも作ることが出来るわけや」
ハリー先輩「↓こんな感じや」

// 引数 money には Money型の値しか渡せない
function insertMoney (money: Money) { 
    /* ・・・・ */
}

insertMoney(5); // 5円玉はエラー!

ハリー先輩「変数や関数のあるべき使い方自分で定義して」
ハリー先輩「その通りに実装せんと前に進めへん」
ハリー先輩「これだけでちょっとしたテスト駆動開発みたいになるやん?」

ワイ「ほんまや・・・」

ハリー先輩「場合にもよるけど」
ハリー先輩「仕様として求められとる要件を」
ハリー先輩「割とそのまんまの感じでコードにできたりするから」
ハリー先輩「訳が分からなくなりにくいっちゅうのもメリットやな」

type Coin = 10 | 50 | 100 | 500;
type Bill = 1000;
type Money = Coin | Bill;

ワイ「たしかに↑これとか一目瞭然ですわ・・・」

ハリー先輩「TypeScriptをブラウザ上で気軽に試せるサイトもあるから、まずは触ってみいや」

ワイ「さっそくやってみますわ!」

Let's TypeScript

ワイ「ポチポチポチ・・・っと」
ワイ「なんや、おかしいな」
ワイ「ハリー先輩」
ワイ「このブラウザ上のエディタ、なんかオカシイでっせ」
ワイ「エラーばっかり吐きよる」

ハリー先輩「いや、ちゃうな」
ハリー先輩「ここ、moneyのスペルがmoonyになっとるで」
ハリー先輩「ムーニーて」
ハリー先輩「紙オムツやないかい」

ワイ「いや、パンツタイプもありまっせ」

ハリー先輩「どうでもええわ
ハリー先輩「お前が一番タイポスクリプトしとるやないかい」

〜おしまい〜

オススメ記事

TypeScriptの型演習
TypeScriptの型演習(解答・解説編)


  1. 正しくは型エイリアスですね。 

yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした