typescriptメモ
基本の型(Basic Types, Primitive Type)
TypeScript: Handbook - Basic Types
- Boolean
- Number
- String
- Array
- Tuple
- Enum
- Unknown
- Any
- Void
- Null and Undefined
- Never
- Object
アロー関数の戻り値の型定義について理解していない。
環境構築
書いたtypescriptをjavascriptにトランスパイルするのでnpmが必要になる。
とりあえずdjnagoとtypescriptを共存させる環境を作ってみる。
参考とする記事:
【Django3.0】TypeScript と Sass でフロントエンドを書く【webpack4】 - AI can fly !!
環境
# 環境作成コマンド conda create -n try_typescript python==3.8 source activate try_typescript pip install django==3.0
# OSバージョン sw_vers ProductName: Mac OS X ProductVersion: 10.15.6 BuildVersion: 19G73
# pythonバージョン python -V Python 3.8.5
# djangoバージョン django-admin --version 3.0
環境構築コマンド
基本的なdjangoの下準備のコマンド(特にtypescriptに関係ない部分)
# プロジェクトの作成とその中でアプリを作成 mkdir try_typescript cd try_typescript/ django-admin startproject config . python manage.py startapp myapp
# config/settings.pyの編集(作成したmyappをプロジェクトに反映させる) vi config/settings.py # 以下のように追加 INSTALLED_APPS = [ "django.contrib.admin", "django.contrib.auth", "django.contrib.contenttypes", "django.contrib.sessions", "django.contrib.messages", "django.contrib.staticfiles", "myapp", # コレを追加 ]
# 親urls.pyの編集 vi config/urls.py # 以下のように編集 from django.contrib import admin from django.urls import path from django.urls import include # コレを追加 urlpatterns = [ path('admin/', admin.site.urls), path("myapp/", include("myapp.urls")), #コレを追加 ]
# 子urls.py(myapp/urls.py)の編集 vi myapp/urls.py # 以下のように編集 from django.urls import path from . import views app_name = "myapp" urlpatterns = [ path('', views.index, name='index'), ]
# views.pyを編集 vi myapp/views.py # 以下のように関数を設置する from django.shortcuts import render # Create your views here. def index(request): context = {} context["key"] = "value" return render(request, "myapp/index.html", context)
# myapp/views.indexが返すテンプレートを作成する mkdir -p myapp/templates/myapp vi myapp/templates/myapp/index.html # 以下のように記述 <h1>Hola!!</h1> <p>{{ key }}</p>
開発サーバーを起動させて動くか確認
python manage.py runserver # 起動後ブラウザで"localhost:8000/myapp"にアクセスし、作成したテンプレートが表示されればオッケイ
公開リポジトリ
GitHub - chiaki1990/base_dev_env: typescriptやvuejs環境構築練習用のベースリポジトリ
このコードをベースにtypescriptを共存させる手続きを加えていく
次にnpmをベースのコードに追加する
方法は以下を参考に。。。
node.jsのインストール方法(mac) - diadia
ベースのコードに追加する手続き(概要)
typescriptを使えるためにする手続きは以下の通りである
- npmコマンドを使って必要なパッケージを予めインストールする下準備
- 設定ファイルを調整する
上記の設定ファイルは、typescriptの詳細コンパイル設定を司るtsconfig.json、webpackの設定を司るwebpack.config.jsそしてnpm initで生成されるpackage.jsonである。
npmコマンドを使って必要なパッケージを予めインストールする下準備
$ cd try_typescript $ npm init
npm init コマンドはコマンド実行したディレクトリにpackage.jsonファイルを作成する。
もっと詳しくは以下を参考に。。。
フロントエンド開発の3ステップ(npmことはじめ) - Qiita
必要なnpmパッケージをインストールするコマンドとその理由
必要な npm パッケージをインストールする。
# webpackとwebpack-cliのインストール $ npm install --save-dev webpack webpack-cli
webpackにはいろいろな役割があるがコア機能はモジュールバンドラである。複数のjavascriptファイルを依存関係に従って一つのファイルとしてまとめ上げる。なぜ複数のjavascriptかといえばファイルごとに分けないとわけが分からなくなるから。でもファイルを分割すると読み込み順序に気をつける必要がある。この問題をwebpackは解決する。
# typescriptとtypescriptローダーのインストール $ npm install --save-dev typescript ts-loader
webpackの機能にローダーの機能があり、それを実現すためのローダー及びローダー対象をインストールする感じなのだろう。
上記はtypescript系のコマンド。
# saasとsassローダーのインストール $ npm install --save-dev sass sass-loader
webpackの機能にローダーの機能があり、それを実現すためのローダー及びローダー対象をインストールする感じなのだろう。
上記はsass系のコマンド。
# CSS関係 $ npm install --save-dev css-loader mini-css-extract-plugin postcss-loader autoprefixer
webpackの機能にローダーの機能があり、それを実現すためのローダー及びローダー対象をインストールする感じなのだろう。
@import などの依存関係の解決に css-loader 、CSS ファイルを出力するために mini-css-extract-plugin 、ベンダープレフィックスを付与するために postcss-loader と autoprefixer をインストールします。 ちなみに、ベンダープレフィックスの付与は必須ではありません。
この辺は深堀りしたいときにとっておく。
typescript初期化(tsconfig.jsonの作成)
# tscの実行 $ npx tsc init (# 以下のコマンドでも可) $ ./node_modules/.bin/tsc --init
npxはどうやらnpmでインストールしたパッケージを実行する際に使われる。npmでインストールしたパッケージを実行する際には"npm パッケージ"というコマンドは使えず、" ./node_modules/.bin/(パッケージ名) "のような形でパッケージを実行しなければならなかったんだけれども、npxを使うことでそういったパスを考えなくても直接パッケージを実行する事ができるメリットがあると分かった。npxコマンドが気に入らなければ、" ./node_modules/.bin/(パッケージ名) "を使ってtypescriptのパッケージを実行すれば良い。
tscを実行すると、tsconfig.jsonファイルが生成される。
このファイルの設定内容や設定オプションについても調べておく必要があるね。。。ちょっと大変。
tsconfig.jsonについてはどうやらtypescriptのコンパイルについて詳しく設定するためにあるファイルなのだろうと把握した。この設定詳細は公式ドキュメントにもあるし、qiitaの記事にもある。またtsconfig.jsonについて説明した記事も発見した。
tsconfig.jsonの設定項目の参考資料
TypeScript: Handbook - tsc CLI Options
TypeScript: TSConfig Reference - Docs on every TSConfig option
tsconfig.jsonの説明記事
tsconfig.jsonの全オプションを理解する(随時追加中) - Qiita
webpack.config.jsの設定内容
これは参考記事の内容をそのまま利用させてもらった。ここも詳しく理解しておく必要があるけどとりあえずdjango上でtypescriptを使えることが第一目標なので、必要になったら詳しく見ることにする。
# 手動でwebpack.config.jsを作成する vi webpack.config.js
const path = require('path'); const autoprefixer = require('autoprefixer'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { // モード mode: 'development', // エントリーポイント entry: { '[application_a]/static/[application_a]/js/main': path.resolve( __dirname, '[application_a]/static/[application_a]/js/index.ts' ), '[application_b]/static/[application_b]/js/main': path.resolve( __dirname, '[application_b]/static/[application_b]/js/index.ts' ) }, // ファイル出力先 output: { // 出力先ディレクトリ path: __dirname, // 出力ファイル名 filename: '[name].bundle.js', }, // ソースマップ devtool: 'cheap-module-eval-source-map', // ローダー module: { rules: [ { test: /\.ts$/, use: 'ts-loader', }, { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { esModule: true, }, }, { loader: 'css-loader', options: { url: false, sourceMap: true, importLoaders: 2, }, }, { loader: 'postcss-loader', options: { plugins: () => [autoprefixer()], }, }, { loader: 'sass-loader', options: { implementation: require('sass'), sassOptions: { includePaths: ['./node_modules'], }, sourceMap: true, }, }, ], }, ], }, // モジュール解決 resolve: { extensions: ['.ts', '.js'], }, // プラグイン plugins: [ new MiniCssExtractPlugin({ moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.bundle.css`, }), ], };
npm run biuldを実行するためにコンパイル対象ファイルを作成する
webpack.config.js内でentryを定めたが、それがコンパイル対象のファイルとなる。定めたファイルがない状態でnpmコマンドでコンパイルを実行しようとすると、エラーが生じてしまうことを確認した。したがって空ファイルでもいいからコンパイル対象のファイルを作成する。
vi index.ts
コンパイル実行
$ npm run build
コンパイルが成功する。
今回のコードをgithubに残す
https://github.com/chiaki1990/django_typescript_sample
今後の課題
typescriptをdjangoの中で使えるようになったわけだけれども実際にどうやって使っていくのかは分かっていない。 だからrest frameworkを使ってvueを使っていくのかとかそのへんを再度調べて形にしておきたい。
コマンドの種類について調べておきたい
npmはパッケージの管理を行うもの npxはパッケージを実行するためのもの
npm,npxについて解説してある参考資料
npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう - Qiita
理解すると良いだろうということ
package.jsonで何を定めて、何ができるようになるかということ。どんな決まりで記述するのか等
djangoの構成を理解しておきたい。
エントリーポイントを後々理解しておきたい。 今回の場合はエントリーポイントは各アプリケーション下に存在する。index.tsという形で使われる。
webpackの具体的な用途
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
- typescriptのトランスパイル
- vuejs等のJSフレームワークの利用
- Sassの利用
- Linterを用いたjavascriptの構文チェック
webpackの基本的な要素
- Entry(エントリー)
- Output(アウトプット)
- Loader(ローダー)
- Plugins(プラグイン)
webpackは以下のurlが簡潔に説明されていてわかりやすい。
www.slideshare.net