typescript学习笔记（一）

tsconfig.json 配置项

用于设置typescript编译配置；根目录下创建 tsconfig.json 之后（即使是空配置项），就可以使用 tsc -w 监控根目录下所有的 .ts 文件，即时生成对应的 .js 文件。常用配置项：

include 指定需要编译的 ts 文件所在的路径，** 指定任意文件夹，* 指定任意文件。
示例： "include":["./src/**/*","./components/**/*"]
exclude 指定编译时排除的路径
默认值 ["node_modules","bower_components","jspm_packages"]
示例： "exclude":["./src/hello/*","./.umi/**/*"]
extends 定义被继承的配置文件
示例： "extends":"./config/base"
files 指定被编译文件列表，只有需编译文件少时才用到
示例： "files":["core.ts","sys.ts","types.ts"]
compilerOptions 重要设置
示例： "compilerOptions":{"target":"es3"}
子配置项包括：
任意配置子项，都可以先设置一个错误选项，然后通过编译时错误提示选择合适的配置项目值。

target 指定ts被编译为es的版本，取值可以是："es3","es5","es6","es2015","es2016","es2017","es2018","es2019","es2020","esnext"
示例："target":"es2015",
module 指定模块化要遵循的规范，取值可以是："none","commonjs","and","system","amd","umd","es6","es2015","es2020","esnext"
示例："module":"es2015",
lib 指定项目使用的库，默认值是支持浏览器环境
示例："lib":["dom"],
outDir 指定编译后文件存放路径，ts文件和js文件是一对一
示例："outDir":"./dist",
outFile 指定编译所有ts文件合并成一个js文件时该js文件存放路径
示例："outFile":"./dist/app.js",
allowJs 是否对js文件进行编译，默认值是 false
示例："allowJs":true,
checkJs 是否检查js代码符合ts规定的语法规范，默认值是 false
示例："checkJs":true,
removeComments 是否移除注释，默认值是 false
示例："removeComments":true,
noEmit 是否不生成编译后的文件，默认值是 false ，用于仅检测ts语法，不生成js的场合
示例："noEmit":true,
noEmitOnError 编译错误时是否不生成编译后的文件，默认值是 false
示例："noEmitOnError":true,

语法检查类配置项

alwaysStrict 编译后的js文件是否使用严格模式，默认值 false
注意：如果代码中有 export import 语句，默认就是js代码的严格模式，就不需要再设置该配置子项了
示例："alwaysStrict":true,
noImplicitAny 禁止隐式的any是否开启，默认值 false
示例："noImplicitAny":true,
noImplicitThis 禁止隐式的this是否开启，默认值 false
示例："noImplicitThis":true,
strictNullChecks 严格空值检查是否开启，默认值 false
示例："strictNullChecks":true,
strict 严格检查总开关，默认值 false ，如果设置 strict 为 true，上边四项就可以不用设置了；设为 false，上边四项都是 false 。
示例："strict":true,

webpack打包ts代码

环境搭建 npm i webpack webpack-cli typescript ts-loader

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

const path = require('path')
// webpack 所有配置信息都要写到 module.exports 中
module.exports = {// 指定入口文件entry: "./src/index.ts",// 指定打包后文件所在目录output:{// 指定打包后文件的目录path: path.resolve(__dirname,"dist"),// 打包后文件名filename: "bundle.js",},// 指定webpack打包时要使用的模块module:{// 指定要加载的规则rules:[{// 指定当前规则生效的文件test: /\.ts$/,// 要使用的loaderuse: 'ts-loader', // 指定要排除的文件exclude: /node_modules/,},],},
};

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

package.json 中配置

"scripts": {// ..."build":"webpack"
}

执行 npm run build 命令完成打包

webpack 打包生成 index.html

安装包 npm i -D html-webpack-plugin
修改 webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
// webpack 所有配置信息都要写到 module.exports 中
module.exports = {// ... 前边的配置同上// 配置webpack插件plugins:[new HTMLWebpackPlugin(), // 使用插件默认的html模板/* new HTMLWebpackPlugin(options:{title: "这是自定义标题",}), // 使用插件默认的html模板，自定义了标题 *//* new HTMLWebpackPlugin(options:{template: "./src/index.html",}), // 使用自定义html模板 */],
};

