typescript引入javascript的方式取決于你的項(xiàng)目結(jié)構(gòu)和目標(biāo)。 最直接的方法是直接在你的 .ts 文件中使用 <script> 標(biāo)簽引入 javascript 文件。但這并非最佳實(shí)踐，尤其是在大型項(xiàng)目中。</script>

我曾經(jīng)在一個(gè)項(xiàng)目中，為了快速集成一個(gè)第三方JavaScript庫(kù)，直接使用了這種方法。當(dāng)時(shí)項(xiàng)目時(shí)間緊迫，我需要盡快讓這個(gè)庫(kù)的功能上線。我直接在需要使用該庫(kù)的 TypeScript 文件中添加了 標(biāo)簽，然后就可以在 TypeScript 代碼中調(diào)用庫(kù)里的函數(shù)了。 然而，這種方法的缺點(diǎn)很快顯現(xiàn)出來(lái)：缺乏類型安全，代碼的可維護(hù)性下降，而且一旦庫(kù)更新，我需要手動(dòng)修改引入路徑。

更推薦且更規(guī)范的做法是使用模塊導(dǎo)入。TypeScript 編譯器會(huì)處理 .js 文件的導(dǎo)入，只要你的 JavaScript 文件遵循模塊化規(guī)范（例如 CommonJS 或 ES 模塊）。 假設(shè)你的 JavaScript 文件 my-library.js 導(dǎo)出了一個(gè)函數(shù) myFunction：

// my-library.js (using ES modules)
export function myFunction(param: string): string {
  return `Hello, ${param}!`;
}

登錄后復(fù)制

那么在你的 TypeScript 文件中，你可以這樣引入：

import { myFunction } from './my-library.js';

let result = myFunction('world');
console.log(result); // Output: Hello, world!

登錄后復(fù)制

需要注意的是，你的 JavaScript 文件必須以一種 TypeScript 能夠理解的方式導(dǎo)出函數(shù)或變量。如果你的 JavaScript 文件使用的是 CommonJS 模塊，你需要在 tsconfig.json 文件中配置 “allowJs”: true 和 “esModuleInterop”: true 選項(xiàng)，才能正確地處理導(dǎo)入。 我曾經(jīng)因?yàn)橥浽O(shè)置 “esModuleInterop”: true 而在導(dǎo)入 CommonJS 模塊時(shí)遇到類型錯(cuò)誤，花了不少時(shí)間才找到問(wèn)題所在。 正確配置編譯器選項(xiàng)至關(guān)重要。

最后，如果你使用的是構(gòu)建工具，例如Webpack、Parcel 或 Rollup，它們會(huì)負(fù)責(zé)處理 JavaScript 文件的導(dǎo)入，并將其打包到你的最終 JavaScript 文件中。 這種方式提供了更好的模塊管理和優(yōu)化，對(duì)于大型項(xiàng)目來(lái)說(shuō)是必不可少的。 在大型項(xiàng)目中，我個(gè)人更傾向于使用Webpack，因?yàn)樗峁┝藦?qiáng)大的功能和靈活的配置選項(xiàng)，可以更好地管理依賴關(guān)系和優(yōu)化代碼。

總而言之，選擇哪種引入方式取決于你的項(xiàng)目復(fù)雜度和構(gòu)建流程。對(duì)于小型項(xiàng)目或快速原型，直接使用 <script> 標(biāo)簽或許可以接受，但對(duì)于大型項(xiàng)目，使用模塊導(dǎo)入和構(gòu)建工具是更可靠和可維護(hù)的選擇。 記住，仔細(xì)檢查你的 JavaScript 文件的模塊規(guī)范，并正確配置 TypeScript 編譯器，才能避免不必要的錯(cuò)誤。</script>

路由網(wǎng)(www.lu-you.com)您可以查閱其它相關(guān)文章！