初识 TypeScript
TypeScript 的介绍
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持。
TypeScript 的特点
- 始于JavaScript，归于JavaScript
TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。
- 强大的类型系统
- 先进的 JavaScript
安装
命令行运行如下命令，全局安装 TypeScript：
npm install -g typescript
安装完成后，在控制台运行如下命令，检查安装是否成功(3.x)：
tsc -V
TypeScript的编译
手动编译代码
我们创建一个基本的Ts项目
index.ts中
(function(){
function sayHi(str:string){
return "你好啊" + str
}
let text = "小甜甜1"
console.log(sayHi(text))
})()
html文件中：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
由于浏览器不认识ts文件，因此，我们需要将index.ts编译成index.js才行。
在命令行终端，运行 TypeScript 编译器：
tsc index.ts
输出结果为一个 index.js 文件，此时浏览器就可以正确识别这个文件了。
编译后的名称可以通过tsconfig.json更改
vscode自动编译
在vscode中，我们可以实现自动编译代码。首先，在项目中通过命令行创建tsconfig.json配置文件
tsc --init
然后在tsconfig.json修改配置
{
"compilerOptions": {
"outDir": "./js", //配置编译后的代码输出目录
"strict": false, //关闭ts检查的严格模式
},
}
最后启动编译器的监视任务
依次点击编译器【终端】 -> 【运行任务】
搜索tsconfig.json，选择 监视tsconfig.json 即可!
打包工具自动编译
webapck、vite、rollup等打包工具通过配置都能够识别ts文件，帮我们打包生成js文件。因此，在这些工具中，我们不需要使用typescript自己的编译工具 tsc xxx.ts 了
使用webpack打包Ts程序
我们创建一个基础的项目，下载相关依赖
//安装ts
npm install -D typescript
//安装webpack及其打包工具
npm i -D webpack@4.41.5 webpack-cli@3.3.10
//安装热启动服务
npm i -D webpack-dev-server@3.10.2
//安装html模板工具及清除上一次打包好的js文件的工具
npm i -D html-webpack-plugin@4.5.0 clean-webpack-plugin@3.0.0
//ts打包工具
npm i -D ts-loader@8.0.11
// 跨平台的环境变量兼容插件
npm i -D cross-env@7.0.2
注：不指定版本，可能会导致项目运行出错！！！！
cross-env介绍：https://www.yuque.com/persagy/mkk933/qycy0e
生成tsconfig.json配置文件
tsc --init
webpack.config.js中配置如下
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.ts',
mode: 'development',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index.js'
},
stats: 'none',
resolve: {
extensions: ['.ts', '.js'],
alias: {
'@': path.resolve(__dirname, './src')
}
},
module: {
rules: [
{
test: /.ts$/,
use: 'ts-loader'
}
]
},
devServer: {
port: 1988,
proxy: {
}
},
plugins: [
new htmlWebpackPlugin({
template: './public/index.html'
})
]
}
配置打包命令
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
打包
npm run dev
