04 | 编写你的第一个TypeScript程序

初始化package.json
npm init -y
全局安装TypeScript
npm i typescript -g
初始化TypeScript
tsc --init
新建一个src目录并创建一个index.ts文件并写入以下内容
let hello : string = 'Hello TypeScript'
编译该文件
tsc ./src/index.ts
执行后生成一个index.js文件并生成以下内容
var hello = 'Hello TypeScript';
安装打包工具
npm i webpack webpack-cli webpack-dev-server -D
创建build目录，用来存放所有的配置文件，并创建4个配置文件
webpack.config.js
webpack.base.config.js
webpack.dev.config.js
webpack.pro.config.js

其中webpack.base.config.js内容

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.ts', // 指定入口文件
	output: {
		filename: 'app.js' // 输出的文件名为app.js
	},
	resolve: {
		extensions: ['.js', '.ts', 'tsx'] // 输出的目录是默认的，输出的扩展名，js,ts,tsx
	},
	module: {
		rules: [
			{
				test: /\.tsx?$/i, // 正则以ts或者tsx为结尾的文件
				use: [{
					loader: 'ts-loader', // 使用ts-loader, npm i ts-loader typescript -D
				}],
				exclude: /node_modules/ // 排除node_modules文件
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({ // 插件,通过一个模板帮助我们生成网站的一个首页并把输出文件自动嵌入文件中
			template: "./src/tpl/index.html" // npm i html-webpack-plugin -D
		})
	]
}

需要安装以下依赖

1 2	npm i ts-loader typescript -D npm i html-webpack-plugin -D

在src目录下新建/tpl/index.html文件并写入以下内容

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>TypeScript in Action</title>
</head>
<body>
<div class="app"></div>
</body>
</html>

其中webpack.dev.config.js内容

1
2
3

module.exports = {
	devtool: 'cheap-module-eval-source-map'
}

其中webpack.pro.config.js内容

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	plugins: [
		new CleanWebpackPlugin // 每次成功构建后清空目录
	]
}

需要安装以下依赖
1
npm i clean-webpack-plugin -D

其中webpack.config.js内容

const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.config');
const devConfig = require('./webpack.dev.config');
const proConfig = require('./webpack.pro.config');

let config = process.NODE_EVN === 'development' ? devConfig : proConfig;

module.exports = merge(baseConfig, config); // 使这些文件合并 npm i webpack-merge -D

需要安装以下依赖
1
npm i webpack-merge -D

修改npm的脚本，打开package.json文件并修改以下内容

{
  "name": "ts-in-action",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.ts", // 修改这个
  "scripts": {
    "start": "webpack serve --mode=development --config ./build/webpack.config.js", // 增加这个
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.1",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
}

运行npm start

修改index.ts文件并输入以下内容

1 2	let hello : String = 'Hello TypeScript' document.querySelectorAll('.app')[0].innerHTML = 'hello';

可以看到页面输入内容改为了hello

编写package.json

{
  "name": "ts-in-action",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.ts",
  "scripts": {
    "start": "webpack serve --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js", // 新增这个
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.1",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
}

运行npm run build，可以看到目录下生成了dist文件夹，这就打包好了