TypeScript 简介
1. TypeScript是JavaScript的超集。
2. 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。
3. TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。
4. TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。
5. 相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;同样的功能,TS的代码量要大于JS,但由于TS的代码结构更加清晰,变量类型更加明确,在后期代码的维护中TS却远远胜于JS。
一:TypeScript 开发环境搭建
1.下载Node.js
2.安装Node.js
3.使用npm全局安装typescript
- 进入命令行
- 输入: npm i -g typescript
4.创建一个ts文件
5.使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令:tsc xxx.ts
二:基本类型
类型说明
-
类型声明是TS非常重要的一个特点
-
通过类型声明可以指定TS中变量(参数、形参)的类型
-
指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
-
简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型, 参数: 类型): 类型{ ... }
自动类型判断
-
TS拥有自动的类型判断机制
-
当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
-
所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明
// number
let decimal: number = 6;
// string
let color: string = "blue";
color = 'red';
// boolean
let isDone: boolean = false;
// 字面量
let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
// any
let d: any = 4;
d = 'hello';
d = true;
// unknown
let notSure: unknown = 4;
notSure = 'hello';
// void
let unusable: void = undefined;
// never
function error(message: string): never {
throw new Error(message);
}
// array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
// tuple
let x: [string, number];
x = ["hello", 10];
// enum
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
类型断言
- 有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:
- 第一种
-
let someValue: unknown = "this is a string"; let strLength: number = (someValue as string).length;
-
-
第二种
-
let someValue: unknown = "this is a string"; let strLength: number = (<string>someValue).length;
-
三:编译选项
自动编译文件
-
编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。
-
tsc xxx.ts -w
-
自动编译整个项目
-
如果直接使用tsc指令,则可以自动将当前项目下的所有ts文件编译为js文件。
-
但是能直接使用tsc命令的前提时,要先在项目根目录下创建一个ts的配置文件 tsconfig.json
-
tsconfig.json是一个JSON文件,添加配置文件后,只需只需 tsc 命令即可完成对整个项目的编译
// tsconfig.json 是 ts 编译器的配置文件 ts 编译器 可以根据它的信息来对代码进行编译
{
// compilerOptions 编译器的选项
"compilerOptions": {
// 指定要使用模块化规范
//'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'
"module": "system",
// target 用来指定ts被编译成为es版本
"target": "es6",
"sourceMap": true,
// lib 用来指定项目中要使用的库(一般不需要添加)
// "lib": ["ES2015"],
// outDir 用来指定编译后文件所在目录
"outDir": "./dist/app.js",
// 合并为同一个文件
// "outFile" : "../dist/app.js"
// 是否对 js 进行编译 默认是 false
"allowJs": false,
// 是否对 js 进行检查 默认是 false
"checkJs": false,
// 是否移出注释 默认为 false
"removeComments": false,
// 不生成编译后的文件 默认为 false
"noEmit": false,
// 当有错误时 不生成 编译文件 默认为 false
"noEmitOnError": false,
// 用来设置编译后的文件是否使用严格模式 默认为 false
"alwaysStrict": false,
// 不允许隐藏的 any 类型
"noImplicitAny": false,
// 不允许不明确类型的 this
"noImplicitThis": false,
// 严格检查空值
"strictNullChecks": false,
// 所有严格检查的总开关
"strict": false
},
// "exclude" 不需要被编译的文件目录 (可选)
"exclude": [
"node_modules"
],
// "include" 用来指定哪些 ts 文件需要被编译
// 路径 : ** 表示任意目录 * 表示任意文件
"include": [
"src/**/*"
]
}
四: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" }, ...
- 在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语法
-
-
-
-
...略...
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/
}
]
}
...略...