TypeScript简介

TypeScript是JavaScript的超集。
它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。
相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；
TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

TypeScript 开发环境搭建

下载Node.js
安装Node.js
使用npm全局安装typescript
- 进入命令行
- 输入：npm i -g typescript
创建一个ts文件
使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令：tsc xxx.ts

基本类型

类型声明

通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

变量a 指定类型为number，就不能赋值为其他类型

函数中也可以进行类型声明，在函数中对参数进行类型声明的话，传参就要传指定类型的参数

函数中的返回值也可以类型声明

简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值

语法：

      let 变量: 类型;
      
      let 变量: 类型 = 值;
      
      function fn(参数: 类型, 参数: 类型): 返回值类型{
    
    
          ...
      }

自动类型判断

TS拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型

所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

let a = 10; // 变量的声明和赋值是同时进行的，所以可以省略掉类型声明
a = 'hello'; // 会报错，因为已经声明a变量为number，就不能再赋值为string类型

类型：

类型	例子	描述
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中新增类型

number

    let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    let big: bigint = 100n;

boolean

   let isDone: boolean = false;

string

   let color: string = "blue";
   color = 'red';
   
   let fullName: string = `Bob Bobbington`;
   let age: number = 37;
   let sentence: string = `Hello, my name is ${
      
      fullName}.
   
   I'll be ${
      
      age + 1} years old next month.`;

字面量

也可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
限制变量的值就是该字面量的值

// 可以使用 | 来连接多个类型(联合类型)
let b: 'male' | 'female';
b = 'male';
b = 'hello'; // 报错

let c: boolean | string;
c = true;
c = 'hello';

any（尽量不要用）

any 表示任意类型，可以任意赋值（一个变量设置类型为any后，相当于对该变量关闭了TS的类型检测）

不建议使用any！！！

// any 表示任意类型，可以任意赋值
let d; // 隐式any(TS解析器会自动判断变量的类型为any)
let d:any; // 显示any
d = 10;
d = 'hello';
d = true;

用了any，可以赋值给任何变量

let s: string;
// d的类型是any，它可以赋值给任意变量
s = b;

unknown

unknow 实际上是一个类型安全的any
unknow 类型的变量不能赋值给其他变量
如果要赋值的话，可以进行 ①类型判断 ②类型断言

// unknown 表示未知类型的值
let e: unknown;
e = 10;
e = 'hello';

let s: string;
// unknow 实际上是一个类型安全的any
// unknow 类型的变量不能赋值给其他变量
if (typeof e === 'string') {
    
     // 类型判断
   s = e; // 不报错
}
s = e; // 报错!!

void

void 表示空，以函数为例，表示没有返回值的函数（或者undefined）

// void 表示空,以函数为例,表示没有返回值的函数
function fn(): void {
    
    
   return 123; // 报错！！因为有返回值
   return undefined; // 不报错
}

never

never 表示永远不会返回结果

// never 表示永远不会返回结果
function fn1():never{
    
    
   throw new Error('报错了'); // 执行函数后报错,报错就会立即结束函数,所以不会有返回结果
}

object（没啥用）

{ 属性名:属性值,属性名:属性值}用来指定对象中可以包含哪些属性，必须一模一样
如果在属性名后面加上？表示属性是可选的，可有可无

// 语法：{属性名:属性值,属性名:属性值}
//  表示b 是一个对象，且里面要有这个name属性
// 在属性名后面加上？表示属性是可选的
let b: {
    
     name: string, age?: number };
b = {
    
     name: 'HAHA' };

定义对象的结构
如果一个对象里面，必须有name属性，其他的属性可有可无，可以用 [propName: string]: any 表示任意类型的属性

// [propName: string]: any 表示任意类型的属性
//  表示里面必须要有name属性，其他的都可以
let c: {
    
     name: string, [propName: string]: any };
c = {
    
     name: 'XIXI', age: 19, gender: '女' }

定义函数的结构
设置函数结构的类型声明

// 设置函数结构的类型声明
/* 
    (形参:类型,形参:类型...)=> 返回值类型
 */
