Lookback TypeScript ESM support and what should we do now.

3ZVTFJ4BKJLJ!TBKJLJY -PPLCBDL5ZQF4DSJQU&4.TVQQPSU BOEXIBUTIPVMEXFEPOPX

4BKJ3ZVTFJ4BKJLJ 'SPOUFOE%FWFMPQFSBU$ZCP[V JOD 𝕏 !TBKJLJY

ΞδΣϯμ ʮ54Λॻ͘ͱ͖ʹ$+4&4.ΛงғؾͰ࢖ͬͯΔɾͳΜͰ͜Μͳ0QUJPO͕͋ Δͷ͔Α͘Θ͔ΒΜɾ݁ہͲ͏ઃఆ͢΂͖͔ௐ΂ํ΋Θ͔ΒΜʯ ͱ͍͏ਓʹ ʮͳΜͰ͜Μͳ΍΍͍͜͜͠ͱʹͳ͍ͬͯΔ͔Θ͔ͬͨɾ٧·ͬͨ࣌ʹݪҼͷ͋ ͨΓΛ͚ͭΒΕΔɾͦΕͧΕͷઃఆΛͲ͏೰Ί͹͍͍͔Θ͔ͬͨʯ ͱݴͬͯ΋Β͏ ˞ࡉ͔͍࢓૊Έ΍ͻͱͭͻͱͭͷ0QUJPOɺܦҢͳͲΛৄࡉʹ࿩͢ͱͱͯ΋෼Ͱ଍Γͳ͍͠ɺ ਎ʹ༨ΔͷͰ

࿩͞ͳ͍͜ͱ🙏 ϒϥ΢βͷTDSJQUλά಺ͷ࿩ ͱ͍͏͔/PEFKTҎ֎ͷSVOUJNFͷ࿩ w /PEFKTͱ͸·ͨඍົʹҧ͏࿩͕ग़ͯ͘ΔͷͰ 4PVSDF.BQͱ͔ CVOEMFSʹґଘͨ͠ग़ྗͷ࿩ w
͋͘·Ͱ/PEFKTͰ࣮ߦ͞ΕΔPS/PEFKTͰόϯυϧ͞ΕΔίʔυͷ࿩ ϞδϡʔϧγεςϜͷྺ࢙ͷਂ͍࿩

໨࣍ +BWB4DSJQUͷϞδϡʔϧγεςϜʹ͍͓ͭͯ͞Β͍ /PEFͷ&4.αϙʔτͱ5ZQF4DSJQUʹ͓͚Δ&4.αϙʔτ 5ZQF4DSJQU &4.։ൃʹ͓͚Δ՝୊ ՝୊ղܾͷͨΊͷઃఆͱϓϥΫςΟε

໨࣍ +BWB4DSJQUͷϞδϡʔϧγεςϜʹ͍͓ͭͯ͞Β͍👈 /PEFͷ&4.αϙʔτͱ5ZQF4DSJQUʹ͓͚Δ&4.αϙʔτ 5ZQF4DSJQU &4.։ൃʹ͓͚Δ՝୊ ՝୊ղܾͷͨΊͷઃఆͱϓϥΫςΟε

ͷલʹ ·ͣ͸༻ޠͷఆٛ֬ೝ

͜ͷεϥΠυͰ࢖͏༻ޠʹ͍ͭͯ $+4 $PNNPO+4 w /PEF͕࠾༻͍ͯ͠ΔϞδϡʔϧγεςϜɾߏจ w ΄Μͱ͸$PNNPO+4.PEVMFͱ͍͏ͷ͕ਖ਼֬ &4. &$."4DSJQU.PEVMF
w &$."4DSJQUͰఆٛ͞ΕͨϞδϡʔϧ࢓༷ͷ͜ͱ w ݱࡏ͸ଟ͘ͷϥϯλΠϜͰղऍɾ࣮ߦՄೳ

͜ͷεϥΠυͰ࢖͏༻ޠʹ͍ͭͯ /BUJWF&4. w /PEFKT΍ϒϥ΢βͰ&4.Λ௚઀ධՁɺղܾ͢Δํࣜɺ͓ΑͼͦͷϑΝΠϧ w ٖࣅ&4.ͱൺֱͯ͠ʮ/BUJWFʯ ٖࣅ&4. 'BVY&4.'BLF&4. w
$+4΁ม׵͢Δ͜ͱΛલఏʹॻ͔Εͨ&4.ͷܗࣜɾϑΝΠϧ w &4.ͷه๏ʹ४ڌ͢Δ͕ɺ/BUJWF&4.ͱ͸ඍົʹϧʔϧ͕ҧͬͨΓ͢Δ w ֦ுࢠলུ͢Δ͠ͳ͍ͱ͔

˞ʮ&4.ʯͷࢦ͢΋ͷʹ͍ͭͯ &$."4DSJQUͰఆ্ٛ w ʮGSPNͷޙΖ͕จࣈྻͰ͋Δʯ͜ͱ͚͕ܾͩ·͍ͬͯΔɻ w จࣈྻ෦෼ͷGPSNBUʹ͍ͭͯ͸࣮૷ґଘ ͨ·ͨ·֤SVOUJNFଆ͕ʮKT֦ுࢠΛলུ͠ͳ͍ʯͱ͍͏ܾ·ΓΛೖΕͯΔ ͳͷͰຊདྷʮٖࣅʯ&4. /BUJWF&4.΋ʁ Έ͍ͨͳݺͼํ΋ม͔΋஌Εͳ͍
w ผʹຊདྷͷ&$."4DSJQUͷ࢓༷ʹ͸൓͍ͯ͠ͳ͍Θ͚ͩ͠

֤ߏจͱಛ௃

෮श $+4ͷه๏ *NQPSU &YQPSU ಛ௃$+4͸ಉظͳղܾɾ֦ுࢠΛলུͰ͖Δ const module = require("./module"); //
module શମ const { funcA, funcB } = require("./module"); // ෳ਺import module.exports = func; // 1ͭͷModule exports.funcA = ()=>{…} // named export

