从JavaScript到TypeScript

TypeScript 和 JavaScript 是密切相关的编程语言。TypeScript 是 JavaScript 的扩展，为 JavaScript 代码添加了静态类型检查和其他一些高级特性。它与 JavaScript 在语法上具有高度的兼容性，可以无缝地与现有的 JavaScript 代码集成。TypeScript 通过编译过程将 TypeScript 代码转换为 JavaScript 代码，以便在不同的 JavaScript 运行环境中执行。
具体来说，TypeScript 具有以下与 JavaScript 关系相关的特点：

1. 超集关系：TypeScript 是 JavaScript 的超集，这意味着所有的有效 JavaScript 代码在 TypeScript 中也是有效的。这使得现有的 JavaScript 代码可以无缝地迁移到 TypeScript 环境中，无需做任何修改。
2. 静态类型检查：JavaScript 是一种动态类型语言，类型由运行时环境进行推断。而 TypeScript 引入了静态类型检查，允许开发者在编译时发现潜在的类型错误。通过类型注解的使用，TypeScript 在编码阶段可以提早捕获类型错误，提高了代码的可靠性和可维护性。
3. 编译过程：TypeScript 代码需要通过 TypeScript 编译器进行转换，最终生成符合指定 JavaScript 版本的代码。这意味着在运行 TypeScript 代码之前，需要将其编译为 JavaScript 代码。因此，TypeScript 在某种程度上依赖于 JavaScript 来执行。

TypeScript常用的打包工具

一般来说，Webpack使用最多，Gulp也能支持但需要使用Browserify，Babelify和Uglify进行集成。现在，你还可以使用Vite。有关于这些打包工具如何编译TypeScript，可以参考以下链接：

1. Webpack：https://webpack.js.org/guides/typescript/
2. Gulp：https://gulpjs.com/en/getting-started/quick-start/
3. Vite：https://vitejs.dev/guide/

TypeScript与JS是否可以混用

可以，TypeScript 是 JavaScript 的超集，这意味着所有的有效 JavaScript 代码在 TypeScript 中也是有效的。这意味着现有的 JavaScript 代码可以无缝地迁移到 TypeScript 环境中，无需做任何修改。
为什么不推荐混用：

1. 混用会增加代码的复杂度，因为 TypeScript 的类型检查会带来额外的运行时开销。
2. 混用会增加代码的维护成本，因为 TypeScript 的类型检查会带来额外的开发成本。
3. 混用会增加代码的阅读成本，因为 TypeScript 的类型检查会带来额外的阅读成本。

转换到TypeScript文件

到目前为止，你已经做好了使用TypeScript文件的准备。 第一步，将.js文件重命名为.ts文件。 如果你使用了JSX，则重命名为.tsx文件。
第一步达成？ 太棒了! 你已经成功地将一个文件从JavaScript转换成了TypeScript!
当然了，你可能感觉哪里不对劲儿。 如果你在支持TypeScript的编辑器（或运行tsc --pretty）里打开了那个文件，你可能会看到有些行上有红色的波浪线。 你可以把它们当做在Microsoft Word里看到的红色波浪线一样。 但是TypeScript仍然会编译你的代码，就好比Word还是允许你打印你的文档一样。
如果对你来说这种行为太随便了，你可以让它变得严格些。 如果，你不想在发生错误的时候，TypeScript还会被编译成JavaScript，你可以使用noEmitOnError选项。 从某种意义上来讲，TypeScript具有一个调整它的严格性的刻度盘，你可以将指针拔动到你想要的位置。
如果你计划使用可用的高度严格的设置，最好现在就启用它们（查看启用严格检查）。 比如，如果你不想让TypeScript将没有明确指定的类型默默地推断为any类型，可以在修改文件之前启用noImplicitAny。 你可能会觉得这有些过度严格，但是长期收益很快就能显现出来。

TypeScript打包的兼容性测试准备

TypeScript是否支持直接在浏览器运行？ 浏览器不支持TypeScript，因为TypeScript是编译型语言，需要编译后才能运行。所以浏览器并不原生支持TypeScript。

Webpack配置演示

如果你使用React项目模板创建，或者Vue3.0创建，那么已经支持TypeScript了。绝大多数情况下，不用单独配置，除非你的项目特殊，需要单独使用Webpack对TypeScript进行编译，如转换成让Web SDK供开发者调用。那么下面我们来整理最简单的Webpack配置。注意，下面的依赖确保都被安装。
TypeScript：TypeScript是JavaScript的一个超集，添加了静态类型、类、接口等特性。你需要安装TypeScript本身以便编写和编译TypeScript代码。

npm install --save-dev typescript

ts-loader 或 awesome-typescript-loader：这两个都是Webpack的加载器，用于将TypeScript代码转换为JavaScript代码。ts-loader是一个比较简单的加载器，而awesome-typescript-loader可能提供了一些额外的特性，但相应地也可能更复杂一些。你可以根据你的需求选择其中一个。

npm install --save-dev ts-loader

@types/webpack-env：这个包为Webpack的全局变量提供了TypeScript的类型定义。这有助于在TypeScript代码中正确地引用Webpack的全局变量。

npm install --save-dev @types/webpack-env

Webpack 本身：虽然你可能已经安装了Webpack，但请确保你的版本与ts-loader或awesome-typescript-loader兼容。无论是使用webpack4，还是5，都可以编译.ts文件。
Webpack CLI：如果你还没有安装Webpack CLI，也需要安装它，因为Webpack 4及以上版本需要这个CLI来运行Webpack。

npm install --save-dev webpack
npm install --save-dev webpack-cli

一旦你安装了这些依赖，你需要在Webpack的配置文件（通常是webpack.config.js）中设置TypeScript加载器。例如，对于ts-loader，你的配置可能看起来像这样：

module.exports = {  
  // ...  
  module: {  
    rules: [  
      // ...  
      {  
        test: /\.tsx?$/,  
        use: 'ts-loader',  
        exclude: /node_modules/,  
      },  
    ],  
  },  
  resolve: {  
    extensions: [ '.tsx', '.ts', '.js' ],  
  },  
};