TypeScript学习笔记（一）

Mr.MUXIAO

已于 2022-09-04 16:25:52 修改

阅读量541

点赞数

文章标签： typescript javascript 学习

于 2022-09-04 16:20:19 首次发布

本文链接：https://blog.csdn.net/MX_muxiao/article/details/126690873

版权

TypeScript

一、TypeScript介绍

1.1 TypeScript

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9eA4k1se-1662279296527)(.\images\image-20220902160756099.png)]$

1.2 TypeScript增加

类型
支持ES的新特性
添加了ES不具备的新特性
丰富的配置选项，可以选择编译ES几的js（兼容）

二、TypeScript开发环境搭建

下载Node.js
安装Node.js
使用npm全局安装typescript
- ```
npm i -g typescript
```
创建一个ts文件
使用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<number>;
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指向不明问题给一个类型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kIXftC7V-1662279296528)(C:\Users\ASUS\Dbeifen\beifen\wangyeban\qqwenjian\TS\images\image-20220903152225133.png)]$

五、使用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"
  }
}

Mr.MUXIAO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
TypeScript学习笔记（一）

指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错。限制函数结构（d是一个函数，有两个参数类型number，且返回值类型number）[属性名propName:string] : any 表示任意类型的属性。创建完之后直接执行以下命令，就会同时把所有文件编译，默认编译所有。(实际上就是一个类型安全的any，不能直接赋值给其他变量)TS默认设置声明变量的类型为隐式any(会影响其他变量)语法: （形参：类型，形参：类型…可以指定TS中（变量/参数/形参）的类型。
复制链接

扫一扫