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
190
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
36
効果的なチームワークを体験するワークショップ
takeru_ichii_0901
3
640
Rails on Kubernetes -どうする?〇〇-
takeru_ichii_0901
3
7.9k
2015-11-30_dockerでドッカンドッカンする話
takeru_ichii_0901
1
370
20151208 IoTイントロダクション
takeru_ichii_0901
0
210
MS Officeの便利な使い方 - VBAで始めるプログラミングのススメ
takeru_ichii_0901
0
600
Other Decks in Programming
See All in Programming
実践AIチャットボットUI実装入門
syumai
7
2.4k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
910
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
210
Learn CPU architecture with Assembly
akkeylab
1
1.3k
CSC305 Lecture 02
javiergs
PRO
1
260
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.2k
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
1k
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
460
パフォーマンスチューニングで Web 技術を深掘り直す
progfay
18
4.9k
株式会社 Sun terras カンパニーデック
sunterras
0
190
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
iOSDC.pdf
chronos2500
2
650
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
How to Ace a Technical Interview
jacobian
280
23k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Making Projects Easy
brettharned
118
6.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Statistics for Hackers
jakevdp
799
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
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 • クラスベースオブジェクト指向言語