෮श &4.ͷه๏ *NQPSU &YQPSU ಛ௃&4.Ͱ͸ඇಉظͳղܾɾ/BUJWF&4.Ͱ͸֦ுࢠΛলུͰ͖ͳ͍ import module from "./module.js";
// default import import { funcA } from "./module.js"; // named import export default function() {...}; // default export export const funcA = ()=> {...}; // named export

ٖࣅ&4. GBVY&4.ɾ'BLF&4. /BUJWF&4.͸ຊདྷ֦ுࢠΛলུͰ͖ͳ͍ ˠ͚ͲɺΈΜͳ֦ுࢠ͕ͳ͍&4.ͷίʔυΛॻ͍͍ͯΔ ͜Ε͸SVOUJNFͰ௚઀࣮ߦ͠ͳ͍͔Βڐ͞Ε͍ͯΔ w όϯυϥ͕͍͍ײ͡ʹղऍͯ͘͠ΕΔ w 54΍τϥϯεύΠϥ͕͍͍ײ͡ʹ$+4ʹॻ͖׵͑ͯ͘ΕΔ import
module from "./module" // ͜͏͍͏΍ͭ

໨࣍ +BWB4DSJQUͷϞδϡʔϧγεςϜʹ͍͓ͭͯ͞Β͍ /PEFͷ&4.αϙʔτͱ5ZQF4DSJQUʹ͓͚Δ&4.αϙʔτ👈 5ZQF4DSJQU &4.։ൃʹ͓͚Δ՝୊ ՝୊ղܾͷͨΊͷઃఆͱϓϥΫςΟε

લ࢙ͳΜͰ&4.ͱ$+4 ࠞࡏͯͨ͠Μ͚ͩͬ

&4.ͱ$+4ͷྺ࢙ ௒؆қ൛ w $PNNPO+4͕ఏҊ͞ΕɺͦͷϞδϡʔϧγεςϜΛ/PEFKT͕࠾༻ w ͦͷޙ/PEFKTฒͼʹपลΤίγεςϜ͕ීٴ XFC։ൃͷσϑΝΫτ΁
w 54΋͜ͷࠒ஀ੜ🎉 w &$."4DSJQU͕೥ʹݴޠඪ४ͱͯ͠ϞδϡʔϧγεςϜΛࡦఆ&4. w ֤SVOUJNF͕&4.ͷ࣮ߦΛTVQQPSU w /PEF KTW ओཁϒϥ΢β ೥͝Ζ w ͔͢͠͠Ͱʹ$+4ʹΑͬͯங͔Εͨࢿ࢈͸େ͖͘ɺ&4.Ҡߦ͸ঃʑʹਐΉ

ݱࡏ஍఺&4.ͱ$+4ͷࠞࡏ ࠓ΋ʮطଘࢿ࢈Ͱ࢖ΘΕΔ$+4ʯWTʮকདྷతʹ͸&4.ʯͱ͍͏ঢ়ଶ͕ଓ͘ w ࠓ೥͸೥ʂͱݴ͏͜ͱ͸&4.ੜ஀प೥ ʮͦΖͦΖ/BUJWF&4.Ͱߦ͚ΔΜ͡Όͳ͍ͷʁʯͬͯΈΜͳࢥ͍࢝ΊͯΔ

/PEFͷ&4.αϙʔτ

/PEFͷ&4.αϙʔτ /PEF KT͕&4.ͷ࣮ߦΛαϙʔτͨ͠ W w ैདྷͷ$+4ʹՃ͑ͯ/BUJWF&4.ͳϑΝΠϧ΋࣮ߦͰ͖ΔΑ͏ʹ ৽͍֦͠ுࢠ.cjsͱ.mjs w .cjs໌ࣔతʹ$+4ͩͱએݴͰ͖Δ
w .mjs໌ࣔతʹ&4.ͩͱએݴͰ͖Δ &4.ͩͱͲ͏΍ͬͯݟ෼͚Δ͔ʁ w ֦ுࢠͰ໌ࣔతʹΘ͔Δ͔ʁˠQBDLBHFKTPOͷtypeˠ$+4

&4.αϙʔτ͢Δલͷ54 ٖࣅ&4.Ͱॻ͍͍͍ͯײ͡ʹ$PNNPOKTʹม׵͍ͯͨ͠ w ౰࣌͸$+4Ͱͳ͍ͱ/PEFͰಈ͔ͳ͍ͷϒϥ΢βίʔυ͸Ͳ͏ͤCVOEMF 54ʹ͸໌ࣔతʹ$+4΁τϥϯεύΠϧͯ͠΋Β͏ಠࣗه๏΋͋Δ import module = require("./module"); //
↓ transpile const module = require("./module")

54ͷ&4.αϙʔτ

54ͷ&4.αϙʔτͷํ਑͸ʮ/PEF KT४ڌʯ ʮ/PEFͷ&4.αϙʔτʯʹ४ڌ͢Δํ਑ w Ϟδϡʔϧղܾͷ࢓૊Έɾ૬ޓӡ༻ϧʔϧ΋/PEF४ڌʹ͢Δ w ޙड़͢ΔmoduleΦϓγϣϯͱ͔͕"nodeʓʓ"ʹͳͬͯΔͷ΋͔ͦ͜Β 54#FUBͰΞφ΢ϯεˠ54Ͱ4UBCMFϦϦʔε w ౰ॳ͸ͰೖΕΑ͏ͱ͍͕ͯͨ͠·Ͱ͸#FUBͷঢ়ଶ

&4.ରԠ৽͍͠NPEVMFΦϓγϣϯ moduleΦϓγϣϯʹ"nodenext" node16node18 ͕ಋೖ w /PEFKTͷϞδϡʔϧղܾϧʔϧʹ४ڌˠ/PEFWҎ߱ͳΒڧ͘ਪ঑˞ w ֦ுࢠ΍QBDLBHFKTPOͷ"type"Λݟͯղܾํ๏ͱग़ྗ൑அ w ΠϯϙʔτύεͰ֦ுࢠ͸লུͰ͖ͳ͍
w UPQMFWFMBXBJU΍%ZOBNJD*NQPSUΛར༻Ͱ͖Δ ˞IUUQTXXXUZQFTDSJQUMBOHPSHEPDTIBOECPPLNPEVMFTUIFPSZIUNMNPEVMFSFTPMVUJPO import module from "./module" // ❌

