こんにちは〜〜！ 元気でいらっしゃいますか？SMY です！👋 早速始めましょう🚀 コンテンツ：  ⚡  Some Background of SDK Development  ⚡  Developing and running our first version  1️⃣ 何 -  SDK (ライブラリとも呼ばれる) は、テクノロジから追加機能を引き出すためのアプリケーションのプラグインとして機能します。  2️⃣ なぜ -  TypeScript を使用した SDK 開発では、長期的な型の安全性とメンテナンスにより、長期にわたる信頼性が実現します。  3️⃣ 方法 -  SDK をビルドするために必要な基本的な手順は次のとおりです。 適切なワークフロー設定でプロジェクトを初期化します。  Bundler を選択し、その目的を理解する。 さまざまな環境で SDK を実行するための ESM、CJS、IIFE UMD の理解。  NPM、セマンティック バージョニング、ライセンスに基づいてライブラリとして公開します。  SPA 用の NPM とブラウザ用の CDN。 パート 1 では、基本的な理解を得るために最初の基本的な SDK を構築します。 ステップ1: プロジェクトの初期化 次のコマンドを実行して、プロジェクトを新しいフォルダーに設定します。   npm init -y   すべての後続のプロンプトに対してデフォルトで yes になります。作成者、ライセンス、バージョンなど、後で Package.json で変更できます。 "-y"   に移動し、  を追加して、最新の EcmaScript モジュール システム (ESM) で動作するようにして下さい。 package.json type: module   は次のようになります。 package.json  { "name": "ts-lib", "version": "1.0.0", "description": "SDK development tutorial", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "type": "module", "keywords": [], "author": "", "license": "ISC" } ステップ2: 基本的な開発ライブラリをインストールする タイプスクリプト  - TypeScript を NodeJS で操作します。 @types/node    - TypeScript ライブラリをバンドルする最も簡単で最速の方法です。 tsup コピー npm i typescript @types/node tsup -D ステップ3: TypeScript設定用の をセットアップする tsconfig プロジェクトのルートに ファイルを作成します。 tsconfig.json コピー touch tsconfig.json ファイルに移動して、次の構成を貼り付けます。   { "compilerOptions": { /* Base Options: */ "esModuleInterop": true, "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true, /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, /* If transpiling with TypeScript: */ "module": "NodeNext", "sourceMap": true, "outDir": "dist", /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"] }, "exclude": ["node_modules", "dist"] } 各プロパティにマウスを合わせると、その詳細を確認できます。 ここで理解すべき基本的なことは次のとおりです。  "module": "NodeNext", "sourceMap": true, "outDir": "dist",  「   、バンドラーで 機能し、Node.js ではクラッシュするモジュール指定子を含む ESM の発行を防ぐため、ライブラリを作成するための適切なオプションです。従来のコードを記述し、常識を使用し、高品質の依存関係に依存する場合、その出力は通常、バンドラーや他のランタイムと高い互換性があります。」詳細については、こちらをご覧ください。 NodeNext のみ   https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/    - ソース ファイルの生成を有効にします。これらのファイルにより、デバッガーやその他のツールは、生成された JavaScript ファイルで作業するときに元の TypeScript ソース コードを表示できます。本番環境では無効にできます。 sourceMap    - 出力されるすべてのファイルの出力フォルダーを指定します。 outDir  /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]    - プロジェクト内の TypeScript および JavaScript ファイルから .d.ts ファイルを生成します。 declaration    - ターゲットのランタイム環境を記述するバンドルされたライブラリ宣言ファイルのセットを指定します。es2022   React などのノード アプリケーション用で、  と ブラウザーでライブラリを実行するためのものです。 lib es2022 dom dom.iterable ステップ4: 最初のコードを書く ファイルを作成し、次の基本コードを記述します。 index.ts   const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract }; 最初のコードを作成します。 コピー tsup ./index.ts 出力ファイル を含む フォルダがあることがわかります。 index.cjs dist 最初の SDK を統合して実行してみましょう。   ファイルを作成し、次のコードを貼り付けます。 app.js   import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));  SDK を公開していないため、ローカル ビルドに直接リンクしています。 最初のアプリを実行してみましょう node app.js 次の出力が表示されます。   3 1 おめでとうございます 🎉🥳 🚀🚀🚀 最初の SDK を構築して実行しました! まとめ: 最初の SDK を構築して実行するための基本的な手順が完了しました。パート 2 に進み、基本的なフォルダー構造を構築し、外部 API エンドポイントを統合します 🚀  ..... これで、独自の SDK を構築するための知識が身につきました。コーディングを楽しんでください! 🚀 以上です！皆さん、良い読み物になったことを願っています。ありがとうございます！✨  👉 フォローしてください GitHub リンクトイン

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains new, firsthand information uncovered by the writer.

Read My Stories

View my Portfolio

Full Stack Engineer

このオーディオは、ストーリーの元の言語で制作されています。

TypeScript SDK 開発: 5 歳児でもステップバイステップで理解できる ~ パート 1: 最初の MVP

About Author

コメント

ラベル

この記事は

Related Stories

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

ユニークなエコシステムを支えるビットコインUTXOのモデル

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

HackerNoon Coded: HackerNoonが最も活発に活動している上位10カ国

ユニークなエコシステムを支えるビットコインUTXOのモデル

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps