JSX

使用 JSX，必须做两件事：

使用 .tsx 扩展名命名文件
启用 jsx 选项

TypeScript 附带三种 JSX 模式：

preserve：保持 JSX 作为输出的一部分，以供另一个转换步骤（例如 Babel）进一步使用，输出将具有 .jsx 文件扩展名
react：触发 React.createElement，使用前不需要经过 JSX 转换，输出会有 .js 文件扩展名
react-native：等价于 preserve，因为它保留所有 JSX，但输出将改为具有 .js 文件扩展名

使用 jsx 命令行标志或相应的选项 tsconfig.json 中的 jsx 文件指定此模式

.d.ts 文件和 declare 的作用

可以用来声明全局类型，变量或者模块，可以直接使用而不用再import导入
如果 types.ts 文件在 ts 编译范围内的情况下，在 types.ts 文件中，通过 declare 声明的变量、类型或者模块是全局性的，即，可以在不导入类型的情况下直接使用
在 TS 配置文件（tsconfig.js）中，通过 include 选项设置的编译范围内包含 types.ts 文件
types.ts 文件不能是模块，即，文件内不用有导入/导出语句（import，import type，export，export type）。如果文件中包含导入导出语句，types.ts 文件中的声明将失去全局性，必须导出声明，并在使用时先导入，否则会报错
declare type AjaxType='GET'|'POST';
文件以.d.ts为后缀，里面的内容可以省去declare开头

webpack

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS

步骤：

初始化项目

进入项目根目录，执行命令 npm init -y

主要作用：创建 package.json 文件

下载构建工具：npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安装了7个包：

webpack

- 构建工具webpack

webpack-cli

- webpack的命令行工具

webpack-dev-server

- webpack的开发服务器

typescript

- ts编译器

ts-loader

- ts加载器，用于在webpack中编译ts文件

html-webpack-plugin

- webpack中html插件，用来自动创建html文件

clean-webpack-plugin

- webpack中的清除插件，每次构建都会先清除目录

根目录下创建 webpack 的配置文件webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },

    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist'
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },
    
    module: {
        rules: [
            {
                test: /.ts$/,
                use: {
                   loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'TS测试'
        }),
    ]

}

根目录下创建tsconfig.json，配置可以根据自己需要

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

修改package.json添加如下配置

{
  ...略...
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  ...略...
}

在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

Babel

经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。

安装依赖包：npm i -D @babel/core @babel/preset-env babel-loader core-js

共安装了4个包，分别是：

@babel/core

- babel的核心工具

@babel/preset-env

- babel的预定义环境

@babel-loader

- babel在webpack中的加载器

core-js

- core-js用来使老版本的浏览器支持新版ES语法

修改webpack.config.js配置文件

...略...
module: {
    rules: [
        {
            test: /.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    options:{
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
}
...略...

如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本

TypeScript学习记录-JSX，全局声明，webpack，babel配置

JSX

.d.ts 文件 和 declare 的作用

webpack

Babel

.d.ts 文件和 declare 的作用