Zenn
Closed10

TypeScriptって何??

TypeScript
npm
GitHub Actions
ピン留めされたアイテム
enchanenchan

TL;DR なるべくプリミティブにTypeScriptでnpmパッケージを開発するには?

結局最終的に知りたいのはここで…

enchanenchan

1. パッケージの初期化

  • いつもの npm --init [1]
  • 依存関係にTypeScriptを追加 npm install typescript [2]
    パッケージ自体がtypescriptを要求するので、 -D ではないと思う たぶん…

2. TypeScriptの設定ファイルを作成

  • npx tsc --init で tsconfig.json をつくる [3]
  • サバイバルTypeScriptのページ[4] を参考に、tsconfig.json の設定を行う [5]

3. ソースファイルの作成

  • src/main.ts を作成し、基本的なTypeScriptコードを記述 [6]
    main.ts
    //
// hello-ts
//

const now: Date = new Date();
const message: string = `Hello, TypeScript! now: ${now.toISOString()}`;

4. ビルド・実行

  • tsc を使ってコンパイル npx tsc
    • これにより dist ディレクトリに src ディレクトリのソースをコンパイルした結果が出力される
  • 実行はそのまま node dist/main.js
    $ node dist/main.js         
Hello, TypeScript! now: 2023-09-14T01:35:27.415Z

5. 諸々修正

  • package.json の main フィールドの値はデフォルトで index.js だが、no such file
    • コンパイル後に出力される方 (dist/main.js) を指定する [7]
  • このパッケージを入れる側は別にts-requiredではないので、devdepsに移動 [8]
  • ビルドが面倒なので package.json に追記 [9]
脚注

  1. c38bb81 ↩︎

  2. 191ff58 ↩︎

  3. 02602e1 ↩︎

  4. tsconfig.jsonを設定する - 2020年版スクラッチから作るなら ↩︎

  5. 20afba8 ↩︎

  6. d8fbf45 ↩︎

  7. 98fcaa2 ↩︎

  8. 6059171 ↩︎

  9. 4c7d9dd ↩︎

enchanenchan

GitHubからインストールできるようにする

デフォルトでは TSのコンパイル結果であるdist はgitignoreされているので、 npm install <repo_url> してもまともに動かない.
そこで、gitのorphanブランチ[1] を使ってreleaseとdevelopを明確に分けてみる

1. npm pack でパッケージをpack

npm-pack を使うと、パッケージをtar.gz にパックすることができる [2]. package.json の scripts には prepack というフィールドを追加でき、ここに npm run build を入れておけばpack時に自動でビルドが走る. さらに files フィールドを dist にすれば、packされたパッケージから src を除外できる! [3]

2. GitHub Actionsをいい感じに構成する

src または package.json、package-lock.json が変更されたタイミングで動作し、パッケージをpackして展開してコミットするActionを構成する [4]

3. 普通に開発する

アクションが働けば releaseブランチにパッケージのビルド結果が公開される！

4. 他パッケージからインストールする

masterブランチからinstallしようとすると例の如くエラーになるので、そもそもpreinstallか何かで「masterからインストールしちゃダメよ！」 って言った方がいい気がする [5]

ただこれだとpreinstallがつぶされるので、もう少し何かないかなあという感じ
スクリプトとかにしてもよいかも

脚注

  1. https://git-scm.com/docs/git-checkout#Documentation/git-checkout.txt---orphanltnew-branchgt ↩︎

  2. https://docs.npmjs.com/cli/v7/commands/npm-pack ↩︎

  3. 2ce5f7f ↩︎

  4. e5b43e7 ↩︎

  5. 7896618 ↩︎

enchanenchan

できた

他パッケージから利用する場合:

パッケージを初期化して

$ npm init

ブランチを指定してインストール

$ npm i Enchan1207/hello-ts#release

(ブランチを指定しないとインストール前に怒られる)

$ npm i Enchan1207/hello-ts
...
npm ERR! > hello-ts@0.1.0 preinstall
npm ERR! > echo "
npm ERR! > 
npm ERR! > It seems that you're trying to install from the master branch. 
npm ERR! > Please install from release branch. (e.g. npm i Enchan1207/hello-ts#release)";exit 1
npm ERR! 
npm ERR! 
npm ERR! 
npm ERR! It seems that you're trying to install from the master branch. 
npm ERR! Please install from release branch. (e.g. npm i Enchan1207/hello-ts#release)
...

呼び出す

index.js
require("hello-ts");

動かす

$ node index.js
Hello, TypeScript! now: 2023-09-14T03:26:45.521Z
enchanenchan

Overview

TypeScriptを全く理解できていない人間が色々調べてまとめるスクラップ

enchanenchan

まず…TypeScriptとは…何か

  • JavaScriptのスーパーセット [1]
    • JavaScriptに静的な型付けが追加されている
    • スーパーセット ∴ jsのコードはtsのコードとして(文法的には)有効
      • 型チェックで怒られる可能性はある
  • jsはブラウザやnodeで直接実行できるが、tsはそれができない
    • 「コンパイル」することで .ts から .js を生成できる
    • 型情報はコンパイルの過程で検証され、出力されるjsファイルに直接含まれることはない [2]
      • コード内で「型によって動作が変わる」的なことしようとするとどうなるんだろね?
    • tsの純粋なランタイムはない
      • ts-node のようなパッケージを使うことで(実質)そのまま実行できる[3]
  • tsのコンパイラは typescript が提供[4]する tsc を使うのが一般的
    • tscの実体は巨大なjs 内部では node_modules/typescript/lib/tsc.js を呼び出している
      • このスクリプト自体 tsで書かれたものをコンパイルしたものみたい? [5]
脚注

  1. https://typescriptbook.jp/overview/features ↩︎

  2. https://typescriptbook.jp/overview/typescript-is-not-that#typescriptコンパイラは最適化しない ↩︎

  3. https://www.npmjs.com/package/ts-node ↩︎

  4. https://www.npmjs.com/package/typescript ↩︎

  5. https://github.com/Microsoft/TypeScript/tree/main/src/compiler ↩︎

enchanenchan

パッケージマネージャとの関係

  • TypeScriptとnpmやらyarnやらのパッケージマネージャは無関係 (勝手に勘違いしていた)
    • tscなどのインストールにはnpmが必要になるが、それはあくまでそれらがnpmパッケージとして提供されているからで、tsに直接関わりがあるわけじゃない
    • 極論tscさえ動けばts開発はできる
      • tscだけグローバルインストールしてプロジェクトではMakefileで管理ってのも不可能ではない?
        • なぜそうしないか: そうする理由がないから? 結局実行にあたってはnodeが必要になるし、それと密接に関わるnpmのパッケージとしてアプリケーション自体を作り始めるのは自然な流れ
    • tsc --init で package.json が生成・変更されないことからも明らか
      • もしnpm前提なら、tscはコンパイル以外に「ts用にoptimizeされたnpmパッケージの雛形」を生成する機能を備えているはず
enchanenchan

tsconfig.jsonについて

  • tsc は単純なコンパイラではなく、TypeScriptプロジェクトの生成・管理を担う機能も持っている
    • tsconfig.json はプロジェクトの構成ファイル
      • tsc --init で生成可能
      • この子をプロジェクトにおいておくと、ファイルやオプションを毎回指定しなくても tsc するだけで構成情報を読んでコンパイルしてくれる
        • CMakeでいうところの -S と -B みたいな設定もここでできる
enchanenchan

その他名前が紛らわしい子たち

  • ts-nodeはnodeでtsを直接(っぽく)実行するためのパッケージ
    • 大手のライブラリ (reactとか) でdepsにいないのはなぜだろう?
      • typescript がいればコンパイルはできるからではないかと…
        (こっちはちゃんとdepsにいる)
  • @types/node はnode.jsの標準モジュールにおける型補完を有効にするためのもの [1]
    • d.ts って何?
      • 型情報を含む宣言(≠定義)を記述したファイル [2]
  • tsx
    • ファイル拡張子の場合: facebookが作ったjsの拡張記法 JSX [3] のts版 reactとかで使う
    • コマンドの場合: より高速にコンパイルできる ts-node [4]
脚注

  1. https://dream-yt.github.io/post/use-at-types-node/ ↩︎

  2. https://typescriptbook.jp/reference/declaration-file ↩︎

  3. https://facebook.github.io/jsx/ ↩︎

  4. https://github.com/esbuild-kit/tsx ↩︎

enchanenchan

だいたいわかった

大手のライブラリを入れなくてもTypeScript開発は結構快適にできそう watchとかその辺はのちのち

リポジトリはこちら: Enchan1207/hello-ts

このスクラップは2023/09/14にクローズされました