54ͷ&4.ରԠ৽͍͠NPEVMFΦϓγϣϯ "nodenext"ͱ"node16ɾ18"ͱԿ͕ҧ͏ʁ w "node16ɾ18"ͦΕͧΕͷόʔδϣϯͰ҆ఆͨ͠ϞδϡʔϧγεςϜͷڍಈ w "nodenext"࠷৽όʔδϣϯʹ߹ΘͤͯಈతʹมΘΔ w Α΄Ͳݹ͍/PEFKTΛ࢖ͬͯͳ͍ݶΓ"nodenext"Ͱྑͦ͞͏ 5BSHFU *NQPSU
BTTFSUJPOT *NQPSU BUUSJCVUF SFRVJSF JTN /PEF FT ❌ ❌ ❌ /PEF FT ✅ ❌ ❌ OPEFOFYU FTOFYU ❌ ✅ ✅

54ͷ&4.ରԠ৽͍֦͠ுࢠͷಋೖ `.mts` ͱ`.cts`ͱ͍͏৽͍͠ϑΝΠϧ֦ுࢠ͕ಋೖ w .mtsϑΝΠϧίϯύΠϧ࣌ʹ&4.ܗࣜͷNKTϑΝΠϧͱͯ͠ग़ྗ w .ctsϑΝΠϧίϯύΠϧ࣌ʹ$+4ܗࣜͷDKTϑΝΠϧͱͯ͠ग़ྗ w ಉ༷ʹܕఆٛϑΝΠϧ΋.mtsˠ.d.mts .ctsˠ.d.ctsͷΑ͏ʹͳΔ
Πϯϙʔτύεͷ֦ுࢠ࣮ߦ࣌ʹղܾ͞ΕΔ+BWB4DSJQUϑΝΠϧͷ֦ுࢠ w ྫ͑͹ɺ./add.ts → ./add.js, ./add.mts → ./add.mjs

54ͷ&4.ରԠؔ࿈͢ΔΦϓγϣϯ moduleResolutionར༻͢ΔϞδϡʔϧղܾΞϧΰϦζϜͷϞσϧ w ΋ͷʹΑͬͯ͸NPEVMFΦϓγϣϯʹΑͬͯڧ੍͞ΕΔ moduleΦϓγϣϯ͕OPEFܥͷ৔߹ w module: "node16"PS"node18"ˠmoduleResolution: "node16" w
module: "nodenext"ˠmoduleResolution: "nodenext" w ࠓͷॴ"node16""nodenext" ʹࠩ෼͸ͳ͍ w node16͸ݻఆ͞Ε͍ͯΔ͕ɺnodenext͸ಈతʹมߋ͞ΕΔՄೳੑ͋Γ

໨࣍ +BWB4DSJQUͷϞδϡʔϧγεςϜʹ͍͓ͭͯ͞Β͍ /PEFͷ&4.αϙʔτͱ5ZQF4DSJQUʹ͓͚Δ&4.αϙʔτ 5ZQF4DSJQU &4.։ൃʹ͓͚Δ՝୊👈 ՝୊ղܾͷͨΊͷઃఆͱϓϥΫςΟε

/PEFͷ&4.αϙʔτʹ͓͚Δ໰୊ΛҾ͖ܧ͍ͰΔ 54ͷ&4.αϙʔτ͸ʮ/PEFͷ&4.αϙʔτʯʹ४ڌ͢Δ ʮ/PEFͷ&4.αϙʔτʯʹ͓͚Δ໰୊΋جຊҾ͖ܧ͙ /PEFͷ&4.αϙʔτʹ͓͚Δ໰୊ w $+4 ↔︎ &4.ޓ׵ػೳ͔Β͘Δ໰୊ w $+4ͱ&4.Ͱҙຯ΍ϧʔϧ͕ҟͳΔ໰୊
54Ͱ΋େ఍͸ղܾͰ͖ͳ͔ͬͨΓ͢Δ Ͳ͔ͬͪͱ͍͏ͱ૿͑ͯΔ

5ZQF4DSJQU &4.։ൃ ʹ͓͚Δ՝୊ /PEF Ұ෦

$+4&4.ࠞࡏʹ͓͚Δ໰୊ /PEF͔ΒҾ͖ܧ͗ w EFGBVMUFYQPSU໰୊ w ಉظWTඇಉظʹΑΔ໰୊ w ֦ுࢠলུͰ͖ΔWTͰ͖ͳ͍͜ͱʹΑΔ໰୊XJUIٖࣅ&4.

EFGBVMUFYQPSU໰୊

EFGBVMUFYQPSU໰୊ EFGBVMUFYQPSUʹରԠ͢Δߏจͷ෦෼ͷϛεϚον w $+4module.exports ͕EFGBVMUFYQPSU w &4.EFGBVMUFYQPSU͸"default"ͱ͍͏໊લͷOBNFEFYQPSU ٖࣅ&4. .ctsͳͲ Ͱ͸&4.ͷϧʔϧͰॻ͖ग़͢ˠmodule.default
= /PEF͕&4.͔Β$+4ΛJNQPSU͢Δͱ͖͸$+4ͷϧʔϧˠmodule.exports w ˠ͋Εղऍҧͬͯͳ͍ʁ

54ͷFT.PEVMF*OUFSPQΦϓγϣϯ ग़ྗ͢Δ$+4ίʔυͱ֎෦&4.ͱͷ૬ޓӡ༻ੑΛ্͛ΔΦϓγϣϯ w EFGBVMUFYQPSU໰୊ʹҰఆͷղܾΛ΋ͨΒ͢΋ͷ 5SVFʹ͢Δͱʜ w $+4΁τϥϯεύΠϧ͢ΔࡍʹΠϯϙʔτॲཧ૚Λ࡞੒ w __esModuleϑϥάΛ͚ͭɺͦͷ஋࣍ୈͰJNQPSUॲཧΛม͑Δ w
__esModule ͕trueEFGBVMUϓϩύςΟ͕EFGBVMUFYQPSU w __esModule ͕falseNPEVMFFYQPSUT͕EFGBVMUFYQPSU

