TypeScript使用

简言

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

javascript中使用

node安装TypeScript命令

使用node安装之前，需要初始化项目（npm init ）。
然后安装typescript插件，它可以让我们的ts文件编译成js文件。

npm install typescript --save-dev
yarn add typescript --dev
pnpm add typescript -D

可以看到上面是只有typescript依赖包的，它的tsc就是处理ts文件的命令
例如：编写一个a.ts。处理–> tsc a.ts
然后同级就会出现一个同名的js文件，处理成功。

配置 tsconfig.json

tsconfig.json 文件是typescript的配置文件，我们可以根据需要来指定typescript如何处理ts文件。
项目根目录下创建tsconfig.json文件：

这里我们进行了一些基础配置

• 读取所有可识别的src目录下的文件（通过include）。
• 接受JavaScript做为输入（通过allowJs）。
• 生成的所有文件放在built目录下（通过outDir）。
• 将JavaScript代码降级到低版本比如ECMAScript 5（通过target）。

除了以上配置，配置文件常用的顶级配置选项还有以下配置：

• Compiler Options : 可以存放typescript插件的一些编译配置，例如outDir(输出路径)、allowJS(处理js)、target(编译后的js版本)、module(模块规则，默认node的commonjs)等等。
• files : 指定要处理的文件，如果没找到就会处理失败
• include ： 指定要包含在程序中的文件名或模式匹配的数组，这些文件名是相对于包含tsconfig的目录进行解析的。
• exclude : 排除不处理的文件或模式匹配的数组，这些文件名是相对于包含tsconfig的目录进行解析的。
• extends ： 继承指定ts配置文件的配置。

构建工具使用typescript

每个构建工具配置都不相同，你可以去对应官网查看typescript环境的配置和安装。
这里说下vite和webpack。

Vite

Vite 天然支持引入 .ts 文件。
但是它只支持ts文件的编译转换工作，并没有类型检查。并假设类型检查已经被你的 IDE 或构建过程接管了（你可以在构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查）。
另外，一般开发框架使用ts时需要下载对应声明依赖包。例如：@types/react、@types/vue等。

Webpack

webpack使用ts，除了typescript外，还需要有ts对应的loader(ts-loader)来加载处理ts或tsx文件。
并将下面的选项合并到你的webpack.config.js文件里：

module.exports = {

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [ ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            { test: /\.tsx?$/, loader: "ts-loader",  exclude: /node_modules/, }
        ],
    },

    // Other options...
};

要注意的是ts-loader必须在其它处理.js文件的加载器之前运行。
另外webpack支持esmodule和commonjs同时使用，ts也需要做相应的兼容性处理：
esModuleInterop为true和 allowSyntheticDefaultImports为true

结语

结束了。