TypeScript基本介绍与开发环境
TypeScript简介
- TypeScript是JavaScript的超集
- 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性
- TS代码需要通过编译器编译为JS，然后再交由JS解析器执行
- TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用
相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS
TypeScript是一种由微软开发的自由和开源的编程语言。是JavaScript的一个超集。它在保留JavaScript语言本身特性的基础上添加了大量静态语言具有的一些特性，包括但不限于以下几点：
- 可选的静态类型
- 枚举、接口和类
- 命名空间
- 模块
- Lambda表达式
- 编译时类型检查
在2013年6月微软正式发布了0.9版。之后在不断更新的过程中逐渐支持ECMAScript 2015（ES6）标准
通过利用静态语言的特性和新标准，使JavaScript开发变得越来越简单。同时也很好的符合当前前端开发的模块化、工程化的开发方式和潮流。
环境搭建
-
安装nodejs，参考 Nodejs介绍与安装
-
安装vscode，参考 vscode安装_扩展安装
-
使用npm全局安装typescript
- 进入命令行
- 输入：npm i -g typescript
-
创建一个ts文件
-
使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc xxx.ts
不建议在全局安装typescript 即不建议使用命令
npm install -g typescript,建议在每个项目的node_modules中引入typescript，这样每个项目可以指定版本
编译配置
自动编译文件
tsc xxx.ts -w
自动编译整个项目
- 在项目根目录下创建一个ts的配置文件 tsconfig.json
- tsconfig.json是一个JSON文件，添加配置文件后，只需只需tsc命令即可完成对整个项目的编译
tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译
tsconfig.json示例：
{
// "include" 用来指定哪些ts文件需要被编译 **表示任意目录 *表示任意文件
"include": [
"./src/**/*"
],
// "exclude" 不需要被编译的文件目录 默认值：["node_modules", "bower_components", "jspm_packages"]
// "exclude": [
// "./src/hello/**/*"
// ]
// 定义被继承的配置文件 当前配置文件中会自动包含config目录下base.json中的所有配置信息
// "extends": "./configs/base"
// 指定被编译文件的列表，只有需要编译的文件少时才会用到
// "files": ["./src/core.ts","./src/sys.ts"]
// compilerOptions 编译器的选项
"compilerOptions": {
// target 用来指定ts被编译为的ES的版本
// 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'
"target": "es2015",
// module 指定要使用的模块化的规范
// 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
"module": "es2015",
// lib用来指定项目中要使用的库
//'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext', 'dom' ...
// "lib": ["es6", "dom"]
// outDir 用来指定编译后文件所在的目录
"outDir": "./dist",
// 指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
// "rootDir": "./src",
// 将代码合并为一个文件
// 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
//"outFile": "./dist/app.js"
// 是否对js文件进行编译，默认是false
// "allowJs": true,
// 是否检查js代码是否符合语法规范，默认是false
// "checkJs": true,
// 是否移除注释
"removeComments": true,
// 不生成编译后的文件
"noEmit": false,
// 当有错误时不生成编译后的文件
"noEmitOnError": true,
// 所有严格检查的总开关
"strict": true,
// 用来设置编译后的文件是否使用严格模式，默认false
"alwaysStrict": true,
// 不允许隐式的any类型
"noImplicitAny": true,
// 不允许不明确类型的this
"noImplicitThis": true,
// 严格的检查空值
"strictNullChecks": true,
// 严格检查bind、call和apply的参数列表
"strictBindCallApply": true,
// 严格检查函数的类型
"strictFunctionTypes": true,
// 严格的空值检查
"strictNullChecks": true,
// 严格检查属性是否初始化
"strictPropertyInitialization": true,
// 检查switch语句包含正确的break
"noFallthroughCasesInSwitch": true,
// 检查函数没有隐式的返回值
"noImplicitReturns": true,
// 检查未使用的局部变量
"noUnusedLocals": true,
// 检查未使用的参数
"noUnusedParameters": true,
// 检查不可达代码 true，忽略不可达代码 false，不可达代码将引起错误
"allowUnreachableCode": true,
// 有错误的情况下不进行编译 默认值：false
"noEmitOnError": true
}
}
webpack Babel
通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS
进入项目根目录，执行命令 npm init -y 主要作用：创建package.json文件
下载构建工具
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
- 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中的清除插件，每次构建都会先清除目录
开发中还经常需要结合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配置文件
// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后文件的文件
filename: "bundle.js",
// 告诉webpack不使用箭头
environment:{
arrowFunction: false,
const: false
}
},
// 指定webpack打包时要使用模块
module: {
// 指定要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
// 配置babel
{
// 指定加载器
loader:"babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome":"58",
"ie":"11"
},
// 指定corejs的版本
"corejs":"3",
// 使用corejs的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
},
// 设置less文件的处理
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
// 引入postcss
{
loader: "postcss-loader",
options: {
postcssOptions:{
plugins:[
[
"postcss-preset-env",
{
browsers: 'last 2 versions'
}
]
]
}
}
},
"less-loader"
]
}
]
},
// 配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"
template: "./src/index.html"
}),
],
// 用来设置引用模块
resolve: {
extensions: ['.ts', '.js']
}
};