Typescript搭建开发环境
为了方便后期使用,我们搭建一个基于Typescript的开发环境,后期的项目都可以基于此进行开发。
- 建立一个空的项目文件,使用npm init命令生成相应的json配置文件,(也可以使用npm init -y,使用默认配置)
12345
//注意事项:
1、在输入了npm init内容后,我们需要填写配置项,其中
entry point: ./src/index.ts
keywords:typescript,source_code,lison
license:MIT
- 创建项目文件目录
1234567891011
demo2
│
package
.json
// 配置文件
│
├─build
// webpack打包文件和配置
├─src
// 项目代码文件
│ ├─api
│ ├─assets
│ ├─config
│ ├─tools
│ └─utils
└─typings
// ts文件集
-
安装ts:npm install typescript tslint -g, 然后使用ts初始化项目: tsc --init 命令会生成json文件
- 添加webpack配置,首先安装:cnpm install webpack webpack-cli webpack-dev-server -D
- 最后编写相应的webpack.json.js
1234567891011121314151617181920212223242526272829303132333435363738
const HtmlWebpackPlugin = require(
'html-webpack-plugin'
)
const CleaWebpackPlugin = require(
'clean-webpack-plugin'
)
module.exports = {
entry:
"./src/index.ts"
,
// 入口点
output: {
filename:
"main.js"
,
// 编译后的输出文件, wepack自动引入main.js到index.html中
},
resolve: {
extensions: [
".js"
,
".ts"
,
".tsx"
],
// 自动加载文件后缀的文件
},
module: {
rules: {
test: /\.tsx?$/,
use:
"ts-loader"
,
// 将tsx的文件用ts-loader解析
exclude: /node_modules/,
// 忽略到nodemodules
},
},
// NODE_ENV在package.json中传入,在其中使用corss-env 传递环境变量,使用dev-server启动服务(需要安装cnpm install cross-env -D
devtool: process.env.NODE_ENV ===
"production"
?
false
:
"inline-source-map"
,
// 通过环境变量判断是否加载此选项
devServer:{
contentBase:
'./dist'
,
// 启动目录
stats:
'errors-only'
,
// 控制台只展示error信息
compress:
false
,
// 是否压缩
host:
'localhost'
,
port:8089
},
plugins:[
// 安装插件 cnpm install clean-webpack-plugin html-webpack-plugin -D
new
CleaWebpackPlugin ({
cleanOnceBeforeBuildPatterns:[
'./dist'
]
}),
new
HtmlWebpackPlugin({
template:
'./src/template/index.html'
})
]
};
- package.json文件配置项目启动文件
12345678910111213141516171819202122
{
"name"
:
"demo2"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"./src/index.ts"
,
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"start"
:
"cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js"
},
"keywords"
: [
"typescript"
,
"source_code"
,
"lison"
],
"author"
:
""
,
"license"
:
"MIT"
,
"devDependencies"
: {
"webpack"
:
"^4.43.0"
,
"webpack-cli"
:
"^3.3.11"
,
"webpack-dev-server"
:
"^3.0.0"
}
}
枚举类型
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 使用枚举类型可以为一组数值赋予友好的名字,如下的Red等均为键,默认的值从0开始 // 下面我们订初始值为1,依次累加 enum Color {Red=1, Green, Yellow} let c: Color = Color.Green console.log(c) // 2 // 如果中间的值改变那? enum Color2 {Red, Green, Yellow=12, Blue, Orange} console.log(Color2.Green, Color2.Orange) // 1 14 // 枚举还提供了一个方法可以通过值来获取它的键 let colorName : string = Color[2] console.log(colorName) // 'Green' |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!