TypeScript学习笔记（二）

编程语言 2021-12-02 10:53:04 阅读次数: 0

编译TS

自动编译文件

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

tsc xxx.ts -w
复制代码

一个文件一个文件的编译太麻烦了，我们可以对整个项目进行编译

自动编译整个项目

首先在项目根目录下创建一个ts的配置文件 tsconfig.json，然后就可以使用tsc指令，编译项目下的所有ts文件为js文件，当然也可以开启监视模式tsc -w监视所有的文件

我们使用 tsc --init 可以初始化一个tsconfig.json文件，通过对配置文件的设置可以进行自定义的ts编译

下面我们在介绍tsconfig.json文件中的一些配置选项

配置选项

官方文档 TypeScript: TSConfig Reference - Docs on every TSConfig option (typescriptlang.org)

{
  // 此json文件中可以写注释！
  /*
    tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
  */

  /*
    "include" 用来指定哪些ts文件需要被编译
      默认：当前路径下所有文件, **\*
      路径：** 表示任意目录
            * 表示任意文件
  */
  "include": [
    "./src/**/*"
  ],
  
  /*
    "exclude" 不需要被编译的文件目录
    默认值：
      ["node_modules", "bower_components", "jspm_packages", "./dist"]
  */
  "exclude": [
    "./src/exclude/**/*"
  ],
  
  /*
    被继承的配置文件
    例如："extends": "。/configs/base",
  */
  //  "extends": "",
  
  /*
    指定被编译文件的列表，只有需要编译的文件少时才会用到
  */
  //  "files": [],
  
  /*
    compilerOptions 编译器的选项
  */
  
  "compilerOptions": {
    // target 用来指定ts被编译为的ES的版本
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', ...
    "target": "es2015",
    // module 指定要使用的模块化的规范
    // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', ...
    "module": "es2015",
    // lib用来指定项目中要使用的库
    // 在node项目中可以声明用到的库，在前端中可以声明dom(浏览器中的内置库，但是在node中是不需要的！)
    // 默认就是在浏览器中的运行环境！
    //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020',
    // 'esnext', 'dom', 'dom.iterable', ...
    "lib": [
      "es6",
      "dom"
    ],
    
    // outDir 用来指定编译后文件所在的目录
    "outDir": "./dist",
    
    // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
    //"outFile": "./dist/app.js"
    
    // 是否对js文件进行编译，默认是false
    "allowJs": true,
    // 是否检查js代码是否符合语法规范，默认是false
    "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 仅用TS检查语法，不生成编译后的文件
    "noEmit": false,
    // 当有错误时不生成编译后的文件
    "noEmitOnError": true,
    
    /*
      语法检查属性
    */
    // 所有严格检查的总开关，一旦打卡，后面几项都可以不用写
    "strict": true,
    // 用来设置编译后的文件是否使用严格模式，默认false
    // 在ES6中的模块化会自动使用严格模式，而无需在文件开头添加`'use strict'`
    "alwaysStrict": true,
    // 不允许隐式的any类型
    "noImplicitAny": true,
    // 不允许不明确类型的this
    "noImplicitThis": true,
    // 严格的检查空值
    "strictNullChecks": true,
   
   "moduleResolution": "node",     // 选择模块解析策略
    "experimentalDecorators": true,  // 启用实验性的ES装饰器
    "allowSyntheticDefaultImports": true,   // 允许从没有设置默认导出的模块中默认导入。
    "sourceMap": true,   // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
    "declaration": true,   // 生成相应的.d.ts文件
    "noImplicitReturns": true,  // 不是函数的所有返回路径都有返回值时报错
    "importHelpers": true,  // 从 tslib 导入辅助工具函数
    "typeRoots": ["node_modules/@types"],
    "rootDir": "./src"
  }
}
复制代码

① include

重要

  • 是一个数组，用来指定需要编译的ts文件，其中 *表示任意文件 **表示任意目录
  • 默认值：["**/*"]
"include":["src/**/*", "test/**/*"] // 所有src目录和test目录下的文件都会被编译
复制代码

② exclude

  • 定义不需要被编译的文件目录
  • 默认值：["node_modules", "bower_components", "jspm_packages"]
"exclude": ["./src/hello/**/*"]  // src下hello目录下的文件都不会被编译
复制代码

③ extends

  • 定义被继承的配置文件
"extends": "./configs/base" // 当前配置文件中会自动包含config目录下base.json中的所有配置信息
复制代码

④ files

  • 指定被编译文件的列表，只有需要编译的文件少时才会用到
"files": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
]
复制代码
  • 列表中的文件都会被TS编译器所编译

⑤ compilerOptions

重要 编译选项，在compilerOptions中包含多个子选项，用来完成对编译的配置

对于这些选项有哪些可选值，我们可以随便写一个值，编辑器会提示我们有哪些可选值

image.png

① target

  • 设置ts代码编译的目标版本
  • 可选值： "ES3"（默认）, "ES5", "ES6", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020", "ES2021", "ESNext".
"compilerOptions": {
    "target": "ES6"
}
复制代码
  • 如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码

② lib

  • 指定代码运行时所包含的库（宿主环境）
  • 可选值："ES5", "ES6", "ES2015", "ES2015.Collection", "ES2015.Iterable", "ES2015.Promise", "DOM", "DOM.Iterable", "ScriptHost", "WebWorker", "WebWorker.ImportScripts"......
"compilerOptions": {
    "lib": ["ES6", "DOM"]
}
复制代码

一般来说，如果是运行在浏览器环境下的，就不需要自己单独设置这个

③ module

  • 设置编译后代码使用的模块化系统
  • 可选值："CommonJS", "AMD", "System", "UMD", "ES6", "ES2015", "ES2020", "ESNext", "None", "es2022", "node12", "nodenext"
