1. Typescript是什么？
- 以JavaScript为基础构建的语言
- 一个JavaScript的超集（对js进行了扩展，完全支持js，又在js的基础上增添了许多功能，最主要就是在js中引入了类型的概念，让js类型由动态类型变为静态类型，更便于维护与开发）
- 可以在任何支持JavaScript的平台中执行
- Typescript扩展了JavaScript，并添加了类型
- TS不能被JS解析器直接执行，得把TS文件编译为JS
2. Typescript增加了什么？
- 类型
- 支持ES的新特性
- 添加ES不具备的新特性
- 丰富的配置选项（可以被编译成各种版本的js）
- 强大的开发工具
3. TypeScript开发环境搭建
3.1 下载node.js
3.2 安装node.js
3.3 使用npm全局安装typescript
- 进入命令行
- 输入：npm i -g typescript
3.4 创建一个ts文件
3.5 使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc xxx.ts
4. TS基本语法
4.1 基本类型
-
类型声明
-
类型声明是TS非常重要的一个特点
-
通过类型声明可以指定TS中变量（参数、形参）的类型
-
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
-
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
-
语法：具体代码见03 types.ts、04 types.ts
-
// 声明一个变量a，同时指定它的类型为Number let a: number; // a的类型设置为了number，在以后的使用过程中a的值只能是数字 a = 10; a = 33; // a = 'hello'; // 此行代码会报错 let b: string; b = 'hello'; // 声明完变量就直接赋值 let c: boolean = true; // 如果变量的声明和赋值是同时进行的，ts可以自动对变量类型进行检查 let d = true; d = false; // d = 123; // 会报错 // JS中的函数是不考虑参数的类型和个数的 function sum(a: number, b: number): number { return a + b; } let result = sum(123, 456);
-
-
-
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值是同时进行的，可以省略类型声明
-
类型
| 类型 | 例子 | 描述 |
|---|---|---|
| number | 1，-33,2.5 | 任意数字 |
| string | “hi”，‘hi’，hi | 任意字符串 |
| boolean | true，false | 布尔值true或false |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknown | * | 类型安全的any |
| void | 空值（undefined） | 没有值（或undefined） |
| never | 没有值 | 不能是任何值 |
| object | {name:“孙悟空”} | 任意的js对象 |
| array | [1,2,3] | 任意js数组 |
| tuple | [4,5] | 元素，TS新增类型，固定长度数组 |
| enum | enum(A,B) | 枚举，TS中新增类型 |
5. 编译选项
5.1 自动编译文件
-
编译文件时，使用-w指令后，TS编译器会自动监听文件变化，并在文件发生变化的时候对文件进行重新编译。
-
示例：
-
tsc xxx.ts -w
-
5.2 自动编译整个项目
- 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
- 但是能直接使用tsc命令的前提是，要现在项目根目录下创建一个ts配置文件tsconfig.json（该文件可以通过tsc --init指令快速生成，也可以自行添加）
- tsconfig.json是一个json文件，添加【配置文件后，只需tsc（或tsc -w)命令即可完成对整个项目的编译。(配空也可)
5.2.1 配置选项：
include
-
定义希望被编译文件所在的目录
-
默认值：["**/*"]
-
示例
-
"include": ["src/**/*", "tests/**/*"] -
上述示例中，所有src目录和test目录下的文件都会被编译
-
exclude
-
定义需要排除在外的目录
-
默认值： [“node_modules”, “bower_components”, “jspm_packages”]
-
示例：
-
"exclude": ["./src//hello/**/*"] -
上述示例中，src下hello目录下的文件都不会被编译
-
extends
-
定义被继承的配置文件
-
示例
-
"extends": "./configs/bass" -
上述示例中，当前配置文件中会自动包含configs目录下的base.json中的所有配置信息
-
files
-
指定被编译文件的列表，只有需要编译的文件少时才会用到
-
示例
-
"files": { "core.ts", "sys.ts", "types.ts", "parser.ts", "binder.ts", "tsc.ts" } -
列表中的文件都会被ts编译器所编译
-
compilerOptions
-
编译选项是配置文件中非常重要也比较复杂的配置选项
-
在compilerOptions中包含多个子选项，用来完成对编译的配置
-
项目选项
-
target
-
设置ts代码编译的目标
-
可选值
-
ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
-
示例：
-
"compilerOptions": { "target": "ES6" } -
如上设置，我们所有编写的ts代码都会被编译为ES6版本的js代码
-
-
-
lib
-
指定代码运行是所包含的库（宿主环境）
-
可选值：
- ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScripHost。。。。。。
-
示例：
-
"compilerOptions": { "target": "ES6", "lib": ["ES6","DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
-
-
-
module
-
设置编译后代码的使用的模块化标准
-
可选值：
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
-
示例：
-
"compilerOptions": { "module": "CommonJS" }
-
-
-
OutDir
-
编译后文件的所在目录
-
默认情况下，编译后的js文件会和ts文件位于相同的目录，设置OutDir后可以改变编译后文件的位置
-
示例
-
"compilerOptions": { "outDir": "./dist" }
-
-
-
outFile
-
将代码合并为一个文件
-
设置outFile后,所有的全局作用域中的代码会合并到同一个文件中
-
示例
-
"compilerOptions": { "outFile": "./dist/aa.js" } -
注：只支持module值为amd和system的情况下
-
-
-
allowJs
- 是否对js文件进行编译，默认是false
-
checkJs
- 是否检查js代码是否符合语法规范，默认值是false
-
removeComments
- 是否移除注释，默认值为false
-
noEmit
- 不生成编译后的文件，默认值为false
-
noEmitOnError
- 当有错误时不生成编译文件
-
strict
- 所有严格模式的总开关，一般都全部打开
-
alwaysStrict
- 用来设置编译后的文件是否使用严格模式，默认值为false
-
noImplicitAny
- 不允许隐式的any类型
-
noImplicitThis
- 不允许不明确类型的this,默认值为false
-
strictNullChecks
- 严格检查空值（null）
-
6. 使用webpack打包ts代码
- 通常情况下，实际开发中我们都需要使用构建工具对待吗进行打包，TS同样也可以结合构建工具一起使用，下边从webpack为例介绍一下如何结合构建工具使用TS
6.1 初始化项目
-
进入根目录，执行命令（主要作用：创建package.json文件）
-
npm init -y
-
6.2 下载构建工具
-
cnpm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin html-webpack-plugin- 共安装了7个包
- webpack：构建工具webpack
- webpack-cli：webpack的命令行工具
- webpack-dev-server：webpack的开发服务器
- typescript：ts编译器
- ts-loader：ts加载器，用于webpack中编译ts文件
- clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录
- html-webpack-plugin：webpack自动生成html文件的插件
- 共安装了7个包
-
根目录下创建webpack的配置文件webpack.config.js
-
// 引入一个包 const path = require("path"); 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打包时要使用的模块 module: { // 指定要加载的规则 rules: [ { // 指定规则生效的文件 test: /\.ts$/, //匹配以.ts结尾的文件 // 要使用的loader use: "ts-loader", // 指定要排除的文件 exclude: /node_modules/, }, ], }, };
-
-
自行新增tsconfig.json文件（可以tsc --init快速生成）
-
在package.json中"scripts"下新增"build":“webpack”
- 运行指令
npm run build查看是否生成打包文件
6.3 安装babel以兼容浏览器
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
// 引入一个包
const path = require("path");
// 引入插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// webpack所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, "dist"),
// 打包后文件的名字
filename: "bundle.js",
// 告诉webpack不使用箭头函数
environment: {
arrowFunction: false
}
},
// 指定webpack打包时要使用的模块
module: {
// 指定要加载的规则
rules: [
{
// 指定规则生效的文件
test: /\.ts$/, //匹配以.ts结尾的文件
// 要使用的loader
use: [
// 配置babel
{
// 指定加载器
loader: "babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets: [
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets: {
chrome: "56",
ie: "8",
},
// 指定corejs版本
corejs: "3",
// 使用corejs的方式
useBuiltIns: "entry", // usage-按需加载
},
],
],
},
},
"ts-loader",
],
// 指定要排除的文件
exclude: /node_modules/,
},
],
},
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// 复制'./src/index.html'文件，并自动引入打包输出的所有资源（JS/CSS）
template: "./src/index.html",
}),
],
// 用来设置引用模块
resolve: {
extensions: [".ts", "js"],
},
};
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
