Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScriptでマルいJavaScriptを型くする
Search
Takeru Ichii
December 16, 2015
Programming
0
180
TypeScriptでマルいJavaScriptを型くする
初めてのTypeScriptネタ。間違ってたら優しく教えて下さい。
Takeru Ichii
December 16, 2015
Tweet
Share
More Decks by Takeru Ichii
See All by Takeru Ichii
KPTのかわいそうな Keepちゃんを救い隊
takeru_ichii_0901
0
27
効果的なチームワークを体験するワークショップ
takeru_ichii_0901
3
590
Rails on Kubernetes -どうする?〇〇-
takeru_ichii_0901
3
7.6k
2015-11-30_dockerでドッカンドッカンする話
takeru_ichii_0901
1
340
20151208 IoTイントロダクション
takeru_ichii_0901
0
180
MS Officeの便利な使い方 - VBAで始めるプログラミングのススメ
takeru_ichii_0901
0
580
Other Decks in Programming
See All in Programming
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
380
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
130
Rubyでつくるパケットキャプチャツール
ydah
0
140
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
210
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
580
return文におけるstd::moveについて
onihusube
1
1.4k
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
ErdMap: Thinking about a map for Rails applications
makicamel
1
260
Оптимизируем производительность блока Казначейство
lamodatech
0
930
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
410
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
BBQ
matthewcrist
85
9.4k
Statistics for Hackers
jakevdp
797
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Faster Mobile Websites
deanohume
305
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Site-Speed That Sticks
csswizardry
2
240
The World Runs on Bad Software
bkeepers
PRO
66
11k
Transcript
で いJavaScriptを くする 2015-12-16 Takeru Ichii 型
おしながき • JavaScriptとは • JavaScriptつらい • TypeScriptとは • ちょっとやってみる
JavaScriptとは • いわゆる ECMA-262 5.1 edition で規定されている言語仕様 • 元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化 するために作られたもの
• 弱い動的型付けのマルチパラダイムプログラミング言語
JavaScriptとは • いわゆる ECMA-262 5.1 edition で規定されている言語仕様 • 元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化 するために作られたもの
• 弱い動的型付けのマルチパラダイムプログラミング言語 JavaScriptつらい!!!!
JavaScriptつらい • ダックタイピングな言語はソースが巨大化した時に何がデータ として挿入されるかわからない • オブジェクト指向言語でもあるが、プロトタイプベース • クラスベースになれた人にとっては表現がしづらい ダックタイピング: 「もしもそれがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルである」な感じ
TypeScriptとは • JavaScriptに以下の要素を付加した言語(またはAltJS) • ECMAScript6の機能先取り • class/lambda/デフォルト引数/let/const etc… • ECMAScript7(策定中)のデコレーター機能
• 型注釈/型推論の充実 • インターフェイスの記述 https://ja.wikipedia.org/wiki/TypeScript http://www.buildinsider.net/language/quicktypescript/01#type-inference
ちょっとやってみる • TypeScript公式にPlaygroundが用意されている • TypeScriptを書いたらそのJavaScriptコンパイル結果と実行ができる • URLで独自コードをいつでも参照可能 • デモコードのURLはノートに記載 •
以下のデモをご用意 • 型注釈/型推論/インターフェイス/デフォルト引数/const/let • アロー関数/テンプレート文字列 • クラスベースオブジェクト指向言語
ちょっとやってみる 型注釈 /* * 1 Type annotation *
1.1 String */ var sampleStr: string; sampleStr = "string"; //success sampleStr = 1; //Type mismatch error /* * 1.2 number */ var sampleNum: number; sampleNum = 1; //integer sampleNum = 1.2; //float? sampleNum = -‐1.234; //float? sampleNum = ""; //Type mismatch error /* * 1.3 boolean */ var sampleBool: boolean; sampleBool = true; //success sampleBool = false; //success sampleBool = ""; //Type mismatch error sampleBool = 1; //Type mismatch error • 型注釈によって変数の型を束縛 • プリミティブ型として3つを用意 • string • number • boolean
ちょっとやってみる 型推論 /* * 2 Type inference */
var sampleInfer1 = 1; alert(typeof sampleInfer1); //number var sampleInfer2 = "hoge"; alert(typeof sampleInfer2); //string • 変数宣言時に特に型宣言をしない場合、 適当な型を選択 • 一度宣言したら、再代入時に型を一致 させる必要がある
ちょっとやってみる インターフェイス /* * 3 Interface */
interface sampleInterface { name: string; // required parameter -‐? ":" sex?: string; // optional parameter -‐> "?:" age: number; } function getUserSuccess1(): sampleInterface { return { name: "takeru", sex: "male", age: 24 } } function getUserSuccess2(): sampleInterface { // omit optional parameter "sex" return { name: "takeru", age: 24 } } function getUserError(): sampleInterface { // Error: required parmeter "age" is not defined return { name: "takeru" } } • インターフェイスを宣言できる • 省略可能な要素は”?:”を使う
ちょっとやってみる デフォルト引数 /* * 4 default argument */
function sampleFunc1(inputString: string = "default argument"): void{ alert(inputString); } sampleFunc1("hogehoge"); // alert "hogehoge" sampleFunc1(); // alert "default argument” JavaScriptではできなかった関数等のデフォルト引数を設定できる
ちょっとやってみる const/let /* * 5 const */
const constVar = "const"; constVar = "cannot reassign const var"; /* * 6 let */ function sampleLet1(): void { for(var i: number = 1; i<10; i++){ continue; } alert(i);//10 } function sampleLet2(): void { for(let i: number = 1; i<10; i++){ continue; } alert(i); //undefined } Const • 定数宣言できる。 • 再代入は不可 • 型推論可能 Let • 変数のスコープを縛ることができる
ちょっとやってみる アロー関数/テンプレート文字列 /* * 7 allow function */
//JavaScript like var addJs = function(a,b){ return a + b; } alert(addJs(1,2));//3 //arrow function var addType = (a: number, b:number): number => a + b; alert(addType(1,2))//3 /* * 8 template literals */ alert("今日は${Math.random() < 0.5 ? '良い' : '悪い'}日だ。"); アロー関数 • 例ではJavaScriptとTypeScriptの 比較を行っている 文字列テンプレート • 文字列中に”${}”を入れることに よって変数挿入したりできる
ちょっとやってみる クラスベースオブジェクト指向言語 /* * 9 class base object-‐oriented programming
*/ interface Data { name: string; age: number; } class sampleClass { private data: Data; constructor() { this.data = { name: "takeru", age: 38 } } get name(): string { return this.name; } } var sampleInstance = new sampleClass; alert(sampleInstance.name); JavaScriptではプロトタイプベース のみのサポートだったが、 TypeScriptによってクラスベースオ ブジェクト指向の記述が可能に
ちょっとやってみる デモコードURL http://www.typescriptlang.org/Playground#src=%0A%2F*%0A%20*%201%20Type%20annotation%0A%20*%201.1%20String%0A%20*%2F%0Avar%20sampleStr%3A%20string%3B%0AsampleStr%20%3D%20%22string%22%3B%20%2F%2Fsuccess%0AsampleStr%20%3D%201%3B %20%20%20%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%2F*%0A%20*%201.2%20number%0A%20*%2F%0Avar%20sampleNum%3A%20number%3B%0AsampleNum%20%3D%201%3B%20%20%20%20%20%20%2F%2Finteger%0AsampleNum%20%3D%201.2%3B%20%20%20%20%2F %2Ffloat%3F%0AsampleNum%20%3D%20-1.234%3B%20%2F%2Ffloat%3F%0AsampleNum%20%3D%20%22%22%3B%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%0A%2F*%0A%20*%201.3%20boolean%0A%20*%2F%0Avar%20sampleBool%3A%20boolean%3B%0AsampleBool%20%3D %20true%3B%20%20%2F%2Fsuccess%0AsampleBool%20%3D%20false%3B%20%2F%2Fsuccess%0AsampleBool%20%3D%20%22%22%3B%20%20%20%20%2F%2FType%20mismatch%20error%0AsampleBool%20%3D%201%3B%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%2F*%0A%20* %202%20Type%20inference%0A%20*%2F%0Avar%20sampleInfer1%20%3D%201%3B%0Aalert(typeof%20sampleInfer1)%3B%20%2F%2Fnumber%0A%0Avar%20sampleInfer2%20%3D%20%22hoge%22%3B%0Aalert(typeof%20sampleInfer2)%3B%20%2F%2Fstring%0A%0A%2F*%0A%20*%203%20Interface%0A%20* %2F%0Ainterface%20sampleInterface%20%7B%0A%09name%3A%20string%3B%20%2F%2F%20required%20parameter%20-%3F%20%22%3A%22%0A%09sex%3F%3A%20string%3B%20%2F%2F%20optional%20parameter%20-%3E%20%22%3F%3A%22%0A%09age%3A%20number%3B%0A%7D%0A%0Afunction %20getUserSuccess1()%3A%20sampleInterface%20%7B%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%2C%0A%09%09sex%3A%20%22male%22%2C%0A%09%09age%3A%2024%0A%09%7D%0A%7D%0A%0Afunction%20getUserSuccess2()%3A%20sampleInterface%20%7B%0A%09%2F%2F %20omit%20optional%20parameter%20%22sex%22%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%2C%0A%09%09age%3A%2024%0A%09%7D%0A%7D%0A%0Afunction%20getUserError()%3A%20sampleInterface%20%7B%0A%09%2F%2F%20Error%3A%20required%20parmeter%20%22age
%22%20is%20not%20defined%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%0A%09%7D%0A%7D%0A%0A%2F*%0A%20*%204%20default%20argument%0A%20*%2F%0Afunction%20sampleFunc1(inputString%3A%20string%20%3D%20%22default%20argument%22)%3A%20void%7B%0A %09alert(inputString)%3B%0A%7D%0A%0AsampleFunc1(%22hogehoge%22)%3B%20%2F%2F%20alert%20%22hogehoge%22%0AsampleFunc1()%3B%20%2F%2F%20alert%20%22default%20argument%22%0A%0A%2F*%0A%20*%205%20const%0A%20*%2F%0Aconst%20constVar%20%3D%20%22const%22%3B %0AconstVar%20%3D%20%22cannnot%20reassign%20const%20var%22%3B%0A%0A%2F*%0A%20*%206%20let%0A%20*%2F%0Afunction%20sampleLet1()%3A%20void%20%7B%0A%09for(var%20i%3A%20number%20%3D%201%3B%20i%3C10%3B%20i%2B%2B)%7B%0A%09%09continue%3B%0A%09%7D%0A %09alert(i)%3B%2F%2F10%0A%7D%0A%0Afunction%20sampleLet2()%3A%20void%20%7B%0A%09for(let%20i%3A%20number%20%3D%201%3B%20i%3C10%3B%20i%2B%2B)%7B%0A%09%09continue%3B%0A%09%7D%0A%09alert(i)%3B%20%2F%2Fundefind%0A%7D http://www.typescriptlang.org/Playground#src=%2F*%0A%20*%207%20allow%20function%0A%20*%2F%0A%0A%2F%2FJavaScript%20like%0Avar%20addJs%20%3D%20function(a%2Cb)%7B%0A%09return%20a%20%2B%20b%3B%0A%7D%0Aalert(addJs(1%2C2))%3B%2F%2F3%0A%0A%2F%2Farrow%20function %0Avar%20addType%20%3D%20(a%3A%20number%2C%20b%3Anumber)%3A%20number%20%3D%3E%20a%20%2B%20b%3B%0Aalert(addType(1%2C2))%2F%2F3%0A%0A%2F*%0A%20*%208%20template%20literals%0A%20*%2F%0A%0Aalert(%22%E4%BB%8A%E6%97%A5%E3%81%AF %24%7BMath.random()%20%3C%200.5%20%3F%20'%E8%89%AF%E3%81%84'%20%3A%20'%E6%82%AA%E3%81%84'%7D%E6%97%A5%E3%81%A0%E3%80%82%22)%3B%0A http://www.typescriptlang.org/Playground#src=%2F*%0A%20*%209%20class%20base%20object-oriented%20programming%20%0A%20*%2F%0Ainterface%20Data%20%7B%0A%09name%3A%20string%3B%0A%09age%3A%20number%3B%0A%7D%0A%0Aclass%20sampleClass%20%7B%0A%09private%20data%3A %20Data%3B%0A%09%0A%09constructor()%20%7B%0A%09%09this.data%20%3D%20%7B%0A%09%09%09name%3A%20%22takeru%22%2C%0A%09%09%09age%3A%2038%0A%09%09%7D%0A%09%7D%0A%09%0A%09get%20name()%3A%20string%20%7B%0A%09%09return%20this.name%3B%0A%09%7D %0A%7D%0A%0Avar%20sampleInstance%20%3D%20new%20sampleClass%3B%0Aalert(sampleInstance.name)%3B • アロー関数/テンプレート文字列 • 型注釈/型推論/インターフェイス/デフォルト引数/const/let • クラスベースオブジェクト指向言語