本文最后更新于 2024-05-26，文章内容可能已经过时。

前言

我先说说个人在平时开发中使用js的一些痛点吧，我们都知道，js是一种弱类型语言，变量的类型可以通过赋值被改变。js本身就可以通过赋值的类型来对变量的类型进行推倒，这种机制使得js在声明变量的时候，只需要一个关键词var或者let 来声明，写代码的人就不需要考虑它应该是什么类型的，这就导致编写的程序在实际运行中出现各种各样的错误。首先你需要知道，编程开发中我们有一个共识：错误出现的越早越好。我列举一下我平时常见的一些错误：

  1. 定义的变量本身赋值的时候是Array类型的，但是后续操作不当，导致类型被改变，而编译器也没有进行提示，这导致后边的程序使用foreach、map等方法读取变量时，发现类型不是Array类型，这就会导致报错。
  2. 定义的函数没有声明传入参数的类型，将会导致函数调用时传入了不期望的类型而报错，编译器是不会有任何的提示。
  3. 调用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
              • 严格检查属性是否初始化

          • 额外检查

            • noFallthroughCasesInSwitch
              • 检查switch语句包含正确的break
            • noImplicitReturns
              • 检查函数没有隐式的返回值
            • noUnusedLocals
              • 检查未使用的局部变量
            • noUnusedParameters
              • 检查未使用的参数

          • 高级

            • allowUnreachableCode
              • 检查不可达代码
              • 可选值：
                • true，忽略不可达代码
                • false，不可达代码将引起错误
            • noEmitOnError
              • 有错误的情况下不进行编译
              • 默认值：false

4、webpack

  • 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。

  • 步骤：

    1. 初始化项目

      • 进入项目根目录，执行命令 npm init -y
        • 主要作用：创建package.json文件

    2. 下载构建工具

      • 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中的清除插件，每次构建都会先清除目录

    3. 根目录下创建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测试'
        }),
    ]

}

    4. 根目录下创建tsconfig.json，配置可以根据自己需要

      • {
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

    5. 修改package.json添加如下配置

      • {
  ...略...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  ...略...
}

    6. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

5、Babel

  • 经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。

    1. 安装依赖包：

      • 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语法

    2. 修改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 中的面向对象特征，以及一些扩展语法，比如泛型。