// 希望d是一个函数，只有两个参数，分别是number类型，并且返回值也是number类型
let d: (a: number, b: number) => number;
d = function (n1:number, n2:number):number {
    
    
    return n1 + n2;
}

array

表示数组类型的两种方式

string[]表示字符串数组
Array<number> 表示数值数组

// string[]表示字符串数组
let e: string[]; // 希望e是一个数组，且里面存储的都是字符串
e = ['a', 'b', 'e'];
// number[]表示数值数组
let f: number[]; // 希望f是一个数组，且里面存储的都是数值
f = [1, 3, 42, 21];
// Array<number> 表示数值数组
let g: Array<number>;// 希望g是一个数组，且里面存储的都是数值
g = [3, 214, 2];

tuple

元组：TS新增类型，固定长度数组
[类型，类型，类型]

let h: [string, string]; // 表示只能有两个元素，且是string类型
h = ['hello', 'HAHA'];

enum

枚举：在多个值之间进行选择的时候使用

/* enum 枚举 */
enum Gender {
    
    
   Male,
   Female,
}

let i: {
    
     name: string, gender: Gender };
i = {
    
    
   name: '西里斯',
   gender: Gender.Male,
}
console.log(i.gender === Gender.Male); // true

类型断言

有些情况下，变量的类型对于我们来说是很明确，但是TS编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式：

第一种

变量 as 类型
let s: string;
let e: unknown;
s = e as string; // 告诉解析器变量的实际类型

第二种

<类型>变量
let s: string;
let e: unknown;
s = <string>e; // 告诉解析器变量的实际类型

& 和类型的别名

// & 表示同时
let j: {
    
     name: string } & {
    
     age: number };
j = {
    
     name: 'HAHA', age: 20 };

// 类型的别名，可以简化类型的使用
type myType = 1 | 2 | 3 | 4 | 5;
let k: 1 | 2 | 3 | 4 | 5;
let l: myType;
let m: myType;
k = 2;

编译选项

自动编译文件

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
只针对当前文件！

示例：
tsc xxx.ts -w

Ctrl+C关闭监视

自动编译整个项目

如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。
但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译，tsc -w就可以监视整个项目

配置选项

include
- 定义希望被编译文件所在的目录
- 默认值：["/**/*"]

示例：

 "include": [
	"./src/**/*"
],

上述示例中，所有src目录下的文件都会被编译

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中包含多个子选项，用来完成对编译的配置
1. 项目选项
  1. target
    设置ts代码编译的目标版本
    
    可选值：
    ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext（最新版本）
    
    示例：
```
     "compilerOptions": {
          
          
         "target": "ES6",
     }
```
    如上设置，我们所编写的ts代码将会被编译为ES6版本的js代码
  2. lib
    指定代码运行时所包含的库（宿主环境），一般情况下不用动
    
    可选值：
    ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost …
    
    示例：
```
     "compilerOptions": {
          
          
         "target": "ES6",
         "lib": ["ES6", "DOM"],
     }
```
  3. module
    设置编译后代码使用的模块化系统
    
    可选值：
    CommonJS、UMD、AMD、System、ES2020、ESNext、None
    
    示例：
```
      "compilerOptions": {
          
          
          "module": "CommonJS"
      }
```
  4. outDir
    编译后文件的所在目录（把源码和编译后的代码分开存放）
    
    默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
    
    示例：
```
      "compilerOptions": {
          
          
          "outDir": "./dist"
      }
```
    设置后编译后的js文件将会生成到dist目录
  5. outFile
    将所有的文件编译为一个js文件
    
    默认会将所有的编写在全局作用域中的代码合并为一个js文件，如果module制定了None、System或AMD则会将模块一起合并到文件之中
    
    示例：
```
     "compilerOptions": {
          
          
         "outFile": "dist/app.js"
     }
```
  6. rootDir
    指定代码的根目录，默认情况下编译后文件的目录结构会以最长的公共目录为根目录，通过rootDir可以手动指定根目录
    示例：
```
     "compilerOptions": {
          
          
         "rootDir": "./src"
     }
```
  7. allowJs
    是否对js文件编译，默认是false
