Browser QuickStart

Last updated 2 months ago
ブラウザでのTypeScript
TypeScriptを使用してWebアプリケーションを作成している場合は、簡単なTypeScript + React(私が選ぶUIフレームワーク)のプロジェクトのセットアップを取得することをお勧めします。
一般的なマシンのセットアップ
​Node.jsをインストールする
​Gitをインストールする
素早くプロジェクトをセットアップする
ベースとして https://github.com/basarat/react-typescript を使用してください。
git clone https://github.com/basarat/react-typescript.git
cd react-typescript
npm install
ここで、 あなたのすばらしいアプリケーションを開発する にジャンプしてください。
プロジェクトの詳細設定
そのプロジェクトがどのように作成されたかは下記の通りです。
プロジェクトのディレクトリを作成する：
mkdir your-project
cd your-project
tsconfig.jsonを作成する：
{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "lib": [
      "dom",
      "es6"
    ]
  },
  "include": [
    "src"
  ],
  "compileOnSave": false
}
package.jsonを作成する:
{
  "name": "react-typescript",
  "version": "0.0.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/basarat/react-typescript.git"
  },
  "scripts": {
    "build": "webpack -p",
    "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"
  }
}
すべてのリソースを含む単一のapp.jsファイルにモジュールをバンドルするためのwebpack.config.jsを作成する:
module.exports = {
  entry: './src/app/app.tsx',
  output: {
    path: __dirname + '/public',
    filename: 'build/app.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}
webpackが生成するindex.htmlのテンプレートとして使われるsrc/templates/index.htmlファイルです。生成されたファイルはpublicフォルダに配置され、Webサーバを通じてサーブされます：
<html>
  <body>
      <div id="root"></div>
      <script src="./build/app.js"></script>
  </body>
</html>
あなたのフロントエンドアプリケーションのエントリポイントであるsrc/app/app.tsx：
import * as React from 'react';
import * as ReactDOM from 'react-dom';
​
const Hello: React.SFC<{ compiler: string, framework: string }> = (props) => {
  return (
    <div>
      <div>{props.compiler}</div>
      <div>{props.framework}</div>
    </div>
  );
}
​
ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById("root")
);
あなたのすばらしいアプリケーションを開発する
最新のパッケージを入手するにはnpm install typescript@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest webpack@latest webpack-dev-server@latest webpack-cli@latest ts-loader@latest clean-webpack-plugin@latest html-webpack-plugin@latest --save-exactを実行してください。
npm startを実行してライブ開発を行います
​http://localhost:8080 を参照してください
src/app/app.tsx(またはsrc/app/app.tsxに使われるts/tsxファイル)を編集すれば、サーバーがライブリロードします
src/templates/index.htmlを編集すれば、サーバーがライブリロードします
npm run buildを実行して本番用のアセットをビルドします
Webサーバを通じてpublicフォルダ(ビルドされたアセットが配置される)をサーブします
Node.js QuickStart
TypeScript's Type System