TypeScript学习笔记（一）

TypeScript

一、TypeScript介绍

1.1 TypeScript

1. TypeScript是JavaScript的超集
2. js有的ts都有，可以在任何支持JavaScript的平台中执行
3. 拓展了JavaScript在js上添加类型支持（js里变量是动态类型，js函数传参也没有类型限制，ts将动态类型变量变成了静态类型变量。）
4. ts不能被js解析器直接执行(需要先编译，是微软开发的开源编程语言)

1.2 TypeScript增加

• 类型

• 支持ES的新特性

• 添加了ES不具备的新特性

• 丰富的配置选项，可以选择编译ES几的js（兼容）

二、TypeScript开发环境搭建

1. 下载Node.js

2. 安装Node.js

3. 使用npm全局安装typescript

   • npm i -g typescript
     

4. 创建一个ts文件

5. 使用tsc对ts文件进行编译

   • 进入命令行

   • 进入ts文件进行编译

   • tsc xxx.ts 
     

三、TypeScript语法

• 类型声明

  • 可以指定TS中（变量/参数/形参）的类型

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

  • 语法：（类型用小写）

    • let 变量: 类型;
      let 变量: 类型 = 值;
      //函数括号后的类型是函数返回值的类型
      function fn(参数: 类型， 参数: 类型): 类型 {
      ...
      }
      

• 自动类型判断

  • TS拥有自动的类型判断机制
  • 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
  • 所有如果变量的声明和赋值同时进行，可以省略类型声明

• 类型

类型	例子	描述
number	1,-33,2.5	任意数字
string	‘hi’,“hi”,hi	任意字符串
boolean	true、false	布尔值
字面量	其本身	限制变量的值就是改字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值(undefined)	没有值（或undefined）
nerver	没有值	不能是任何值
object	{name:‘对象’}	任意的js对象
array	[1,2,3]	任意的js数组
tuple	[4,5]	元组，TS新增类型，固定长度数组
enum	enum{A,B}	枚举，TS新增类型

字面量（相当于固定值，常量）

let a: 10;
let b: 'male' | 'female';
b = 'male';
b = 'female';

|联合类型

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

&与表示同时满足

let e: { name: string } & { age: number };
e = {name: '1',age: 1}

any表示任意类型，设置变量类型为any后相当于关闭TS类型检测（不建议使用该类型）

TS默认设置声明变量的类型为隐式any(会影响其他变量)

let d: any;
d = 10;
d = 'hello';
d = true;

如果不知道变量类型（使用unknown）

(实际上就是一个类型安全的any，不能直接赋值给其他变量)

let e:unknown;
e = 10;
e = true;

解决方法

①判断类型

let s: string = "hello";
if(typeof e === "string") {
	s = e
}

②类型断言

语法：

第一：as 类型

第二：<类型>

s = e as string;
s = <string>e

void和nerver一般用于函数的返回值类型

void用来表示空，表示没有返回值的函数

function fn():void {
	return 
}

nerver表示永远不会返回结果，一般用于测试报错

function onde():never {
    throw new Error('报错了!');
}

object

{}用来指定对象中可以包含哪些属性

默认有且仅有括号中的属性

语法：{属性名: 属性值,属性名?: 属性值}

问号表示属性可选

[属性名propName:string] : any 表示任意类型的属性

let m: object;
m = {};
m = function () {}

let x: { name: string， age?: number };
x = { name: 'mx' }

let x: { name: string, [xxx: string]: any };
x = { name: 'mx', age: 10, gender: '男' }

限制函数结构（d是一个函数，有两个参数类型number，且返回值类型number）

设置函数结构的类型声明

语法: （形参：类型，形参：类型…） => 返回值

let n: (a:number,b:number) => number;
n = function (n1:number, n2:number): number {
    return n1 + n2;
}

数组

声明方式：

①类型[]

②Array<类型>

let a: string[];
a = ['a','b']
let b: Array;

tuple：元组，长度固定的数组

[类型，类型，…]

let c: [string,string];
c = ['hello','second'];

enum：枚举（列出可能的情况）

语法：enum 自定义枚举类名 {

​ 内容

}

使用：给一个变量定义类型为枚举类名

enum Gender {
    Male = 0,
    Female = 1
}

// let d: { name: string, gender: number };
// let d: { name: string, gender: 0 | 1 };
let d: { name: string, gender: Gender };
d = {
    name: 'mx',
    // gender: 0,
    gender: Gender.Male
}
console.log(d.gender === Gender.Male);

类型的别名

type myTypeStr = string;
let m: myTypeStr;
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
let l: myType;
k = 4;
l = 3;

四、TS编译选项（配置）

