初始化项目以及安装依赖
npm init -y
安装好 typescript，就可以执行下面命令查看帮助信息
npm i typescript -g
tsc -h
创建配置文件，执行下面命令就会生成一个 tsconfig.json 文件
tsc --init
使用 tsc 编译一个 js 文件
let kaimo:string = "hello typescript"
tsc ./src/index.ts
var kaimo = "hello typescript";
也可以使用 https://www.typescriptlang.org/play 查看
配置构建工具 webpack 环境
安装依赖
npm i webpack@4.35.2 webpack-cli@3.3.5 webpack-dev-server@3.7.2 -D
npm i ts-loader@6.0.4 typescript@3.5.2 -D
npm i html-webpack-plugin@3.2.0 clean-webpack-plugin@3.0.0 webpack-merge@4.2.1 -D
配置相应的环境
基础配置：
// 公共环境配置
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: "./src/index.ts",
output: {
filename: "app.js"
},
resolve: {
extensions: [".js", ".ts", ".tsx"]
},
module: {
rules: [
{
test: /.tsx?$/i,
use: [
{
loader: "ts-loader"
}
],
exclude: /node_modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/tpl/index.html"
})
]
};
module.exports = config;
// 开发环境配置
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const config = {
devtool: "cheap-module-eval-source-map"
};
module.exports = config;
生产配置：
// 生产环境配置
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const CleanWebpackPlugin = require("clean-webpack-plugin");
const config = {
plugins: [new CleanWebpackPlugin()]
};
module.exports = config;
// webpack 文件入口
// 下面这行用于 vscode 中智能化自动提示 webpack 配置项
/** @type {import('webpack').Configuration} */
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.config");
const devConfig = require("./webpack.dev.config");
const proConfig = require("./webpack.pro.config");
const config = merge(baseConfig, process.NODE_ENV === "development" ? devConfig : proConfig);
module.exports = config;
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js"
},
启动服务并且打包测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TypeScript in Action</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
let kaimo:string = "hello typescript";
document.querySelectorAll(".app")[0].innerHTML = kaimo;
启动服务 npm run start，访问 http://localhost:8080/
原文地址:https://blog.csdn.net/kaimo313/article/details/134676978
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_44594.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