webpack打包后实时查看代码变动

安装包 npm i -D webpack-dev-server
修改 package.json

"scripts": {// ..."start":"webpack server --open chrome.exe"
}

执行 npm start

webpack打包时清空dist目录

安装包 npm i -D clean-webpack-plugin
修改 webpack.config.js

// ...
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack 所有配置信息都要写到 module.exports 中
module.exports = {// ... 前边的配置同上// 配置webpack插件plugins:[// ... 同上new CleanWebpackPlugin(),],
};

webpack打包ts文件时如果包含import/export代码时报错

修改 webpack.config.js

// ... 配置同上
module.exports = {// ... 前边的配置同上// 设置引用模块，即代码中可以import export 的文件类型有哪些resolve: {extensions: ['.js','.ts'],},
};

webpack打包ts代码成指定版本的js代码

安装包 npm i -D @babel/core @babel/preset-env babel-loader core-js
修改 webpack.config.js

// ... 配置同上
module.exports = {// ... 配置参考上边output: {path: path.resolve(__dirname,"dist"),        filename: "bundle.js",// 为了兼容ie11等不支持箭头函数的浏览器// 若没有此配置项，生成的js代码会类似： (()=>{...})()// 在ie11中运行就会报错，包含了ie11无法理解的箭头函数environment: {arrowFunction: false,},},// ...// 指定webpack打包时要使用的模块module:{// 指定要加载的规则rules:[{// 指定当前规则生效的文件test: /\.ts$/,// 要使用的loader，有多个时，使用数组，// 执行时先使用后边的loader，由后到前use: [// 配置babel{// 指定加载器loader: 'babel-loader',// 设置babeloptions: {// 设置预定义的环境presets: [[// 指定环境插件"@babel/preset-env",// 配置信息{// 要兼容的浏览器targets: {    // 浏览器:版本                                       "chrome": "88", "ie": "11",                                         },// 指定corejs的版本"corejs": "3",// 指定使用corejs的方式"useBuiltIns": "usage", // 按需加载},],],},},'ts-loader',                   ], // 指定要排除的文件exclude: /node_modules/,},            ],},
};

typescript学习笔记（一）相关推荐

TypeScript学习笔记3：运算符
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录运算符 ...
TypeScript学习笔记2：数据类型
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录数据类型 ...
TypeScript学习笔记1：变量赋值及书写方式
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录变量赋值 ...
Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
Typescript 学习笔记一：介绍、安装、编译
前言整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
typeScript学习笔记day01——小肉包
typeScript学习笔记 class1: 一.javaScript(js)的优缺点 javaScript是在微软公司和网景公司之间爆发的浏览器大战期间,由网景公司的Brendan Eich(布兰登 ...
typeScript学习笔记day02——小肉包
typeScript学习笔记 class3 : 2021.02.24 一.TS编译选项自动编译文件编译文件时,使用-w指令后,YS编译器会自动监视文件变化,并在文件发生变化时对文件进行重新编译. ...
typescript学习笔记1 —— 接口（interface）
typescript是微软出品的,javascript的超集.让javascript的写法很类似java,核心功能是让JavaScript这个弱类型的语言,增加类型检查,更适合编写企业级应用.之前的a ...
typescript-----javascript的超集，typescript学习笔记持续更新中......
Typescript,冲! Typescript 不是一门全新的语言,Typescript是 JavaScript 的超集,它对 JavaScript进行了一些规范和补充.使代码更加严谨. 一个特别好 ...
TypeScript学习笔记之接口（Interface）
在java中,接口是用来定义一些规范,使用这些接口,就必须实现接口中的方法,而且接口中的属性必须是常量. javascript中是没有接口的概念的.所以TypeScript在编译成 JavaScrip ...

typescript学习笔记（一）

tsconfig.json 配置项

webpack打包ts代码

webpack 打包生成 index.html

webpack打包后实时查看代码变动

webpack打包时清空dist目录

webpack打包ts文件时如果包含import/export代码时报错

webpack打包ts代码成指定版本的js代码

typescript学习笔记（一）相关推荐

最新文章

热门文章