• 自动编译文件

  • 自动监视文件变化进行编译（开始监视模式）

    • #只能监视一个文件(不常用)
      tsc 文件名 -w
      

  • 配置编译信息

    • 创建tsconfig.json配置文件

    • 创建完之后直接执行以下命令，就会同时把所有文件编译，默认编译所有

    • tsc -w
      

  • 配置选项

    • 主要是include

    • {
          //"include"用来指定哪些ts文件需要被编译，数组中写路径,一个*表示任意文件，**表示任意目录
          "include": [
              "./src/**/*"
          ],
          //"exclude"指定不需要被编译的文件(一般用不上)
          // 默认值:["node_modules","bower_components","jspm_packages"]
          "exclude": [
              "./src/model/**/*"
          ],
          // 继承配置文件(自己设置)当前文件会自动包含configs目录下的base.json中的配置信息
          "extends": "./configs/base",
          // 指定被编译文件的列表，只有需要编译的文件少才会用到
          "files": [
              "basis.ts",
              "app.ts",
              "binder.ts"
          ]
      }
      

    • compilerOptions编译器选项(推荐es6)（检测配置项有哪些就随便填一个运行看报错）

    • {
          //"include"用来指定哪些ts文件需要被编译，数组中写路径,一个*表示任意文件，**表示任意目录
          "include": [
              "./src/**/*"
          ],
          // "compilerOptions"编译器选项(包含多个子选项，用来完成对编译的配置)
          "compilerOptions": {
              // target设置ts代码编译的目标版本,可选值：ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES8/ES2017、ES2018、ES2019、ES2020、 ESNext
              "target": "ES6",
              //"module"指定使用模块化的规范,可选值：none、commonjs、amd、system、umd、es6、es2015、es2020、esnext
              "module": "es2015",
              //"lib"用来指定项目中要使用的库,为空就是告诉没有使用库，就没有代码提示(一般用不上)
              "lib": [
                  "DOM"
              ],
              //"outDir"指定编译后文件存放目录
              "outDir": "./dist",
              // 将代码合并为一个文件(若是模块化合并module得配置amd)
              "outFile": "./dist/basis.js",
              // 是否对js文件进行编译，默认false
              "allowJs": false,
              // 是否检查js代码是否符合语法规范,默认false
              "checkJs": false,
              // 是否移除注释
              "removeComments":true,
              // 不生成编译后的文件，默认值false（不想编辑只想用ts检查）
              "noEmit": false,
              // 当有错误时不生成编译文件,默认false
              "noEmitOnError": false,
              // 用来设置编译后的文件是否使用严格模式，默认false
               "alwaysStrict": false,
              // 不允许出现隐式any,默认false 
              "noImplicitAny": false,
              // 不允许不明确类型的this，默认false（解决方法看下面）
              "noImplicitThis": false,
              // 严格检查空值
              "strictNullChecks": false
          }
      }
      

    • js中开启严格模式，就在js文件中加"use strict"，当有export模块化默认进入严格模式

    • 解决this指向不明问题给一个类型

  

五、使用webpack打包ts代码

• 初始化

npm init -y
#生成package.json

• 安装

#基础安装四个
cnpm i -D webapck webapck-cli typescript ts-loader

• 新建webpack.config.js配置文件

//引入一个包
const path = require('path');//帮我们拼接路径

// webpack所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",

    //指定打包文件所在目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname,'dist'),
        // 打包后文件的名字
        filename: "bundle.js"
    },

    // 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,  //用正则表达式去匹配以ts结尾的文件
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    }
}

• 新建tsconfig.json的ts配置文件

{
    "compilerOptions": {
        "module": "ES2015",//es6的模块化
        "target": "ES2015",//编译es6
        "strict": true //严格模式
    }
}

• 配置打包package.json

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

• 执行打包

npm run build

升级：

1、安装插件

npm i -D html-webpack-plugin

2、在webpack.config.js中引入

// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    output: {
     。。。   
    },
    module: {。。。
    },
    // 配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(),
    ]
    /* 配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(
            {
                // title: '这是一个自定义的title'
                template: "./src/index.html" //网页模板
            }
        ),
    ]
    */
}

3、打包(自动生成引入js的html)

npm run build

4、安装webpack的开发服务器插件

npm i -D webpack-dev-server

5、在package.json配置(实时更新)

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"//使用npm start启动
  },

补充问题：

①每次编译先清空之前的文件的插件

npm i -D clean-webpack-plugin

webpack.config.js配置

// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // 配置webpack插件
    plugins: [
        new CleanWebpackPlugin()
    ]
}

②告诉webpack哪些文件可以用来模块设置

module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",

    //指定打包文件所在目录
    output: {
     
    },

    // 指定webpack打包时要使用的模块
    module: {
       
    },

    // 配置webpack插件
    plugins: [
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', 'js']
    }

}

③兼容性问题

引入一个工具修改不同版本兼容浏览器babel（按需加载）

npm i -D @babel/core @babel/preset-env babel-loader core-js

装完之后修改webpack.config.js配置文件

module.exports = {
    // 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,  //用正则表达式去匹配以ts结尾的文件
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // 设置babel
                        options: {
                            // 设置预定义环境

                            presets: [
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的浏览器
                                        targets: {
                                            // 兼容版本设置
                                            "chrome": "88"
                                        },
                                        // 下载的corejs版本
                                        "corejs": "3",
                                        // 使用corejs的方式"usage"表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]

                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

}

兼容老版本配置webpack.config.js

//指定打包文件所在目录
    output: {
        // 配置打包环境:告诉webpack不要使用箭头函数
        environment: {
            arrowFunction: false
        }
    },

webpack.config.js

//引入一个包
const path = require('path');//帮我们拼接路径
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack所有的配置信息都应该写在module.exports中
module.exports = {
    optimization: {
        minimize:false //关闭代码压缩（可选）
    },
    // 指定入口文件
    entry: "./src/index.ts",

    //指定打包文件所在目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname,'dist'),
        // 打包后文件的名字
        filename: "bundle.js",

        // 配置打包环境:告诉webpack
        environment: {
            arrowFunction: false
        }
    },

    // 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,  //用正则表达式去匹配以ts结尾的文件
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // 设置babel
                        options: {
                            // 设置预定义环境

                            presets: [
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的浏览器
                                        targets: {
                                            // 兼容版本设置
                                            "chrome": "88"
                                        },
                                        // 下载的corejs版本
                                        "corejs": "3",
                                        // 使用corejs的方式"usage"表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]

                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

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

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', 'js']
    }

}

package.json

{
  "name": "ts-demo-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.25.0",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.8.2",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.1"
  }
}