TypeScript学习笔记
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>Titletitle>
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 = ['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)
}
2.10、any
任意类型，上述类型均可，一般不建议使用