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
29
効果的なチームワークを体験するワークショップ
takeru_ichii_0901
3
600
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
GoとPHPのインターフェイスの違い
shimabox
2
210
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
300
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
190
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
890
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1k
Domain-Driven Transformation
hschwentner
2
1.9k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
CloudNativePGを布教したい
nnaka2992
0
110
sappoRo.R #12 初心者セッション
kosugitti
0
280
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
KATA
mclloyd
29
14k
Writing Fast Ruby
sferik
628
61k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Producing Creativity
orderedlist
PRO
344
40k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
BBQ
matthewcrist
87
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Music & Morning Musume
bryan
46
6.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
RailsConf 2023
tenderlove
29
1k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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 • クラスベースオブジェクト指向言語