{"id":4150,"date":"2019-05-03T12:57:27","date_gmt":"2019-05-03T03:57:27","guid":{"rendered":"https:\/\/greentown.tokyo\/?p=4150"},"modified":"2019-05-03T12:57:27","modified_gmt":"2019-05-03T03:57:27","slug":"typescript","status":"publish","type":"post","link":"https:\/\/greentown.tokyo\/?p=4150","title":{"rendered":"TypeScript"},"content":{"rendered":"<p>\bGW\u3042\u3068\u6b8b\u308a4\u65e5\u30fb\u30fb\u3002\u3042\u3063\u3068\u3044\u3046\u9593\u3067\u3059\u3002<\/p>\n<p>\u4eca\u65e5\u306fTypeScript\u3084\u308b\u3067\u3059\u3002<\/p>\n<p><a href=\"https:\/\/oukayuka.booth.pm\/items\/1312652\">https:\/\/oukayuka.booth.pm\/items\/1312652<\/a><\/p>\n<p><a href=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8.png\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-4130\" src=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-300x300.png\" alt=\"\" width=\"300\" height=\"300\" srcset=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-300x300.png 300w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-150x150.png 150w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-768x766.png 768w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-100x100.png 100w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-400x400.png 400w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-60x60.png 60w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8.png 1012w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>\u5f15\u304d\u7d9a\u304d\u3001\u3053\u306e\u7d20\u6575\u3059\u304e\u308b\u672c\u3002<\/p>\n<h2>TypeScript<\/h2>\n<h6>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h6>\n<pre class=\"theme:dark-terminal lang:default decode:true \">npm i -g typescript ts-node<\/pre>\n<h6>ts-node \u3063\u3066\u4f55\uff1f<\/h6>\n<ul>\n<li>node\u30b3\u30de\u30f3\u30c9\u3067js\u30d5\u30a1\u30a4\u30eb\u3092\u5b9f\u884c\u3059\u308b\u3068\u540c\u3058\u3088\u3046\u306b\u3001ts-node\u3067ts\u30d5\u30a1\u30a4\u30eb\u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/li>\n<li>\u3053\u308c\u306a\u3044\u3068\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb\u3059\u308b\u4f5c\u696d\u304c\u5fc5\u8981\u30fb\u30fb\u3089\u3057\u3044\uff1f\uff08\u3063\u3066\u4ed6\u306e\u30b5\u30a4\u30c8\u3067\u307f\u305f\uff09<\/li>\n<\/ul>\n<h6>\u30c8\u30e9\u30f3\u30b9\u30d1\u30a4\u30eb<\/h6>\n<ul>\n<li>\u30c8\u30e9\u30f3\u30b9\u30b3\u30f3\u30d1\u30a4\u30eb<\/li>\n<li>\u3042\u308b\u8a00\u8a9e\u304b\u3089\u3042\u308b\u8a00\u8a9e\u3078\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b<\/li>\n<li>\u9ad8\u6c34\u6e96\u2192\u4f4e\u6c34\u6e96\u3067\u306f\u306a\u304f\u3001\u540c\u3058\u7a0b\u5ea6\u306e\u6c34\u6e96\u30b3\u30fc\u30c9\u306b\u5909\u63db\u3059\u308b<\/li>\n<\/ul>\n<p>\u66f8\u7c4d\u901a\u308a\u306b\u3001\u30bf\u30fc\u30df\u30ca\u30eb\u304b\u3089 REPL\u4f7f\u3063\u3066\u5b9f\u884c\u3057\u305f\u307f\u305f\u3093\u3060\u3051\u3069\u3001\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u52d5\u304b\u305a\u3002\u3002\u306a\u305c\uff1f<\/p>\n<p>vscode\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u4e0a\u3067\u3084\u3063\u3066\u307f\u305f\u3089\u3001\u3046\u307e\u304f\u52d5\u3044\u305f\u3067\u3059\u3002\u306a\u3093\u3067\u3060\u308d\u3046\u3002\u3002<\/p>\n<p><a href=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/5e9fc1ac7216ae21f4b84319626be8c2.png\"><img decoding=\"async\" class=\"alignnone wp-image-4151 size-full\" src=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/5e9fc1ac7216ae21f4b84319626be8c2.png\" alt=\"\" width=\"1390\" height=\"618\" srcset=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/5e9fc1ac7216ae21f4b84319626be8c2.png 1390w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/5e9fc1ac7216ae21f4b84319626be8c2-300x133.png 300w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/5e9fc1ac7216ae21f4b84319626be8c2-768x341.png 768w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/5e9fc1ac7216ae21f4b84319626be8c2-1024x455.png 1024w\" sizes=\"(max-width: 1390px) 100vw, 1390px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>\u578b<\/h3>\n<ul>\n<li>number<\/li>\n<li>string<\/li>\n<li>boolean<\/li>\n<li>symbol<\/li>\n<li>null<\/li>\n<li>undefined<\/li>\n<\/ul>\n<h3>\u914d\u5217<\/h3>\n<pre class=\"lang:js decode:true \">const ary1: number[] = [1,2,3];\r\nconsole.log(ary1);\r\nconst ary2: Array&lt;number&gt;=[1,2,3]\r\nconsole.log(ary2);\r\n\r\n\/\/ \u3069\u3063\u3061\u3082\u540c\u3058\uff08ary1\u306e\u66f8\u304d\u65b9\u3092\u4f7f\u3046\u3053\u3068\uff09<\/pre>\n<pre class=\"theme:dark-terminal lang:default decode:true \">$ ts-node test5.ts \r\n[ 1, 2, 3 ]\r\n[ 1, 2, 3 ]<\/pre>\n<h3>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8<\/h3>\n<pre class=\"lang:js decode:true \">const hanako: { name:string,age:number } = { name:'hanako',age:19 };\r\n\r\ninterface User {\r\n    name: string;\r\n    age?:number; \/\/ ?\u3092\u4ed8\u3051\u308b\u3068\u7701\u7565OK\r\n}\r\nconst sakura: User = { name:'sakura', age:20 };\r\nconst karen: User = { name:'karen'};\r\n\r\n\/\/ type\u306f\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u306b\u5225\u306e\u540d\u524d\u3092\u4ed8\u3051\u308b\r\n\/\/ \u578b\u540c\u58eb\u306e\u5408\u6210\u3067\u4f7f\u3046\r\ntype Person = User;\r\nconst taro: Person = { name:'Taro', age:25 };\r\nconst jiro: Person = { name:'jiro' }\r\n\r\nconsole.log(hanako);\r\nconsole.log(sakura);\r\nconsole.log(karen);\r\nconsole.log(taro);\r\nconsole.log(jiro);<\/pre>\n<pre class=\"theme:dark-terminal lang:default decode:true \">$ ts-node test6.ts \r\n{ name: 'hanako', age: 19 }\r\n{ name: 'sakura', age: 20 }\r\n{ name: 'karen' }\r\n{ name: 'Taro', age: 25 }\r\n{ name: 'jiro' }<\/pre>\n<h6>\u578b\u306e\u5408\u6210<\/h6>\n<pre class=\"lang:js decode:true \">interface Foo { hoge?: number, fuga: string };\r\ninterface Bar { hoge: number };\r\ninterface Buz { piyo: string };\r\n\r\ntype FooBar1 = Foo &amp; Bar;\r\nconst test1: FooBar1 = { fuga:'test1', hoge: 10 }\r\nconst test2: FooBar1 = { hoge:20, fuga:'test2' }\r\ntype FooBar2 = Foo | Bar;\r\nconst test3: FooBar2 = { hoge:100, fuga: 'test3' }\r\nconst test4: FooBar2 = { hoge: 200 }\r\ntype BarFooBuz = Bar &amp;(Foo | Buz);\r\nconst test5: BarFooBuz = { fuga:'test5', hoge:300 }\r\n\r\nconsole.log(test1);\r\nconsole.log(test2);\r\nconsole.log(test3);\r\nconsole.log(test4);\r\nconsole.log(test5);<\/pre>\n<pre class=\"theme:dark-terminal lang:default decode:true \">$ ts-node test7.ts \r\n{ fuga: 'test1', hoge: 10 }\r\n{ hoge: 20, fuga: 'test2' }\r\n{ hoge: 100, fuga: 'test3' }\r\n{ hoge: 200 }\r\n{ fuga: 'test5', hoge: 300 }<\/pre>\n<p>\u5408\u6210\u30bf\u30a4\u30d7<\/p>\n<ul>\n<li>\u4ea4\u5dee\u578b\uff08Intersection Type\uff09<\/li>\n<li>\u5171\u7528\u578b\uff08Union Type\uff09<\/li>\n<\/ul>\n<h3>const\u3060\u3051\u3069\u3001\u8981\u7d20\u306b\u306f\u4ee3\u5165\u3067\u304d\u3061\u3083\u3046<\/h3>\n<pre class=\"lang:js decode:true \">const ary=[1,2,3]\r\nconsole.log(ary);\r\nary[1]=10;\r\nconsole.log(ary);\r\n\r\nconst obj={ a:1, b:2 }\r\nconsole.log(obj);\r\nobj.b=1000;\r\nconsole.log(obj);<\/pre>\n<pre class=\"theme:dark-terminal lang:default decode:true\">$ ts-node test8.ts \r\n[ 1, 2, 3 ]\r\n[ 1, 10, 3 ]\r\n{ a: 1, b: 2 }\r\n{ a: 1, b: 1000 }<\/pre>\n<h6>ReadOnly\u578b\uff08TypeScript3.4\u304b\u3089\uff09<\/h6>\n<p>ReadOnly\u578b\u306f\u30ea\u30ea\u30fc\u30b9\u3055\u308c\u305f\u3070\u304b\u308a\u3060\u304b\u3089\u5b89\u5b9a\u3057\u3066\u3044\u308b\u304b\u306f\uff1f<\/p>\n<p><a href=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/f70cd837b8dcf58e4a1ef8dd02c04df2.png\"><img decoding=\"async\" class=\"alignnone wp-image-4161 size-full\" src=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/f70cd837b8dcf58e4a1ef8dd02c04df2.png\" alt=\"\" width=\"1266\" height=\"666\" srcset=\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/f70cd837b8dcf58e4a1ef8dd02c04df2.png 1266w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/f70cd837b8dcf58e4a1ef8dd02c04df2-300x158.png 300w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/f70cd837b8dcf58e4a1ef8dd02c04df2-768x404.png 768w, https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/f70cd837b8dcf58e4a1ef8dd02c04df2-1024x539.png 1024w\" sizes=\"(max-width: 1266px) 100vw, 1266px\" \/><\/a><\/p>\n<p>\u3061\u3083\u3093\u3068\u30c1\u30a7\u30c3\u30af\u3057\u3066\u304f\u308c\u308b\uff01<\/p>\n<p>ReadOnly\u4f7f\u308f\u306a\u3044\u306a\u3089\u3001\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3092\u6307\u5b9a\u3057\u3066\u5024\u3092\u4e0a\u66f8\u304d\u3057\u306a\u3044\u3088\u3046\u306b\u6c17\u3092\u3064\u3051\u308b\u3002<\/p>\n<p>\u2192\u66f8\u304d\u63db\u3048\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u65b0\u3057\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u30b3\u30d4\u30fc\u3059\u308b\u3068\u826f\u3044\u3002<\/p>\n<pre class=\"lang:js decode:true \">const colorObj = { red: 'ff0000', green:'00ff' };\r\nconsole.log(colorObj);\r\nconst newColorObj = { ...colorObj, green: '00ee00', bule:'0000ff'};\r\nconsole.log(newColorObj);<\/pre>\n<pre class=\"theme:dark-terminal lang:default decode:true \">$ ts-node test10.ts \r\n{ red: 'ff0000', green: '00ff' }\r\n{ red: 'ff0000', green: '00ee00', bule: '0000ff' }<\/pre>\n<p>&nbsp;<\/p>\n<h3>\u95a2\u6570<\/h3>\n<ul>\n<li>\u5f15\u6570\u306f\u578b\u6307\u5b9a\u5fc5\u8981<\/li>\n<li>\u623b\u308a\u5024\u306f\u578b\u63a8\u8ad6\u3055\u308c\u308b<\/li>\n<\/ul>\n<pre class=\"lang:js decode:true \">const add = (n:number, m:number): number =&gt; n + m;\r\nconsole.log(add(1,3));\r\n\r\nfunction subtr(n:number, m:number): number { return n-m; };\r\nconsole.log(subtr(10,3));\r\n\r\nconst gree = (): void =&gt; { console.log('hi!') };\r\ngree();<\/pre>\n<pre class=\"theme:dark-terminal lang:default decode:true \">$ ts-node test11.ts \r\n4\r\n7\r\nhi!<\/pre>\n<p>const add = (n<span style=\"color: #ff6600;\"><strong>:number<\/strong><\/span>, m<strong><span style=\"color: #ff6600;\">:number<\/span><\/strong>)<strong><span style=\"color: #0000ff;\">: number<\/span><\/strong> =&gt; n + m;<br \/>\nfunction subtr(n<span style=\"color: #ff6600;\"><strong>:number<\/strong><\/span>, m<span style=\"color: #ff6600;\"><strong>:number<\/strong><\/span>)<strong><span style=\"color: #0000ff;\">: number<\/span> <\/strong>{ return n-m; };<br \/>\nconst gree = ()<span style=\"color: #0000ff;\"><strong>: void<\/strong><\/span> =&gt; { console.log(&#8216;hi!&#8217;) };<\/p>\n<p><strong><span style=\"color: #ff6600;\">\u5f15\u6570\u306e\u578b\u6307\u5b9a<\/span><\/strong>\u3001<strong><span style=\"color: #0000ff;\">\u623b\u308a\u5024\u306e\u578b\u6307\u5b9a<\/span><\/strong><\/p>\n<h6>ReturnType<\/h6>\n<ul>\n<li>\u623b\u308a\u5024\u306e\u578b\u3092\u4e88\u3081\u8a2d\u5b9a\u3057\u3066\u304a\u304f\uff1f<\/li>\n<li>\u578b\u3092\u8907\u6570\u95a2\u6570\u306e\u623b\u308a\u5024\u306e\u3092\u5171\u7528\u4f53\u578b\u3068\u3057\u3066\u4f5c\u308a\u305f\u3044\u5834\u5408\u3068\u304b<\/li>\n<li>Redux\u3067\u3088\u304f\u4f7f\u3046<\/li>\n<\/ul>\n<pre class=\"lang:js decode:true \">const gree2 = () =&gt; '\u304a\u306f';\r\ntype Gree2 = ReturnType&lt;typeof gree2&gt;;\r\nconst gree3 = (): Gree2 =&gt; '\u304a\u306f\u3088';\r\nconsole.log(gree2());\r\nconsole.log(gree3());<\/pre>\n<pre class=\"theme:dark-terminal lang:default decode:true \">$ ts-node test12.ts \r\n\u304a\u306f\r\n\u304a\u306f\u3088<\/pre>\n<h3>tsconfig.json<\/h3>\n<ul>\n<li>\u30b3\u30f3\u30d1\u30a4\u30eb\u306e\u8a2d\u5b9a\u3092\u884c\u3046\u30d5\u30a1\u30a4\u30eb<\/li>\n<li>Create React App\u3067\u751f\u6210\u3055\u308c\u308b<\/li>\n<li>\u5b9f\u884c\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u306a\u3044\u3068\u89aa\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u9061\u3063\u3066\u63a2\u3057\u306b\u884c\u304f<\/li>\n<li>\u7d76\u5bfe\u30d1\u30b9\u30a4\u30f3\u30dd\u30fc\u30c8\uff08import { MyComponent } from &#8216;.\/componemt\/MyComponent&#8217;;\uff09\u304c\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u306a\u3044<\/li>\n<\/ul>\n<h3>\u30e2\u30b8\u30e5\u30fc\u30eb<\/h3>\n<p>npm i &#8211;save-dev typescript @types\/express<br \/>\nyarn info @types\/react-router<\/p>\n<p>\u3053\u306e @ \u30de\u30fc\u30af\u306e\u66f8\u304d\u65b9\u3063\u3066\u4f55\uff1f<\/p>\n<ul>\n<li>TypeScript\u7528\u306b\u578b\u5b9a\u7fa9\u3055\u308c\u305fJavaScript\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u63a2\u3059\u6642\u306b\u4f7f\u3046<\/li>\n<li>DefinitlyTyped\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u63d0\u4f9b\u3057\u3066\u3044\u308b\uff08\u975e\u516c\u5f0f\uff09<\/li>\n<li>yarn info @types\/\u30d1\u30c3\u30b1\u30fc\u30b8\u540d \u3063\u3066\u611f\u3058\u3067\u4f7f\u3046<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\bGW\u3042\u3068\u6b8b\u308a4\u65e5\u30fb\u30fb\u3002\u3042\u3063\u3068\u3044\u3046\u9593\u3067\u3059\u3002 \u4eca\u65e5\u306fTypeScript\u3084\u308b\u3067\u3059\u3002 https:\/\/oukayuka.booth.pm\/items\/1312652 \u5f15\u304d\u7d9a\u304d\u3001\u3053\u306e\u7d20\u6575\u3059\u304e\u308b\u672c\u3002 Type &#8230; <\/p>\n","protected":false},"author":1,"featured_media":4130,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[79,97],"tags":[],"class_list":["post-4150","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-note","category-react"],"_links":{"self":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/4150"}],"collection":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4150"}],"version-history":[{"count":18,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/4150\/revisions"}],"predecessor-version":[{"id":4171,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/posts\/4150\/revisions\/4171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=\/wp\/v2\/media\/4130"}],"wp:attachment":[{"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/greentown.tokyo\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}