&4.Λ௚઀࣮ߦ͢Δ৔߹ FT.PEVMF*OUFSPΦϓγϣϯ͸ʮશମΛ$+4ͱͯ͠ग़ྗ͢Δʯ࣌ͷ࿩ ˠ&4.ͱ࣮ͯ͠ߦ͢Δ৔߹ɺEFGBVMUFYQPSU໰୊͸࢒Δ ˠ$+4ͱޓ׵Λ໨ࢦ͢ͳΒEFGBVMUFYQPSU͸ආ͚͓͍ͯͨํ͕ྑ͍

ಉظɾඇಉظ໰୊

ಉظɾඇಉظ໰୊ $+4ͷSFRVJSF͸ಉظత ↔︎ &4.ͷJNQPSU͸ඇಉظ w &4.͔Β$+4ΛಡΉ͜ͱ͸جຊ໰୊ͳ͍ w $+4͔Β&4.ΛಡΉ͕࣌໘౗ $+4͔Β&4.ΛಡΉํ๏ w
EZOBNJD*NQPSU&4.ΛಡΉجຊతͳํ๏ w 🆕SFRVJSF &4. ಉظͰ&4.ΛಡΊΔػೳ ੍ݶ͋Γ

EZOBNJD*NQPSU &$."4DSJQUϞδϡʔϧΛಡΈࠐΊΔΑ͏ʹ͢Δؔ਺෩ͷࣜ w ඇಉظಈతͳಡΈࠐΈ w /PEFW͔Βར༻Ͱ͖Δ ਖ਼ࣜͳ࢓༷͕ͩɺඇಉظʹͳΓߏจ͕େ͖͘มΘΔͷ͸खؒ const mod =
await import("./lib.js"); // ಈతͳύεͰ΋OK const mod2 = await import(`${env}/lib.js`);

SFRVJSF &4. /PEFKTͰ&4.ΛಉظతʹಡΈࠐΊΔػೳ w /PEFKTͷWҎ࣮߱ݧతʹαϙʔτˠWͰ҆ఆ൛ͱͯ͠ϦϦʔε ͋Εɺ&4.͸ಉظతʹղܾͰ͖ͳ͍Μ͡Ό w ˠUPQMFWFM"XBJU͕࢖͑ͳ͍ͱ͍͏੍ݶ͖ͭ શମ͕ඇಉظʹͳΔͷͰ
const mod = require("./lib.js") // ಈతͳύεͰ΋OK const mod2 = require(`${env}/lib.js`)

֦ுࢠɺ লུͰ͖ΔWTͰ͖ͳ͍໰୊ XJUIٖࣅ&4.

֦ுࢠলུͰ͖ΔWTͰ͖ͳ͍໰୊XJUIٖࣅ&4. $+4͸֦ுࢠΛলུWT/BUJWF&4.Ͱ͸Ұൠతʹ֦ுࢠ͕লུͰ͖ͳ͍ ˢ͚ͩͳΒߏจ͕શ͘ҧ͏ͷͰ·ͩड͚ೖΕΒΕΔɻ ໰୊͸ٖࣅ&4.ͷଘࡏ w 54Λ͸͡Ίͱͯ͠τϥϯεύΠϥΛલఏͱͯ͠Δίʔυ͸ଟ͕ٖ͘ࣅ&4. w جຊతʹ͢΂֦ͯுࢠ KT Λ͚ͭΔΑ͏ʹมߋ͠ͳ͍ͱ͍͚ͳ͍
import module from "./module" // ❌

͜͜·Ͱ͸/PEF KTͷ &4.ରԠ͔ΒҾ͖ܧ͍ͩ໰୊

54αϙʔτʹΑΔ৽ͨͳ໰୊ w 54Ͱ֦ுࢠͲ͏͢Δ͔໰୊ w ܕఆٛϑΝΠϧͷ໰୊

54Ͱ֦ுࢠͲ͏͢Δ͔໰୊

+4࣮ߦ࣌ͷύεΛ54ʹॻ͘ҧ࿨ײʜ ݪଇ54Ͱ΋JNQPSUQBUI͸.jsͰॻ͔ͳ͍ͱ͍͚ͳ͍ w 5ZQF4DSJQUଆ͕SVOUJNFͷڍಈΛࠨӈͯ͠͸͍͚ͳ͍ͱ͍͏ݪଇ KTϑΝΠϧΛు͔ͳ͍ͷͰ͋Ε͹UTͰJNQPSUͯ͠΋ྑ͍ͷͰ͸ʁ w —allowImportingTsExtensionsΦϓγϣϯ 54Ҏ߱ w
ͨͩ͠ɺnoEmit : trueͰͳ͍ͱ͍͚ͳ͍ KTΛు͔ͳ͍ // app.ts import { cjsNamedExport } from "./cjsModule.js"; // .js

సػ/PEFKTͷ54௚઀࣮ߦػೳ͕͖ͨ /PEFKTͷ—experimental-strip-typeΦϓγϣϯ GSPN/PEFW w ͜ͷΦϓγϣϯͰ͸UTͰJNQPSU͠ͳ͍ͱ͍͚ͳ͍ w ಺෦తʹ͸48$ͰτϥϯεύΠϧ͍ͯ͠Δ Ͱ΋54ͷ੍໿Ͱ͸ʮUTͰJNQPSUKTΛు͔ͳ͍ʯ
࣮ߦଆͷ0QUJPO࣍ୈͰ.jsʹग़ྗ͍ͨ͠PS.tsͷ··͕෼͔ΕΔ🤔 ˠʮ+4ʹτϥϯεύΠϧ͠ͳ͍ͳΒ.tsͰ͍͍Αʯͱ͍͏લఏͷ่յ

