TypeScript学习笔记(一)

TypeScript

一、TypeScript介绍

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

TypeScript学习笔记(一)_第1张图片

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指向不明问题给一个类型

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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"
  }
}

你可能感兴趣的:(typescript,javascript,学习)