読者です 読者をやめる 読者になる 読者になる

Re:ゼロから始めるNo Error No Life

ぷろぐらみんぐ的なことと趣味的な日常を少々

そんなこんなんでTypeScript始めてしまった

何かと移り変わりが激しすぎてJKかと言いたくなるJS

これがマスト

あれもマスト

それもマスト

ベストプラティクスやでーーー

ってまぁーよく記事で拝見します。 ※けーーーーっしてディスってないです

何がよくてわるくてダメであーだこーだ(ry

さてタイトルの通りTypeScript始めました(+ yarnも)

ただtutorialをやるだけだとあれなんでtutorialをちょっと改変してます。

やっている方も多いと思うのでソースをペターとしようと思う。

構成はこんな感じです

.
├── README.md
├── node_modules
├── package.json
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── Hello.tsx
│   └── index.tsx
├── tsconfig.json
├── webpack.config.js
└── yarn.lock
# tscofig.json
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}
// webpack.config.js
module.exports = {
  entry: "./src/index.tsx",
  output: {
    filename: "bundle.js",
    path: "/build",
    publicPath: '/js'
  },
  devServer: {
    contentBase: 'public',  // 公開フォルダ
    port: 3000  // portの指定
  },
  devtool: "source-map",
  resolve: {
    extensions: ["", ".webpack.js", "web.js", ".ts", ".tsx", ".js"]
  },
  module: {
    loaders: [{
      test: /\.tsx?$/, loader: "awesome-typescript-loader"
    }],
    preloaders: [{
      test: /\.js$/, loader: "source-map-loader"
    }]
  },
};

// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Hello } from './components/Hello';

ReactDOM.render(
  <Hello compiler='TypeScript' framework='view React' />,
  document.getElementById("app")
);

// Hello.tsx
import * as React from 'react';

export interface HelloProps { compiler: string; framework: string; }

export const Hello = (props: HelloProps) => <h3>Hello from {props.compiler} and {props.framework} !</h3>; 

// classの場合は以下の記述
// export class Hello extends React.Component<HelloProps, undefinde> {
//   render () {
//     return <h1>Hello from {this.props.compiler} and {this.props.framework} !</h1>
//   }
// }

こんな感じっすね。 ほんとこれだけで動くのがすげーって感動とTypeScriptがいいなーって印象

何がいいかって言われると伝えづらいけども

型を指定できることは、大きなことだと思う。

一応github

github.com

まぁー小物の所感は、さておき

みなさんストレスなき職場でストレスなき良きエンジニアライフを送りましょう!