ॾਕͷ݋SFXSJUF3FMBUJWF*NQPSU&YUFOTJPOT JNQPSU1BUIΛ.tsͰॻ͍ͯ΋.jsʹॻ͖׵͑ͯ͘ΕΔΦϓγϣϯ ੍໿JNQPSU͚ͩͰݟͯػցతʹ֦ுࢠΛม͑ΒΕͳ͍ͱར༻Ͱ͖ͳ͍ w ❌ಈతʹJNQPSUQBUIΛม͑ΔΑ͏ͳ৔߹͸αϙʔτ͠ͳ͍ w ❌4VC1BUIJNQPSUT͸αϙʔτ͠ͳ͍ import { cjsNamedExport
} from "./cjsModule.ts"; // ↓ import { cjsNamedExport } from "./cjsModule.js";

UT֦ுΛ͚ͭΔ͜ͱʹର͢Δ̏͘͢Έ໰୊ Կ͔ΛऔΖ͏ͱ͢ΔͱԿ͔Λࣺͯͳ͍ͱ͍͚ͳ͍😭 w ૉ௚ʹ KTͰ͔͘ w ˠ❌/PEFͰ54Λ௚઀࣮ߦͰ͖ͳ͍ w --allowImportingTsExtensions༗ޮ w
ˠ❌+4ʹॻ͖ग़͢͜ͱ͸Ͱ͖ͳ͍ ܕఆٛϑΝΠϧ΋ w --rewriteRelativeImportExtensions༗ޮ w ˠ❌ಈతʹJNQPSUTVCQBUIJNQPSU͸࢖͑ͳ͍

֦ுࢠলུ ٖࣅ&4. Λଓ͚Δಓ moduleResolution: bundlerόϯυϥͰ࢖͏͜ͱΛલఏͱͨ͠0QUJPO w όϯυϥʔΛར༻͢Δ৔߹͸ͦΕΛ໌ࣔ͢Δ͜ͱͰ֦ுࢠΛলུͰ͖Δ w ͨͩ͠ɺmoduleΦϓγϣϯ͸"esnext"͔"preserve"͔͠બ΂ͳ͍ w
$+4ʹॻ͖ग़͠͸Ͱ͖ͳ͍ w OPEFޓ׵ͷڍಈ͸࣮ݱͰ͖ͳ͍ w CVOEMFS೚ͤʹͳΔ

ܕఆٛϑΝΠϧͷ໰୊

खॻ͖ܕఆٛϑΝΠϧ໰୊ 54͸ܕఆٛϑΝΠϧΛղऍ͢Δࡍ΋54ϑΝΠϧಉ༷ɺҎԼͷΑ͏ʹ൑ผ͢Δ w ϑΝΠϧͷ֦ுࢠ.d.mts ˠ&4.ͷܕఆٛ.d.ctsˠ$+4ͷܕఆٛ w ࠷΋͍ۙQBDLBHFKTPOͷ"type" w ී௨͸UTDͰܕఆٛϑΝΠϧΛੜ੒͢Δˠ+4ͱܕఆٛϑΝΠϧ͸ର ໰୊͸खॻ͖ͰEUTΛॻ͍ͯ%F
fi OJUFMZ5ZQFEʹొ࿥͍ͯ͠ΔΑ͏ͳ৔߹ w ʮܕఆٛϑΝΠϧͷܗ͕ࣜ$+4ͳͷʹ&4.ͰಡΜ͡Ό͏ʯ͕ൃੜ͢Δ

खॻ͖ܕఆٛϑΝΠϧ໰୊΁ͷղܾ ܕఆٛϑΝΠϧ͸+4ϑΝΠϧʹର̍ରԠ͢Δ΋ͷͱ͍͏ݪଇΛ่͞ͳ͍ w $+4ͱ&4.ͦΕͧΕఏڙ͍ͯ͠ΔͳΒܕఆٛϑΝΠϧ΋྆ํ༻ҙ͢Δͷ͕˕ ઌड़ͨ͠EFGBVMUFYQPSUͷܕఆٛʹ͍ͭͯ΋஫ҙ͠Α͏ طଘͷܕఆٛʹ͍ͭͯ͸BSFUIFUZQFTXSPOHͱ͍͏πʔϧͰνΣοΫͰ͖Δ ཁ͸UTDʹ೚ͤͯʮखॻ͖͸ආ͚ͨํ͕ྑ͍ʯͱ͍͏͜ͱ

໰୊͸Θ͔ͬͨɺ ࢲͨͪ͸Ͳ͏͢Ε͹ʜ

໨࣍ +BWB4DSJQUͷϞδϡʔϧγεςϜʹ͍͓ͭͯ͞Β͍ /PEFͷ&4.αϙʔτͱ5ZQF4DSJQUʹ͓͚Δ&4.αϙʔτ 5ZQF4DSJQU &4.։ൃʹ͓͚Δ՝୊ ՝୊ղܾͷͨΊͷઃఆͱϓϥΫςΟε👈

ݱঢ়·ͱ΋ͦ͏ͳઃఆΛߟ͍͑ͯ͘ ˞஫ҙ˞ w ར༻͍ͯ͠Δύοέʔδɺαϙʔτ͢Δ3VUJNFɺ࢖͍ͬͯΔόϯυϥʔͳͲ ؀ڥʹΑ࣮ͬͯࡍͷ#FTU͸มΘ͍͖ͬͯ·͢ w ঺հͨ͠ઃఆ͕ඞͣ͠΋Έͳ͞ΜͷϓϩμΫτʹ͓͚Δਖ਼ղͱ͸ݶΓ·ͤΜ ˠ͜͜Ͱ͸ݱঢ়Ͱͷ#FUUFSΛߟ͓͖͍͑ͯͨ

શମͰݴ͑Δ͜ͱ جຊతʹ͸৽͘͠࡞Δ΋ͷ͸&4.ͰॳΊΑ͏ w &4.͸ݴޠඪ४Ͱ͋Γओྲྀ΁&4.͔Β$+4ΛಡΉํָ͕ ˠQBDLBHFKTPOͷtype͸"module"ʹ͠ͱ͜͏ ͳΔ΂͘EFGBVMUFYQPSUΛආ͚Α͏ w ઌड़ͷΑ͏ʹ$+4 ↔︎ &4.ʹ͓͍ͯ໽հͳ͜ͱ͕ଟ͍ͷͰආ͚Δ͕٢
ͳΔ΂͘UPQMFWFMBXBJUΛආ͚Α͏ w UPQMFWFMBXBJUΛͯ͠͠·͏ͱrequire(ESM)Ͱ͖ͳ͍

