diadia

興味があることをやってみる。自分のメモを残しておきます。

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を使えるためにする手続きは以下の通りである

  1. npmコマンドを使って必要なパッケージを予めインストールする下準備
  2. 設定ファイルを調整する

上記の設定ファイルは、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? -

webpackの基本的な要素

  • Entry(エントリー)
  • Output(アウトプット)
  • Loader(ローダー)
  • Plugins(プラグイン)

webpackは以下のurlが簡潔に説明されていてわかりやすい。

www.slideshare.net