持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第10天,点击查看活动详情
ts运行环境
tsc
全局安装ts
npm i typescript -g
查看安装版本
tsc -v
编译TS文件
tsc 文件路径
我们创建一个ts文件
main.ts
const message: string = "scc"
对他进行编译
会发现出现了一个main.js文件
webpack搭建ts运行环境
全局安装tslib和@types/node,安装webpack webpack-cli,安装ts-loader
npm i tslib @types/node -g
npm i webpack webpack-cli
npm i ts-loader
tslib和@types/node时ts-loader依赖的包,ts-loader解析ts文件
const path = require("path")
module.exports = {
mode: "development",
entry: "./src/main.ts",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
rules: [{
test: /.ts$/,
loader: "ts-loader"
}],
}
}
配置入口entry,出口output,模块module的rules的loader
在package.json配置
"scripts": {
"build": "webpack"
},
运行npm run build
dist文件打包完成
搭建热更新
安装webpack-dev-serve
安装html-webpack-plugin
npm i webpack-dev-serve
npm i html-webpack-plugin
第一个webpack热更新模块,第二个是静态资源的模板
只需要配置一下plugins
//定义HtmlWebpackPlugin
const HtmlWebpackPlugin = require("html-webpack-plugin")
//在webpack.config.js中配置
plugins: [
new HtmlWebpackPlugin({
template: "./index.html"
})
]
在package.json中配置
"scripts": {
"build": "webpack",
"serve": "webpack serve"
},
此时运行npm run serve
开启一个服务器
热更新启动成功
ts数据类型定义
字符串类型
const message: string = "scc"
数值类型
const num: number = 123
布尔类型
const flag: boolean = true
数组类型
const arr: string[] = []
const arr: Array<string> = []
对象类型
const obj = {
name:string,
age:number
}
元组类型
const person:[string,number,boolean] = ["scc",18,true]
元组和数组差不多,但是数组存储的是同种类型的数据,而元组可以存储不同类型的数据
any类型
any类型数据可以给他赋值任意类型的数据且不报错,并且对他的任何操作都不报错
unknown类型
1.unknown类型的数据可以被赋值为任意类型数据
unknown本身就是一个未知的数据类型,可以接收任意的数据类型
2.unknown类型的数据,只能赋值给any和unknown类型的数据
因为我们不知道unknown是什么类型的数据,所以无法把一个未知类型的值,赋值给已知类型的变量
3.执行unknown类型
是无法被执行的,而any类型是可以的
void类型
当函数没有返回值时,他的返回值就是void类型
null和undefinder
null类型的数据只能赋值为null,undefinder同样也是
never类型
never类型表示永远不存在的值的类型,当函数抛出错误,或者无限循环时,返回值就是never类型
never类型可以用于检测代码条件是否被穷举,大家感兴趣可以去知乎看看尤大的回答
结束语
分享到此结束,大家要加油,我要努力