WFSCBUJN.PEVMF4ZOUBYΦϓγϣϯ verbatimModuleSyntaxΦϓγϣϯ 54d w 5ZQF4DSJQUͷJNQPSU΍FYQPSUͷڍಈΛஞޠతʹ͢Δ0QUJPO w ஞޠతJNQPSUΛʮͦͷ··ʯτϥϯεύΠϧ͢Δ w JNQPSU͞ΕΔ΋ͷ͕஋͔ܕΛ໌ࣔతʹॻ͘Α͏ڧ੍͞ΕΔ
w ⚠$PNNPO+4ग़ྗͩͱJNQPSUFYQPSUߏจ͕ېࢭ ஞޠత͡Όͳ͍ ˠ'VMM&4.ͳΒ0/ʹͨ͠ํ͕ྑͦ͞͏ 0QJOJPO import type { FuncA } from "./module.js";

؍఺ ઃఆΛߟ͑Δ্Ͱେ͖ͭ͘ͷ؍఺͕͋Δ ಈ͘ͷ͸#SPXTFSPSͦΕҎ֎ͷ3VOUJNF ओʹ/PEF KT ͔ ΞϓϦέʔγϣϯίʔυ͔ϥΠϒϥϦ͔

#SPXTFSΞϓϦέʔγϣϯίʔυͷ৔߹ #VOEMFSΛͳ͘͢બ୒͸ݱঢ়ͳ͍ͱࢥ͍ͬͯΔ 0QJOJPO w ଟ͘ͷϞμϯ#SPXTFSͰ͸&4.Λղऍɾ࣮ߦͰ͖Δ w ͕ɺݱ࣮໰୊ύϑΥʔϚϯεͳͲΛߟ͑Δͱ౰෼#VOEMF͸ඞཁͦ͏ ਖ਼௚#VOEMFSͷαϙʔτ࣍ୈɾOPEF޲͚ͷΦϓγϣϯ࢖͏ඞཁ͸ͳ͍ ٯʹݫ֨ͳ&4.
㱠ٖࣅ&4. Λపఈ͢ΔϞνϕ͸௿Ί w ͱ͸͍͑ࠓޙͷ͜ͱΛߟ͑Δͱ&4.ʹ͍ͯͬͨ͠ํ͕͍͍͚Ͳ w QBDLBHFKTPOͷtype: "module" WJUFͳͲͰ͸XBSOJOH͕ग़Δ

#SPXTFSΞϓϦέʔγϣϯίʔυͷઃఆ ඞਢ w "moduleResolution" : "bundler"ʹ͢Δͷ͕؊ w "module" : "bundler"ͷ৔߹"preserve"͔"esnext"͔͠બ΂ͳ͍
৔߹ʹΑͬͯඞཁͰ͖ͨΒ w "allowImportingTsExtensions"֦ுࢠΛলུͤͣ.tsͰJNQPSU w "allowArbitraryExtensions"ඇ+BWB4DSJQUϑΝΠϧΛJNQPSU͢Δ

#SPXTFSΞϓϦέʔγϣϯίʔυͷઃఆྫ "compilerOptions": { // must "moduleResolution": "bundler", "module": "preserve", //
or `"esnext"` // optional / recommended "noEmit": true, // or `emitDeclarationOnly` "allowImportingTsExtensions": true, "allowArbitraryExtensions": true, "verbatimModuleSyntax": true } // package.json { type : "module" }

/PEF KTΞϓϦέʔγϣϯίʔυͷ৔߹ جຊతʹ͸̎୒͋Δ͕ʜ w 🙆&4.Ͱॻ͍ͯɺNPEVMFपΓΛOPEF༻ͷ΋ͷʹ౷Ұ w 🤔ࠓ·Ͱ௨Γٖࣅ&4.Ͱॻ͍ͯ$+4ʹม׵ͯ͠΋Β͏ 1VSF&4.ͳύοέʔδ͕૿͍͑ͯΔˠ&4.Ͱॻ͘ͷ͕CFUUFS 0QJOJPO
w 54ͷ௚઀࣮ߦػೳΛ࢖͍͍ͨ৔߹͸&4.Խ͕.VTU

/PEFΞϓϦέʔγϣϯίʔυͷઃఆ ඞਢ w "module" :"nodenext" "node16" / "node18" Λબ୒ w
"moduleResolution"ˢͰࣗಈతʹܾఆ͞ΕΔͷͰུ Ͱ͖ͨΒ w "verbatimModuleSyntax"'VMM/BUJWF&4.ͳΒ

/PEFKTΞϓϦέʔγϣϯίʔυͷઃఆྫ "compilerOptions": { // must "module": "nodenext", // recommended "verbatimModuleSyntax":
true, } // package.json { type : "module" }

/PEFͷ54௚઀࣮ߦػೳΛ࢖͍͍ͨ৔߹ +4ܕఆٛϑΝΠϧͷग़ྗΛ͍ͨ͠ w "rewriteRelativeImportExtensions" : true w ⚠ͨͩ͠ಈతͳJNQPSUTVCQBUIJNQPSU͸࢖͑ͳ͍ +4ϑΝΠϧ͸ผʹग़ྗ͠ͳ͍ w
"allowImportingTsExtensions" : true"noEmit" : true ྆ํΛຬ͍ͨͨ͠৔߹ˠݱঢ়54 /PEFKTͰ͸೉͍͠😭

true, // TS௚઀࣮ߦ͍ͨ͠ & jsͱܕఆٛϑΝΠϧ΋ు͖͍ͨ "rewriteRelativeImportExtensions": true } // package.json { type : "module" }

true, // js / .d.ts ు͔ͳ͍͍ͯ͘ਓ(TS௚઀࣮ߦ͚ͩ) "allowImportingTsExtensions": true "noEmit": true } // package.json { type : "module" }

