TypeScript学习笔记

1、运行环境

1.1、初始化

npm init -y
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader  html-webpack-plugin

1.2、webpack.config.js

const path = require('path')
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    // 指定文件入口
    entry: path.resolve(__dirname, './src/index.ts'),
    // 指定打包文件目录
    output: {
        // 指定打包文件目录
        path: path.resolve(__dirname, './dist'),
        // 指定打包文件名称
        filename: 'bundle.js',
    },
    // 开启source-map，方便调试
    devtool: "inline-source-map",
    // require时可以省略对应的后缀名，如有同名文件，会依次匹配
    resolve: {
        extensions: [".ts", ".js"]
    },
    // 指定打包时要使用得模块
    module: {
        // 指定打包规则
        rules: [
            {
                // 目标文件
                test: /\.ts$/,
                //要使用的loader
                use: {
                    loader: "ts-loader"
                },
                //要排除的文件夹
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        // 自定义html打包插件
        new htmlWebpackPlugin({
            // 模板文件
            template: "./src/index.html",
            // 输出文件
            filename: "index.html",
        })
    ],
    // 本地开发服务器配置
    devServer: {
        // 文件路径
        static: './dist',
        // 第一次构建是否自动用浏览器打开网页
        open: true,
        // 端口
        port: 9000
    },
    // 模式development|production
    mode: 'development',
    // 指定Webpack构建的环境为web
    target: "web"
}

1.3、tsconfig.json

{
  // 编译选项
  "compilerOptions": {
    // 目标语言的版本
    "target": "ES6",
    // 生成代码的模板标准
    "module": "ES6",
    // 开启所有严格的类型检查
    "strict": true
  }
}

1.4、index.ts

alert("hello world in typescript!")

1.5、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World!
<script type="text/javascript" src="../dist/bundle.js" charset="utf-8"></script>
</body>
</html>

1.6、package.json

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.3",
    "ts-loader": "^9.4.4",
    "typescript": "^5.1.6",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

1.7、测试

在这里插入图片描述

2、基础类型

ts类型是在开发的时候检测，编译后不存在类型

ts具有类型推导能力，只有在无法推断或需明确指定才需显式声明类型

2.1、number

可以用来表示整数和分数

// 数字类型
let age: number = 22;
console.log("数字类型", age);

2.2、string

''和""可以表示常规字符串

``可以表示插值字符串

// 字符串类型
// @ts-ignore
let name: string = "xumeng03";
console.log("字符串类型", name);
let introduce: string = `my name is ${name}, my age is ${age}`;
console.log("字符串类型", introduce);

2.3、boolean

值为true/false

// 布尔类型
let isStudent: boolean = false
console.log("布尔类型", "是否学生", isStudent);

2.4、数组

// 数组类型
let hobby: string[] = ['book', 'code']
// let hobby: Array<string> = ['book', 'code']
console.log("数组类型", hobby);
let code: (string | number)[] = [1, 'java']
console.log("数组类型", code);

2.5、元组

// 元组类型
let userinfo: [string, number, boolean] = ['zhangsan', 23, false]
console.log("元组类型", userinfo);

2.6、枚举

// 枚举，推荐使用常量枚举，不会额外生成对象
enum ROLE {
    Student,
    Teacher,
    ADMIN
}
console.log("枚举类型", ROLE.ADMIN, ROLE[0]);
const enum ROLE1 {
    Student,
    Teacher,
    ADMIN
}
console.log("枚举类型", ROLE1.ADMIN);

2.7、null、undefined

null表示对象值缺失，undefined表示初始化变量为一个未定义的值

// null类型、undefined类型
let a: null = null
console.log("null类型", a);
let b: undefined = undefined
console.log("undefined类型", b);

2.8、void

用于函数的返回值

// void类型
function hello(): void {
    alert("hello world");
}
hello()

2.9、never

是所有类型（包括 null 和 undefined）的子类型，表示从不会出现的值/无终点

// never类型
function check(param: never) {
}
// 如函数逻辑不完整，则check(param)会报错类型错误
function helloNever(param: string | number | boolean) {
    if (typeof param === 'string') {
        return "string"
    } else if (typeof param === 'number') {
        return "number"
    } else if (typeof param === 'boolean') {
        return "number"
    }
    check(param)
}