typescriptただのメモ

npm init -y

tsc ファイル名　でコンパイルできる
tsc で全部コンパイルされる

tsc --init
tsconfig.jsonができる

tsconfig.jsonがないときは、ファイルを指定して行う。
tscで一度に行うことができ、そのコンパイル方法をtsconfig.jsに記載する。

tsconfig.js

include

exclude 除く
**/ 全てのフォルダにあるファイルを含む

includeよりexcludeの除外が優先される

filesは、excludeにあっても優先される

targetはどのjavascriptのバージョンにコンパイルするかということである。

lib コメント化するとtargetにより自動的に決められる

sourceMap ファイル名.js.mapを生成し、ブラウザでtsが見れるようになる。本来ブラウザでは見れない。

outDir
rootDir

noEmitOnError

strict
noImplicitAny //暗黙的なanyは避ける trueにするとエラーにする。

パラメータは型定義要、変数定義はあとで代入したもので自動的に型定義をする

strictNullChecks
strictFunctionTypes

Additional Checks
noUnusedLocal 使用しない変数を認めない
noUnusedParameters
noImplicitReturns

moduleはコンパイルでどうなるかを指定する

importが可能なのはES6から

serve

tsファイルのimport、export記載

importの書き方

export の書き方
defaultもある

webpackを使う

・キーワード
entry
output
devtool

packcage.jsonに確かscriptにbuildを追加する
npm run buildで、bundle.jsとか１つに圧縮される
outputのfilenameに名前をしている、pathでpathを理解させる

typescriptを利用する
typescriptを直接バンドルする
npm install -save-dev ts-loader typescript
以下追加

  module:{
    rules:[{
      test:/\.ts$/,
      use:'ts-loader',
      exclude:/node_modules/
    }]
  }

jsの拡張子は消す、tsは付けない、もしくは@ts-ignoreをつける
拡張子がなかったらつけるオプションを追加

  resolve:{
    extensions:['.ts','.js']
  }

npm install --save-dev web-dev-server

scriptに "start": "webpack-dev-server" を追加
npm run start http://localhost:8080/で動いてエラーがわかる

この時,bundle.jsはメモリで持っているだけである
直下に持つことになる。
distに持ちたい場合は、 webpack.config.jsのoutputにpublicPath:'/dist'を追加する

これで自動でブラウザにconsoleが反映される

mode
prod とdevelop

開発用と本番用を作る
webpack.dev.js
webpack.prod.js

package.jsonのscriptで調整
--configで引数を指定

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start":  "webpack-dev-server --config webpack.dev.js"
  },

npm install --save-dev clean-webpack-plugin

webpackを使用するときで、node_modulesをimportで呼び出す時、 tsconfig.jsonのmoduleResolution:noneにする

ブラウザはES6以上でしか認識できない

nodeにtypescriptを使用

npm init -y
tsc --init

ts-node nodemon

package.jsonのscriptにstartを追加
"start": "nodemon dist/app.js"