/PEFͷ54௚઀࣮ߦػೳΛ࢖͍͍ͨ৔߹ /PEFKTͰ͸ ୭͔͕ͪ͜ΒΛݟ͍ͯΔΑ͏ͩ

ϥΠϒϥϦͷ৔߹ ϥΠϒϥϦͷ೰·͍͠ͱ͜ΖͲͪΒͰղܾ͍͔ͨ͠͸ར༻͢Δଆ࣍ୈ w ཧ૝తʹ͸͋ΒΏΔίϯύΠϧઃఆͰ΋ಈ͘͜ͱ͕ٻΊΒΕΔ બ୒ࢶ w &4.Ͱग़ྗ w ྆ํग़ྗ͢Δ ͍ΘΏΔ%VBM1BDLBHF
w ޙड़͢Δ໰୊ͳͲ΋͋ΔͷͰຊฤͰ͸঺հ͠ͳ͍ ෇࿥΁

ิ଍ %VBM1BDLBHFͷ໰୊఺ ͍ΘΏΔ%VBM1BDLBHF)B[BSE໰୊ w ಉ͡1BDLBHFͰ΋$+4&4.ͰҟͳΔϑΝΠϧΛJNQPSU͢Δ͜ͱ͕ݪҼ w ಛʹγϯάϧτϯͷΑ͏ͳΠϯελϯεͷঢ়ଶΛಡΈॻ͖͢Δ৔߹ w $+4ͱ&4.Ͱ͸Πϯελϯε͸ڞ༗͞Εͳ͍ ผϑΝΠϧͳͷͰ
w ಉ͡΋ͷΛ৮͍ͬͯΔΑ͏ʹݟ͑ͯಉ͡ΠϯελϯεΛ৮͍ͬͯͳ͍ w ϓϥάΠϯܗࣜͰίϯςΩετΛҾ͖ܧ͙πʔϧͳͲͰ໰୊ʹͳΓ͕ͪ

&4.͚ͩ͡ΌμϝͰ͔͢ʁ 1VSF&4.ύοέʔδ &4.͔͠ग़ྗ͍ͯ͠ͳ͍ Ͱग़͢༐ؾ w ݹ͍/PEF͡Όͳ͚Ε͹&4.αϙʔτͯ͠Δ w #VOEMFલఏͰϞμϯͳόϯυϥ࢖ͬͯΔͳΒ&4.͚ͩͰ͍͍ w ΄Μͱʹ$+4Ͱಡ·ΕΔͷ͔ʁ
w ࣾ಺ར༻͚ͩͱ͔ͳΒಡΉଆΛ௚ͤ͹໰୊ͳ͍͜ͱ΋ w require(ESM)ͷ͓͔͛Ͱ੍ݶ͸͋ΕͲޓ׵ੑ΋޲্ͨ͠ w 1VSF&4.ʹͳͬͨ༗໊ϥΠϒϥϦ΋ଟ͍

&4.ʹॻ͖ग़࣌͢ͷઃఆ ඞਢ w "module" : OPEFҎ্ͳΒ "nodenext" w "declaration"ܕఆٛϑΝΠϧ͸ͪΌΜͱग़ྗ Ͱ͖ͨΒ
w "verbatimModuleSyntax"UZQFJNQPSUΛڧ੍͢ΔͷͰɺՄೳͳΒ ΍ΊΔ w "paths"5ZQF4DSJQUͷܕղܾͱSVOUJNFڍಈ͕มΘΔՄೳੑ

/PEFKTϥΠϒϦίʔυͷઃఆྫ "compilerOptions": { // must "module": "nodenext", "declaration" : true
// recommended "verbatimModuleSyntax": true, } // package.json { type : "module" }

&4.͕ݫ͍͠৔߹😭 ಠࣗͰϞδϡʔϧΛղܾͯ͠͠·͍ͬͯΔΑ͏ͳπʔϧʹґଘ w /PEFKTಉ༷ͷղܾΛͯ͘͠Εͳ͍ͱ࠾༻Ͱ͖ͳ͘ͳͬͯ͠·͏ $+4ಠࣗͷػೳ΍ڍಈʹґଘ͓ͯ͠Γɺॻ͖׵͕͑େมͳ΋ͷ w __dirnameɺ __filenameɺ༧໿ޠͷѻ͍FUD w &4.ͰରԠ͢Δߏจ͕͋Δ৔߹΋͋ΔϥΠϒϥϦ͕ඞཁͳ৔߹΋
ͦͷଞ$+4͔͠ಈ͔ͳ͍ಛघ؀ڥ

طଘίʔυ͸Ͳ͏͢Δ

&4.෩ 'BVY&4. Ͱॻ͍ͨࢿ࢈͕େ͖͍ํ ϥΠϒϥϦͷ৔߹PS/PEFͰಈ͘ΞϓϦͷ৔߹ w ૣΊͷ&4.ҠߦΛࢹ໺ʹೖΕ͍ͨ 0QJOJPO w Ͱͳ͍ͱ1VSF&4.ύοέʔδ࢖͏ͷ΋&4.ͱͯ͠ॻ͖ग़͢ͷ΋໘౗
#VOEMF͢ΔΞϓϦίʔυͷ৔߹ w "moduleResolution": "bundler"͓͚ͯ͠͹Ұ୴ͦͷ··Ͱ΋ಈ͘ w ͱ͸͍͑༨༟͕͋ΔͷͰ͋Ε͹Ҡߦ͍͚ͨ͠Ͳ 0QJOJPO

·ͱΊ w ݱঢ়$+4ͱ&4.͕ڞଘ͍ͯ͠Δ͕ɺϥϯλΠϜͰ͸྆ํαϙʔτ͞Ε͍ͯΔ w 54ͷ&4.αϙʔτ͸54͔ΒೖΓɺࠓͰ͸΄΅໰୊ͳ͘࢖͑Δ w ҰํͰ$+4΍&4.ޓ׵ੑ໰୊ͳͲ͔ΒͲ͏ͯ͠΋0QUJPO͸ෳࡶʹͳ͍ͬͯΔ w ·ͨ54͕&4.αϙʔτͯ͠΋ґવͱͯ͠໰୊͸࢒Δ৽͍͠՝୊΋ w
ઃఆ͢΂͖ઃఆ͸ϥϯλΠϜ΍ґଘ͢Δ΋ͷɾར༻ܗଶʹΑͬͯมΘΔ w جຊతʹ͸&4.ʹҠߦͭͭ͠ɺ࢒Δ$+4؀ڥɾࢿ࢈ʹͲ͏ରԠ͢Δ͔

ࢀߟʹ͍͍ͤͯͨͩͨ͞هࣄɾϦιʔε w 5ZQF4DSJQU%PDVNFOUBUJPO.PEVMFT$IPPTJOH$PNQJMFS0QUJPOT w 5ZQF4DSJQU%PDVNFOUBUJPO.PEVMFT&4.$+4*OUFSPQFSBCJMJUZ w 5ZQF4DSJQU%PDVNFOUBUJPO.PEVMFT3FGFSFODF w 5ZQF4DSJQU%PDVNFOUBUJPO.PEVMFT5IFPSZ w
5ZQF4DSJQU%PDVNFOUBUJPO5ZQF4DSJQU w 5ZQF4DSJQU%PDVNFOUBUJPO5ZQF4DSJQU w BSFUIFUZQFTXSPOHBSFUIFUZQFTXSPOHHJUIVCJPu(JU)VC w 54ͷSFXSJUF3FMBUJWF*NQPSU&YUFOTJPOTΦϓγϣϯΛ࢖͏લʹಡΉهࣄ w 5ZQF4DSJQUҎ߱Ͱ&4.ରԠ͸Ͳ͏ͳΔͷ͔ʁ w 5ZQF4DSJQUͰ௥Ճ͞ΕͨWFSCBUJN.PEVMF4ZOUBYͱ͸Կ͔ʁ

ࢀߟʹ͍͍ͤͯͨͩͨ͞هࣄɾϦιʔε w 5ZQF4DSJQUº/PEFKTͰ&$."4DSJQU.PEVMFTΛࢼ͢$-07&3🍀 w 5ZQF4DSJQUͷNPEVMFΦϓγϣϯͷ࿩ɺ͋Δ͍͸5ZQF4DSJQU։ൃऀͷۤ೰ɺ͋Δ͍͸$+4ͱ&4.ͷ࿩ w 5ZQF4DSJQU͕౰ͨΓલʯʹͳͬͨੈքʹ͓͍ͯɺ&4Ϟδϡʔϧຊདྷͷӡ༻ʹඞཁͳߟ͑ํͱઃఆͱ͸ w /PEFKT 5ZQF4DSJQUͷϞδϡʔϧΛ੔ཧͯ͠ΈΔ
w /PEFKT/BUJWF&4.΁ͷಓʙ࠷ऴষ#BCFM5ZQF4DSJQU.PEVMFTͱͷಆ͍ʙc115 w ࣮ફ/PEFKT/BUJWF&4.8BOUFEMZͰͷΞϓϦέʔγϣϯҠߦࣄྫc8BOUFEMZ&OHJOFFS#MPH w SFRVJSF FTN JO/PEFKTc+PZFF$IFVOHT#MPH w .PWFPOUP&4.POMZ w %VBM1BDLBHF)B[BSEGSPNTDSBUDI

3ZVTFJ4BKJLJ!TBKJLJY ͋Γ͕ͱ͏͍͟͝·ͨ͠

෇࿥%VBM1BDLBHFͰؤுΔ৔߹ ඇਪ঑ جຊํ਑ w QBDLBHFKTPO͸ڞ௨ͳͷͰUZQFNPEVMFͰ&4.Ͱίʔυ͸ॻ͘ w &4.ɾ$+4༻ʹͦΕͧΕUTDPO fi HΛ࡞Δ w
ˠग़ྗઌΛ෼͚͓ͯ͘ w QBDLBHFKTPOͷ$POEJUJPOBMFYQPSUTػೳΛ࢖͏ w %VBM1BDLBHFʹΑΔ໰୊͸ೝ͓ࣝͯ͘͠ ໨ΛᛉΕΔ͜ͱΛ֬ೝ

෇࿥%VBM1BDLBHFͰؤுΔ৔߹ UTDPO fi H w &4.جຊతʹ&4.͚ͩʹॻ͖ग़͢ͷͱҰॹ w $+4QBDBLHFͷUZQFͱҟͳΔͷͰNPEVMFͳͲΛઃఆ͢Δඞཁ w NPEVMF$PNNPO+4Ͱग़ྗΛ$+4ʹ͢Δ
w FT.PEVMF*OUFSPQUSVF

෇࿥%VBM1BDLBHFͰؤுΔ৔߹ͷઃఆ // tsconfig.esm.json "compilerOptions": { "module": "nodenext", // or "node16"
/ "node18" // ... } // tsconfig.cjs.json "compilerOptions": { "module": "commojs", "esModuleInterop": true, // ... }

෇࿥%VBM1BDLBHFͰؤுΔ৔߹ QBDLBHFKTPODPOEJUJPOBMFYQPSUΛ࢖͏ "exports": { ".": { "import": "./esm/lib.js", // for
ESM "require": "./cjs/lib.js" // for CJS } },

෇࿥%VBM1BDLBHFͰؤுΔ৔߹ 54͔Β͸FYQPSTͷUZQFTEFGBVMUϑΟʔϧυ΋ղऍ͢ΔΑ͏ʹͳͬͨ "exports": { ".": { "import": { // for
ESM "types": "./types/esm/index.d.ts", // types "default": "./esm/index.js" // js }, "require": {...} } }

෇࿥%VBM1BDLBHFͰؤுΔ৔߹ Ճ͑ͯݹ͍/PEF΍54ͷͨΊʹ'BMMCBDL΋ࢦఆ͓ͯ͘͠ͱྑ͍ { // Fall-back for older versions of TypeScript
"types": "./types/index.d.ts", // CJS fall-back for older versions of Node.js "main": "./commonjs/index.cjs" }

Lookback TypeScript ESM support and what should...

Lookback TypeScript ESM support and what should we do now.

More Decks by Saji

Featured

Transcript