Merge pull request #98 from shuuji3/update-ts-code

Update TypeScript and other codes and fix several docs

Author: yottahmd

docs/enums.md

@@ -104,14 +104,16 @@ enum AnimalFlags {
 ここでは、左シフト演算子を使用して、特定のビットレベルに1を移動することにより、ビット単位の「0001」、「0010」、「0100」および「1000」になります(これらは10進数の1、2、4、8です。興味があれば)。ビット演算子`|`(or)/`&`(and)/`~`(not)は、ビットフラグを使って作業するときの友達です。
 
 ```ts
-
 enum AnimalFlags {
     None           = 0,
     HasClaws       = 1 << 0,
     CanFly         = 1 << 1,
 }
+type Animal = {
+    flags: AnimalFlags
+}
 
-function printAnimalAbilities(animal) {
+function printAnimalAbilities(animal: Animal) {
     var animalFlags = animal.flags;
     if (animalFlags & AnimalFlags.HasClaws) {
         console.log('animal has claws');
@@ -124,7 +126,7 @@ function printAnimalAbilities(animal) {
     }
 }
 
-var animal = { flags: AnimalFlags.None };
+let animal: Animal = { flags: AnimalFlags.None };
 printAnimalAbilities(animal); // nothing
 animal.flags |= AnimalFlags.HasClaws;
 printAnimalAbilities(animal); // animal has claws
@@ -286,4 +288,4 @@ enum Color {
 }
 ```
 
-注意しなければならないのは、前の定義(つまり、`0`、`1`、...)を除外するために、列挙の最初のメンバ(ここでは`DarkRed = 3`)を再初期化しないといけないことです。それを行わない場合は、TypeScriptは警告します(エラーメッセージ:`In an enum with multiple declarations, only one declaration can omit an initializer for its first enum element`)。
+注意しなければならないのは、前の定義(つまり、`0`、`1`、...)を除外するために、列挙の最初のメンバ(ここでは`DarkRed = 3`)を再初期化しないといけないことです。それを行わない場合は、TypeScriptは警告します(エラーメッセージ:`In an enum with multiple declarations, only one declaration can omit an initializer for its first enum element.`)。

docs/errors/common-errors.md

@@ -3,7 +3,9 @@
 
 ## TS2304
 サンプル：
-> `Cannot find name ga` `Cannot find name $` `Cannot find module jquery`
+> `Cannot find name ga`
+> `Cannot find name $`
+> `Cannot find module jquery`
 
 おそらく第三者のライブラリ(Googleアナリティクスなど)を使用しており、宣言していません。TypeScriptは、*スペルミス*や宣言しないで変数を使用すると、あなたを助けようとします。あなたは外部ライブラリを取り込んでいるので実行時に利用可能なものに明示する必要があります([修正方法](../types/ambient/d.ts.md))。
 
@@ -15,7 +17,7 @@
 
 ## TS1148
 サンプル：
-> `'Cannot compile modules unless the '--module' flag is provided`
+> `Cannot compile modules unless the '--module' flag is provided`
 
 [モジュール](../project/modules.md)のセクションをチェックしてください。
 

docs/jsx/react.md

@@ -34,22 +34,22 @@ declare module JSX {
 }
 ```
 
-### ステートレスな関数コンポーネント(Stateless Functional Components)
+### 関数コンポーネント(Functional Components)
 
-あなたは単に`React.SFC`インターフェースを使ってステートレスなコンポーネントを定義することができます。
+あなたは単に`React.FunctionComponent`インターフェースを使ってステートレスなコンポーネントを定義することができます。
 
 ```ts
 type Props = {
   foo: string;
 }
-const MyComponent: React.SFC<Props> = (props) => {
+const MyComponent: React.FunctionComponent<Props> = (props) => {
     return <span>{props.foo}</span>
 }
 
 <MyComponent foo="bar" />
 ```
 
-### ステートフルなコンポーネント(Stateful Components)
+### クラスコンポーネント(Class Components)
 
 コンポーネントは、コンポーネントの`props`プロパティに基づいて型チェックされます。これは、JSXがどのように変換されるかによってモデル化されています。例えば属性がコンポーネントの`props`になるようにモデル化されています。
 
@@ -181,7 +181,7 @@ class FocusingInput extends React.Component<{ value: string, onChange: (value: s
       <input
         ref={(input) => this.input = input}
         value={this.props.value}
-        onChange={(e) => { this.props.onChange(this.ctrls.input.value) } }
+        onChange={(e) => { this.props.onChange(e.target.value) } }
         />
       );
     }

docs/quick/browser.md

@@ -35,6 +35,9 @@ cd your-project
   "compilerOptions": {
     "sourceMap": true,
     "module": "commonjs",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "experimentalDecorators": true,
     "target": "es5",
     "jsx": "react",
     "lib": [
@@ -65,27 +68,40 @@ cd your-project
     "start": "webpack-dev-server -d --content-base ./public"
   },
   "dependencies": {
-    "@types/react": "16.4.2",
-    "@types/react-dom": "16.0.6",
-    "react": "16.4.1",
-    "react-dom": "16.4.1",
-    "ts-loader": "4.4.1",
-    "typescript": "2.9.2",
-    "webpack": "4.12.1",
-    "webpack-cli": "3.0.8",
-    "webpack-dev-server": "3.1.4"
+    "@types/react": "16.4.10",
+    "@types/react-dom": "16.0.7",
+    "clean-webpack-plugin": "0.1.19",
+    "html-webpack-plugin": "3.2.0",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
+    "ts-loader": "4.4.2",
+    "typescript": "3.0.1",
+    "webpack": "4.16.5",
+    "webpack-cli": "3.1.0",
+    "webpack-dev-server": "3.1.5"
   }
 }
 ```
 
 * すべてのリソースを含む単一の`app.js`ファイルにモジュールをバンドルするための`webpack.config.js`を作成する:
 
 ```js
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
 module.exports = {
   entry: './src/app/app.tsx',
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanAfterEveryBuildPatterns: ['public/build']
+    }),
+    new HtmlWebpackPlugin({
+      template: 'src/templates/index.html'
+    }),
+  ],
   output: {
     path: __dirname + '/public',
-    filename: 'build/app.js'
+    filename: 'build/[name].[contenthash].js'
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js']
@@ -104,18 +120,18 @@ module.exports = {
 <html>
   <body>
       <div id="root"></div>
-      <script src="./build/app.js"></script>
   </body>
 </html>
+
 ```
 
 あなたのフロントエンドアプリケーションのエントリポイントである`src/app/app.tsx`：
 
-```js
+```ts
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-const Hello: React.SFC<{ compiler: string, framework: string }> = (props) => {
+const Hello: React.FunctionComponent<{ compiler: string, framework: string }> = (props) => {
   return (
     <div>
       <div>{props.compiler}</div>

docs/quick/library.md

@@ -0,0 +1,62 @@
+## TypeScriptのnode moduleを作成する
+
+* [Typecriptのnodemoduleの作成に関するレッスン](https://egghead.io/lessons/typescript-create-high-quality-npm-packages-using-typescript)
+
+TypeScriptで書かれたモジュールを使用することは、コンパイル時の安全性とオートコンプリートが得られるので、非常に楽しいことです。
+
+TypeScriptのモジュールは、Node.jsではそのまま使用でき、ブラウザでもWebpackなどを使うことで利用できるようになります。
+
+高品質のTypeScriptモジュールの作成は簡単です。以下の望ましいフォルダ構造を仮定します。
+
+```text
+package
+├─ package.json
+├─ tsconfig.json
+├─ src
+│  ├─ index.ts
+│  ├─ foo.ts
+│  └─ ...All your source files (Authored)
+└─ lib
+  ├─ index.d.ts.map
+  ├─ index.d.ts
+  ├─ index.js
+  ├─ foo.d.ts.map
+  ├─ foo.d.ts
+  ├─ foo.js
+  └─ ... All your compiled files (Generated)
+```
+
+* `src/index.ts`: ここでは、他のプロジェクトから使用できるようにしたいすべてのものをexportします。たとえば、`export { Foo } from './foo';`などを書きます。このファイルからexportしたオブジェクトは、このライブラリを使用する他の人が `import { /* Here */ } from 'example';` のように書いてimportすることができるようになります。
+
+* `tsconfig.json`について
+  * `compilerOptions`に`"outDir": "lib"`と、`"declaration": true`と`"declarationMap" : true`を設定します < これは、libフォルダに`.js` (JavaScript)と`.d.ts` (型安全性のための型宣言)と`.d.ts.map` (このファイルは、IDE上で`declaration .d.ts` => `source .ts`というナビゲーションを可能にします)が生成されます
+  * `include: ["src"]`を設定します < これは`src`ディレクトリからのすべてのファイルを対象に含めます
+
+* `package.json`について
+  * `"main": "lib/index"` < これはNode.jsに`lib/index.js`をロードするように指示します
+  * `"types": "lib/index"` < これはTypeScriptに`lib/index.d.ts`をロードするように指示します
+
+
+パッケージの例：
+* `npm install typestyle` [for TypeStyle](https://www.npmjs.com/package/typestyle)
+* 使用法：`import { style } from 'typestyle';`は、完全な型安全性を提供します
+
+### Dependenciesの管理
+
+#### devDependencies
+
+* パッケージの開発中にのみ他のパッケージに依存している場合(例: `prettier`)、依存するパッケージは`devDependency`に追加します。こうすることで、あなたのパッケージを使用するユーザーの`node_modules`には開発用の依存パッケージをインストールしないようにできます(`npm i foo`というコマンドを実行した場合には、`foo`のdevDependencies`はインストールされないためです)。
+*`typescript`は通常パッケージのビルド時にのみ使用されるため、`devDependency`に追加します。パッケージのユーザーはTypeScriptなしでもあなたのパッケージを利用できます。
+* あなたのパッケージがJavaScriptで作られた他のパッケージに依存していて、あなたのプロジェクトでは型安全性を活用したい場合には、依存しているパッケージの型パッケージ(例: `@types/foo`)を`devDependencies`に追加してください。JavaScriptの型は、メインのNPMエコシステムの*外側で*管理されています。JavaScriptエコシステムでは、セマンティックバージョニングを使用していない場合には特に、型が破壊されるのは日常茶飯事です。そのため、ユーザーが型を使用したい場合には、自分でパッケージに適したバージョンの型`@types/foo`をインストールする必要があります。型パッケージをインストールするようにユーザーに支持したい場合には、次のセクションに示すように、パッケージを`peerDependencies`に追加します。
+
+#### peerDependencies
+
+あなたのパッケージが依存するパッケージで、(*インストールしないと動作しない*というわけではなく)同時にインストールしたときに*よりよく動作する*というようなパッケージがある場合には、生のJSパッケージでするのと同じように、そのパッケージを`peerDependencies`に追加してください(たとえば、`react`など)。ローカルでテストする場合にも、`devDependencies`に追加する必要があります。
+
+このように設定を行うことで、次のように動作するようになります。
+* パッケーの開発中は、`devDependencies`で指定したバージョンのパッケージがインストールされます。
+* 他のユーザーがあなたのパッケージをインストールした場合には、`devDependencies`で指定されたパッケージはインストール*されません*が、あなたのパッケージの`peerDependencies`に指定されているパッケージが存在しない場合には、ユーザーにそのパッケージをインストールするべきであるという警告が表示されます。
+
+#### dependencies
+
+あなたのパッケージが他のパッケージの*ラッパー*である場合(つまり、TypeScriptのコンパイル後にも内部で他のライブラリを使用する場合)には、そのパッケージは`dependencies`に追加しなければなりません。そうすることで、あなたのパッケージをインストールしたユーザーはあなたのパッケージに加えて、その依存パッケージを同時にインストールできるようになります。

docs/quick/nodejs.md

@@ -19,7 +19,8 @@ TypeScriptは、Node.jsを公式にサポートしています。素早くNode.j
 ```json
   "scripts": {
     "start": "npm run build:live",
-    "build:live": "nodemon --exec ./node_modules/.bin/ts-node -- ./index.ts"
+    "build": "tsc -p .",
+    "build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
   },
 ```
 
@@ -29,50 +30,7 @@ TypeScriptは、Node.jsを公式にサポートしています。素早くNode.j
 * ts-nodeは自動的にtsconfig.jsonとインストールされたTypeScriptバージョンを取得し、トランスパイルを行う
 * ts-nodeは出力されたJavaScriptをNode.jsで実行する
 
-## TypeScriptのnode moduleを作成する
-
-* [Typecriptのnodemoduleの作成に関するレッスン](https://egghead.io/lessons/typescript-create-high-quality-npm-packages-using-typescript)
-
-TypeScriptで書かれたモジュールを使用することは、コンパイル時の安全性とオートコンプリートが得られるので、非常に楽しいことです。
-
-高品質のTypeScriptモジュールの作成は簡単です。以下の望ましいフォルダ構造を仮定します。
-
-```text
-package
-├─ package.json
-├─ tsconfig.json
-├─ src
-│  ├─ All your source files
-│  ├─ index.ts
-│  ├─ foo.ts
-│  └─ ...
-└─ lib
-  ├─ All your compiled files
-  ├─ index.d.ts
-  ├─ index.js
-  ├─ foo.d.ts
-  ├─ foo.js
-  └─ ...
-```
-
-
-* `tsconfig.json`について
-  * `compilerOptions`に`"outDir": "lib"`と、`"declaration": true`を設定します < これは宣言ファイルとjsファイルをlibフォルダに生成します
-  * `"include": ["./src / ** / *"]`を設定します < これは`src`ディレクトリからのすべてのファイルを対象に含めます
-
-* `package.json`について
-  * `"main": "lib/index"` <これはNode.jsに`lib/index.js`をロードするように指示します
-  * `"types": "lib/index"` <これはTypeScriptに`lib/index.d.ts`をロードするように指示します
-
-
-パッケージの例：
-* `npm install typestyle` [for TypeStyle](https://www.npmjs.com/package/typestyle)
-* 使用法：`import { style } from 'typestyle';`は、完全な型安全性を提供します
-
-MORE:
-
-* あなたのパッケージが他のTypeScriptで作られたパッケージに依存している場合は、そのまま生のJSパッケージと同様に`dependencies`/`devDependencies`/ `peerDependencies`に入れてください
-* パッケージが他のJavaScript作成パッケージに依存していて、プロジェクトで型安全性を使用する場合は、それらの型定義(`@types/foo`など)を`devDependencies`に入れます。JavaScriptの型は、主なNPMの流れの*範囲外で*管理する必要があります。JavaScriptのエコシステムでは、セマンティックなバージョン管理が行われていない場合、型をあまりにも簡単に壊すので、ユーザーが型を必要とする場合は、それらに対応する`@types/foo`のバージョンをインストールする必要があります。
+JavaScriptアプリケーションのデプロイの準備が完了したが、`npm run build`を実行します。
 
 ## ボーナスポイント