"compilerOptions": {
    "module": "CommonJS"
}
复制代码

④ outDir

  • 编译后文件的所在目录
  • 默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
"compilerOptions": {
    "outDir": "./dist"
}
复制代码
  • 设置后编译后的js文件将会生成到dist目录。可以将源码与编译后的代码分开存放

⑤ outFile

  • 将所有的文件编译为一个js文件
  • 默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果 module 制定了 None、System 或 AMD 则会将模块一起合并到文件之中
"compilerOptions": {
    "outFile": "./dist/app.js"
}
复制代码

这种合并，我们应该交给打包工具去做，我们后面会说

⑥ rootDir

  • 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
"compilerOptions": {
    "rootDir": "./src"
}
复制代码

⑦ 其他配置

标题 功能
allowJs 是否对js文件编译，默认值：false
checkJs 是否对js文件进行语法检查，默认值：false
removeComments 是否删除注释，默认值：false
noEmit 不生成编译后的文件，默认值：false
noEmitOnError 当有错误的时候不生成编译后的文件，默认值：false
sourceMap 是否生成sourceMap，默认值：false

⑧ 严格检查

标题 功能
strict 启用所有的严格检查，设置后相当于开启了所有的严格检查，默认值：false
alwaysStrict 总是以严格模式对代码进行编译，默认值：false
noImplicitAny 禁止隐式的any类型，默认值：false
noImplicitThis 禁止类型不明确的this，默认值：false
strictBindCallApply 严格检查bind、call和apply的参数列表，默认值：false
strictFunctionTypes 严格检查函数的类型，默认值：false
strictNullChecks 严格的空值检查，默认值：false
strictPropertyInitialization 严格检查属性是否初始化，默认值：false

⑨ 额外检查

标题 功能
noFallthroughCasesInSwitch 检查switch语句包含正确的break
noImplicitReturns 检查函数没有隐式的返回值
noUnusedLocals 检查未使用的局部变量
noUnusedParameters 检查未使用的参数
allowUnreachableCode 检查不可达代码；true：忽略不可达代码，false：不可达代码将引起错误
noEmitOnError 有错误的情况下不进行编译，默认值：false

初始化项目

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

通过执行命令 npm init -y 初始化一个项目并创建package.json文件

使用tsc --init 创建ts的配置文件tsconfig.json

创建src/index.ts文件，用来编写ts代码

使用构建工具webpack

安装依赖包

npm i -D webpack webpack-cli webpack-dev-server
复制代码

image.png

  • webpack

    • 构建工具webpack

  • webpack-cli

    • webpack的命令行工具

  • webpack-dev-server

    • webpack的开发服务器
npm i -D ts-loader typescript 
复制代码

image.png

  • typescript

    • ts编译器

  • ts-loader

    • ts加载器，用于在webpack中编译ts文件
npm i -D html-webpack-plugin clean-webpack-plugin
复制代码

image.png

  • 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 = {
  // 指定入口文件
  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"],
  },
  
  // 配置webpack的loader
  module: {
    rules: [
      {
        test: /.ts$/,
        use: {
          loader: "ts-loader",
        },
        exclude: /node_modules/,
      },
    ],
  },
  
  // 配置webpack的插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};
复制代码

以上是一些基本的配置，但是在实际开发中，webpack在配置开发环境与生产环境时，配置的有些东西不太相同，所以我们应该分开写我们生产环境和开发环境的webpack配置

所以我们就在根目录下创建build文件夹存放我们的webpack配置文件

image.png

npm i -D webpack-merge
复制代码

image.png

基本配置webpack.base.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    environment: {
      arrowFunction: false, // 关闭webpack的箭头函数，可选
    },
  },
  resolve: {
    extensions: [".js", ".ts"],
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        use: [
          {
            loader: "ts-loader",
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};
复制代码

开发环境配置webpack.dev.config.js

module.exports = {
  devtool: "inline-source-map",
};
复制代码

生产环境配置webpack.pro.config.js

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

module.exports = {
  plugins: [new CleanWebpackPlugin()],
};
复制代码

配置主文件webpack.config.js

const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");

module.exports = (env, argv) => {
  let config = argv.mode === "development" ? devConfig : proConfig;
  return merge(baseConfig, config);
};
复制代码

配置tsc

根目录下创建tsconfig.json，可以根据自己需要自行配置，详细可以参考【TS】快速上手（四）配置选项 - 编译选项compilerOptions - 掘金 (juejin.cn)

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "strict": true
  }
}
复制代码

编写代码

index.ts

const box = document.querySelector('#app')
const hello: string = 'Hello YK菌'

if (box !== null) {
  box.innerHTML = hello
}
复制代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TS & webpack</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>
复制代码

配置命令

修改package.json添加如下配置

{
  ......
  "scripts": {
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
  },
  ......
}
复制代码

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

npm run build
复制代码

编译

image.png

image.png

npm start
复制代码

启动开发服务器

image.png

浏览器显示内容

image.png

配置babel

除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，通过以下步骤可以将babel引入到项目中。

安装依赖包

npm i -D @babel/core @babel/preset-env babel-loader core-js
复制代码

  • @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",
          // 设置babel
          options: {
            // 设置预定义的环境
            presets: [
              [
                // 指定环境的插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容的目标浏览器
                  targets: {
                    chrome: "58",
                    ie: "11",
                  },
                  // 指定corejs的版本
                  corejs: "3",
                  // 使用corejs的方式 "usage" 表示按需加载
                  useBuiltIns: "usage",
                },
              ],
            ],
          },
        },
        {
          loader: "ts-loader",
        },
      ],
      exclude: /node_modules/,
    },
  ];
}
复制代码

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

猜你喜欢

转载自juejin.im/post/7036714475520524324
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022