```
    "compilerOptions": {
          
          
        "target": "ES6", // 用来指定 ts被编译为js的版本
        "module": "CommonJS", // 指定要使用的模块化的规范
        "lib": [], // 指定项目中要使用的库
        "outDir": "./dist", // 用来指定编译后文件所在的目录
        "outFile": "", // 将代码合并为一个文件（所有的全局作用域的代码合并到一个文件中）
        "allowJs": false, // 是否对js文件进行编译，默认是false
    },
```
  8. checkJs
    是否对js文件进行检查，默认是false
    示例：
```
"compilerOptions": {
          
          
    "allowJs": true,
    "checkJs": true
}
```
  9. removeComments
    是否删除注释
    默认值：false
```
    "compilerOptions": {
          
          
        "removeComments": false, // 是否移除注释，默认是false
    },
```
  10. noEmit
    不对代码进行编译
    默认值：false
```
	"noEmit": false, // 不生成编译后的文件
	"noEmitOnError": false, // 当有错误时不生成编译后的文件
```
  11. sourceMap
    是否生成sourceMap
    默认值：false
2. 严格检查
  1. strict
    - 启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
  2. alwaysStrict
    - 总是以严格模式对代码进行编译
  3. noImplicitAny
    - 禁止隐式的any类型
  4. noImplicitThis
    - 禁止类型不明确的this
  5. strictBindCallApply
    - 严格检查bind、call和apply的参数列表
  6. strictFunctionTypes
    - 严格检查函数的类型
  7. strictNullChecks
    - 严格的空值检查
  8. strictPropertyInitialization
    - 严格检查属性是否初始化
3. 额外检查
  1. noFallthroughCasesInSwitch
    检查switch语句包含正确的break
  2. noImplicitReturns
    检查函数没有隐式的返回值
  3. noUnusedLocals
    检查未使用的局部变量
  4. noUnusedParameters
    检查未使用的参数
4. 高级
  1. allowUnreachableCode
    检查不可达代码
    可选值：
    - true，忽略不可达代码
    - false，不可达代码将引起错误
  2. noEmitOnError
    - 有错误的情况下不进行编译
    - 默认值：false

//  tsconfig.json
{
    
    
    // tsconfig.json 是ts编译器的配置文件，ts编译器可以根据她的信息来对代码进行编译
    /* include 用来指定哪些ts文件需要被编译
          路径：**表示任意目录
                * 表示任意文件
     */
    "include": [
        "./src/**/*"
    ],
    /*
        exclude 表示不需要被编译的文件目录
     */
    // "exclude": [
    //     "./src/hello/**/*" // hello 下的文件都不会被编译
    // ],
    /* 
        complierOptions 编译器的选项
     */
    "compilerOptions": {
    
    
        "target": "ES6", // 用来指定 ts被编译为js的版本
        "module": "CommonJS", // 指定要使用的模块化的规范
        "lib": [], // 指定项目中要使用的库
        "outDir": "./dist", // 用来指定编译后文件所在的目录
        // "outFile": "", // 将代码合并为一个文件（所有的全局作用域的代码合并到一个文件中）
        "allowJs": false, // 是否对js文件进行编译，默认是false
        "checkJs": false, // 是否检查js代码是否符合语法规范
        "removeComments": false, // 是否移除注释，默认是false
        "noEmit": false, // 不生成编译后的文件
        "noEmitOnError": false, // 当有错误时不生成编译后的文件
        "sourceMap": false, 
        "strict": true, // 所有严格检查的总开关
        "alwaysStrict": true, // 用来设置编译后的文件是否使用严格模式，默认false
        "noImplicitAny": false, // 是否禁止隐式的any类型
        "noImplicitThis": false, // 是否不允许类型不明确的this
        "strictNullChecks": false, // 严格的空值检查
    },
}

使用webpack打包ts代码

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

初始化项目
- 进入项目根目录，执行命令 npm init -y
- 主要作用：创建package.json文件
下载构建工具
npm 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文件
  - html-webpack-plugin-------webpack中html插件，用来自动创建html文件
  - clean-webpack-plugin------webpack中的清除插件，每次构建都会先清除目录

根目录下创建webpack的配置文件webpack.config.js

// webpack的配置信息

