TypeScript教程---基础语法及编译设置
本文最后更新于 2024-05-26，文章内容可能已经过时。
前言
我先说说个人在平时开发中使用js的一些痛点吧，我们都知道，js是一种弱类型语言，变量的类型可以通过赋值被改变。js本身就可以通过赋值的类型来对变量的类型进行推倒，这种机制使得js在声明变量的时候，只需要一个关键词var或者let 来声明，写代码的人就不需要考虑它应该是什么类型的，这就导致编写的程序在实际运行中出现各种各样的错误。首先你需要知道，编程开发中我们有一个共识：错误出现的越早越好。我列举一下我平时常见的一些错误：
- 定义的变量本身赋值的时候是
Array类型的，但是后续操作不当，导致类型被改变，而编译器也没有进行提示，这导致后边的程序使用foreach、map等方法读取变量时，发现类型不是Array类型，这就会导致报错。 - 定义的函数没有声明传入参数的类型，将会导致函数调用时传入了不期望的类型而报错，编译器是不会有任何的提示。
- 调用API的时候，服务端对API的参数类型是有严格要求和限制的，这时传入的参数如果在处理期间类型被悄悄的改变，传入到API中，向服务端发起请求的时候，就会报错。
这些错误主要是缺乏类型思维导致的错误，如果可以在js中引入类型判断这一机制，那么上边的这些错误就可以在编码过程中及时发现了，而不会等到运行时才报错了，可以大幅度提高开发的效率。为了弥补Java Script类型约束上的缺陷，增加类型约束，很多公司推出了自己的方案。
- 2014年，Facebook推出了flow来对JavaScript进行类型检查；
- 同年，Microsoft微软也推出了TypeScript1.0版本；
他们都致力于为JavaScript提供类型检查；而现在，无疑TypeScript已经完全胜出，同时，企业对前端工程师的招聘要求中，typescript已经默认为必会技能了。
对于接触过一些面向对象编程的同学来说，学习基本语法应该不难，有些语法特性可以自行类比学习，我就不会讲述的那么详细，因为这往往有点多余，自己思考得来的东西才更加影响深刻。
一、TypeScript 简介
1、TypeScript 是什么？
以 JavaScript 为基础构建的语言，它针对 JavaScript 存在的问题进行设计，是一个 JavaScript 的超集。Typescript 扩展了 JavaScript，并添加了类型。可以在任何支持 JavaScript 的平台中执行。TS 不能被 JS 解析器直接执行，TS 需要编译为 JS 才能执行。
2、TypeScript 增加了什么？
- 类型约束
- 支持 ES 的新特性
- 添加 ES 不具备的新特性
- 丰富的配置选项。比如可以配置其兼容性，支持哪个版本的 ES 语法。
- 强大的开发工具
二、TypeScript 开发环境搭建
ts 是以 Node 为基础进行解析的，因此需要安装 node，之后使用 npm 全局安装 typescript，创建一个 ts 文件，使用 tsc 对 ts 文件进行编译，编译之后的 ts 文件会变为 js 文件，之后再执行 js 文件。
# npm 全局安装TypeScript
npm i -g typescript
#执行ts文件
tsc xxx.ts
安装完毕之后，通过 tsc -v 查看是否出现版本号。
三、基本语法介绍
1、类型声明
类型可以声明在变量上
语法：let 变量名称: 约束类型
let num：number;
一般是直接声明完类型直接赋值。
let num: number = 123;
如果变量的声明和赋值是同时进行的，TS 可以自动对变量进行类型检测。
let bol = true; // 之后只能复制boolean类型的值
类型也可以声明在
函数的参数上
function sum(a: number, b: number): number{
return a + b;
}
let res = sum(1, 2); // res只能是number类型，因为sum函数已经声明了返回的变量是number类型
2、基本类型
可以使用
|来连接多个类型，称为联合类型。
let a: "male" | "female"; //字面量来赋值约束类型
let c: boolean | string;
c = true;
c = "ceshi"
any表示的是任意类型，一个变量设置为 any 后相当于该变量关闭了类型检测，使用 ts 的时候，不建议使用 any 类型。声明变量如果不指定类型，则 ts 解析器则会自动判断变量的类型为 any，相当于隐式的 any。any可以赋值给任何变量，除never
unknown 表示未知类型的值，它和 any 的区别是给其他类型的变量不能赋值。遇到一个类型不确定的便使用 unknown，不要使用 any
let e: unknown;
let str: string = "123"
//第一种赋值方式
if(typeof e = "string"){
str = e;
}
// 类型断言,可以用来解析变量的实际类型
str = e as string
str = <string>e;
void 是空值，一般用于设置函数的返回值
function fn(): void{
// 可以不返回
}
never 表示永远不会返回结果
function fn(): never{
throw new Error("报错"); // 没有返回值的函数
}
object 类型，表示一个 js 对象
let b: {name: string, age?: number}; // ?表示属性是可选的
b = {name: '对象'}
//表示任意类型的属性，但必须有name
let obj: {name: string, [propName: string]: any}
obj = {name: "zhubajie"， age: 18}
函数结构的表示方法
let d: (a: number, b: number) => number;
function d(a1: number, a2: number):number{}
array 数组
let e: string[]; // 表示字符串数组
e = ["a", "b", "c"]
let g: Array<number>; //方法二表示
元组类型表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let x: [string, number];
x = ['hello', 0] //ok
x = [10, 'hello'] // Error
当访问一个已知索引的元素，会得到正确的类型：
console.log(x[0].substr(1));
console.log(x[1].substr(1)); // 由于x[1] 是number类型的，因此不能使用substr方法
当访问一个越界的元素，会使用联合类型替代：
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型
枚举（）emum 类型是 JavaScript 标准数据类型的一个补充。
emum Color {Red, Green, Blue};
let c: Color = Color.Green;
默认情况下，从 0 开始为元素标号，也可以自己手动指定成员的数值，例如：将上边的枚举元素改为从 1 开始编号
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green
也可以全部手动赋值：
enum Color {Red = 1, Green = 2, Blue = 3}
let c: Color = Color.Green;
枚举类型的一个便利就是由枚举的值知道枚举的类型。例如，我们知道数值为 2，但是不确定他映射到 Color 的那个名字，便可以查找相应的名字：
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]
3、变量声明
Let 和 const 的使用
let 和 const 是 JavaScript 里相对较新的变量声明方式，let 很多方面是与 var 相似的，但是可以避免在 JavaScript 里的一些常见问题。const 是对 let 的增强，它能阻止对一个变量再次赋值。
var 声明的变量会导致变量重复，且其他作用域也可以访问到 var 声明的变量。
const与 let 声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。换句话说，它们拥有与 let 相同的作用域规则，但是不能对它们重新赋值。
关于 const 和 let 的使用需要视具体情况而定，基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。 使用const也可以让我们更容易的推测数据的流动。
解构语法
数组解构
数组解构赋值
let input = [1, 2];
let [first, second] = input;
console.log(first); // outputs 1
console.log(second); // outputs 2
作用于函数的参数：
function fun([a, b]: [number, number]){
}
也可以在数组里边使用 ... 来创建剩余变量
let [first, ...rest] = [1, 2, 3, 4];
console.log(first) // 1
console.log(rest) // 2,3,4
解构其他元素
let [, second, , fourth] = [1, 2, 3, 4];
对象解构
let obj: { aaa: string, age: number } = { aaa: "test", age: 12 }
let { aaa, age} = obj;
使用 ... 来解构其他的剩余变量
let obj = {a:"foo", b:12, c:"bar"}
let {a, ...rest} = obj
和数组一样，也可以使用 ... 来解构对象
默认值
默认值可以让你在属性为 undefined 时使用缺省值
function keepWholeObject(wholeObject: {a: string, b?:number}){
let {a, b = 1001} = wholeObject;
}
现在，即使 b 为 undefined ， keepWholeObject 函数的变量 wholeObject 的属性 a 和 b 都会有值。
函数声明
解构也能用于函数声明。
type C = { a: string, b?: number }
function f({ a, b }: C): void {
// ...
}
展开
展开的语法和解构的语法相类似，它允许将一个对象展开为另一个对象。
let first = [1, 2];
let second = [3, 4];
let bothPlus = [0, ...first, ...second, 5];
四、编译选项
1、自动编译文件
编译 ts 文件时，使用 -w 指令，TypeScript 编译器会自动监视文件的变化，并在文件发生变化时进行重新编译。
tsc xxx.ts -w
2、自动编译整个项目
如果直接使用 tsc 指令，则可以自动将当前项目下的所有 ts 文件编译为 js 文件，但是直接使用 tsc 指令的时候，需要在项目的根目录下创建一个 ts 的配置文件 tsconfig.json。
tsconfig.json 是一个 json 文件 ,它位于项目的根目录下。添加配置文件之后，只需要 tsc 命令就可以对整个项目进行编译。
具体的配置选项如下所示：
配置选项：
include
定义希望被编译文件所在的目录
默认值：["**/*"]
示例：
"include":["src/**/*", "tests/**/*"]上述示例中，所有src目录和tests目录下的文件都会被编译
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中包含多个子选项，用来完成对编译的配置
项目选项
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、ScriptHost ......
示例：
"compilerOptions": { "target": "ES6", "lib": ["ES6", "DOM"], "outDir": "dist", "outFile": "dist/aa.js" }
module
设置编译后代码使用的模块化系统
可选值：
- CommonJS、UMD、AMD、System、ES2020、ESNext、None、ES6、ES2020、ESNext
示例：
"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
- 是否对JavaScript文件编译，默认是false。
checkJs
是否对js文件进行检查
示例：一般是要么都用，要么都不用
"compilerOptions": { "allowJs": true, "checkJs": true }
removeComments
- 是否删除注释
- 默认值：false
noEmit
- 不对代码进行编译，即不生成编译后的文件
- 默认值：false
noEmitError:
- 当有错误的时候不生成编译后的文件
sourceMap
是否生成sourceMap
默认值：false
严格检查
- strict
- 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
- alwaysStrict
- 总是以严格模式对代码进行编译
- noImplicitAny
- 禁止隐式的any类型
- noImplicitThis
- 禁止类型不明确的this，可以预先在编译的时候检查出来。
- strictBindCallApply
- 严格检查bind、call和apply的参数列表
- strictFunctionTypes
- 严格检查函数的类型
- strictNullChecks
- 严格的空值检查
- strictPropertyInitialization
- 严格检查属性是否初始化
- strict
额外检查
- noFallthroughCasesInSwitch
- 检查switch语句包含正确的break
- noImplicitReturns
- 检查函数没有隐式的返回值
- noUnusedLocals
- 检查未使用的局部变量
- noUnusedParameters
- 检查未使用的参数
- noFallthroughCasesInSwitch
高级
- allowUnreachableCode
- 检查不可达代码
- 可选值：
- true，忽略不可达代码
- false，不可达代码将引起错误
- noEmitOnError
- 有错误的情况下不进行编译
- 默认值：false
- allowUnreachableCode
4、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
- 共安装了7个包
根目录下创建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 chrome.exe" }, ...略... }
在src下创建ts文件，并在并命令行执行
npm run build对代码进行编译，或者执行npm start来启动开发服务器
5、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语法
- @babel/core
修改webpack.config.js配置文件
...略... 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/ } ] } ...略...如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
以上便是 ts 的基本语法和编译设置，如果只是将 ts 作为一个类型检查工具或简单使用，已经足够了，但是如果需要用 ts 进行面向对象编程，那么往往是不够用的，需要学习 ts 中的面向对象特征，以及一些扩展语法，比如泛型。
- 感谢你赐予我前进的力量
-
微信 
支付宝