// 1. 引入一个包
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打包时要使用的模块
    module: {
      
      
        // 指定要加载的规则
        rules: [
            {
      
      
                // 指定规则生效的文件
                test: /\.ts$/, // 匹配所有以ts结尾的文件
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node_modules/,
            },
        ]
    },

    // 配置webpack的插件
    plugins: [
        new HTMLWebpackPlugin({
      
      
            // title: "这是一个自定义的title",
            template: "./src/index.html", // 表示生成的网页根据这个模板生成的
        }), // 自动生成html文件
        new CleanWebpackPlugin(),
    ],

    // 用来设置引用模块
    resolve: {
      
      
        extensions: ['.ts', '.js'] // 表示 以这两个结尾的都可以模块来使用
    }
};

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

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

修改package.json添加如下配置

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

在这里插入图片描述

在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语法
修改webpack.config.js配置文件

    // 指定webpack打包时要使用的模块
    module: {
    
    
        // 指定要加载的规则
        rules: [
            {
    
    
                // 指定规则生效的文件
                test: /\.ts$/, // 匹配所有以ts结尾的文件
                // 要使用的loader
                use: [
                    // 配置babel
                    {
    
    
                        // 指定加载器
                        loader: 'babel-loader',
                        // 设置babel
                        options: {
    
    
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
    
    
                                        // 要兼容的目标
                                        targets: {
    
    
                                            // 浏览器兼容的版本
                                            "chrome": "105",
                                            "ie": "11",
                                        },
                                        // 指定codejs的版本
                                        "corejs": "3",
                                        // 使用core-js的方式 "usages"按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node_modules/,
            },
        ]
    },

如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。

webpack.config.js总代码

// webpack的配置信息

// 1. 引入一个包
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
        }
    },
    // 指定webpack打包时要使用的模块
    module: {
    
    
        // 指定要加载的规则
        rules: [
            {
    
    
                // 指定规则生效的文件
                test: /\.ts$/, // 匹配所有以ts结尾的文件
                // 要使用的loader
                use: [
                    // 配置babel
                    {
    
    
                        // 指定加载器
                        loader: 'babel-loader',
                        // 设置babel
                        options: {
    
    
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
    
    
                                        // 要兼容的目标
                                        targets: {
    
    
                                            // 浏览器兼容的版本
                                            "chrome": "105",
                                            "ie": "11",
                                        },
                                        // 指定codejs的版本
                                        "corejs": "3",
                                        // 使用core-js的方式 "usages"按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node_modules/,
            },
        ]
    },

    // 配置webpack的插件
    plugins: [
        new HTMLWebpackPlugin({
    
    
            // title: "这是一个自定义的title",
            template: "./src/index.html", // 表示生成的网页根据这个模板生成的
        }), // 自动生成html文件
        new CleanWebpackPlugin(),
    ],

    // 用来设置引用模块
    resolve: {
    
    
        extensions: ['.ts', '.js'] // 表示 以这两个结尾的都可以模块来使用
    }
};

typescript | 了解typescript + 搭建typescript开发环境 +类型声明 + 编译选项 + 使用webpack打包ts代码 +Babel

文章目录

TypeScript简介

TypeScript 开发环境搭建

基本类型

类型声明

自动类型判断

number

boolean

string

字面量

any（尽量不要用）

unknown

void

never

object（没啥用）

array

tuple

enum

类型断言

& 和类型的别名

编译选项

自动编译文件

自动编译整个项目

配置选项

使用webpack打包ts代码

Babel

webpack.config.js总代码

猜你喜欢

typescript | 了解typescript + 搭建typescript开发环境 +类型声明 + 编译选项 + 使用webpack打包ts代码 +Babel

文章目录

TypeScript简介

TypeScript 开发环境搭建

基本类型

类型声明

自动类型判断

number

boolean

string

字面量

any（尽量不要用）

unknown

void

never

object（没啥用）

array

tuple

enum

类型断言

& 和 类型的别名

编译选项

自动编译文件

自动编译整个项目

配置选项

使用webpack打包ts代码

Babel

webpack.config.js总代码

猜你喜欢

& 和类型的别名