TypeScript
TypeScript是JavaScript的超集，为JavaScript添加了类型。
安装
npm i typescript -g
安装后将会注册全局命令 tsc
tsc
由于浏览器是不支持 ts 的，真正部署的代码还是要编译成 js。tsc 就是做编译工作的。
练习
新建文件夹 ts-demo 并进入
mkdir ts-demo && cd ts-demo
新建文件 index.ts
touch index.ts
编辑 index.ts
const hello:String = 'hello world';
console.log(hello);
在命令中运行中运行：
tsc index.ts
就会把 index.ts 文件编译成 index.js，输出在同级目录(ts-demo/index.js)
var hello = 'hello world';
console.log(hello);
查看结果
node index.js
// out -> hello world
承上启下
运行 index.ts 经过了编译和运行两个步骤，有没有更好的方式呢？继续往下看如何让 ts 在 node 环境中直接运行。
ts-node
ts-node是一个Typescript执行引擎，也是一个Node.js的REPL
简单点理解，就是 ts + node。
REPL
REPL 是 Read-Eval-Print Loop 的缩写，是一个简单的交互式编程环境。
安装
npm i ts-node -g
练习
ts-demo 目录下运行
ts-node index.ts
// out -> hello world
承上启下
这样就让运行 ts 文件更简单了。对于浏览器环境还是要有编译的过程，通过之前的练习可以看到，index.js 会在同目录，源码和生产代码放一起很难使用，有没有办法让 ts 文件单独放到一个目录呢？继续往下看，tsconfig.json 配置 TypeScript。
tsconfig.json
tsconfig.json是TypeScript的配置文件。完整的配置选项可以参考文档
练习
修改一下 index.ts
- const hello:String = 'hello world';
+ export const hello:String = 'hello world';
console.log(hello);
ts-demo 目录下新建 tsconfig.json 文件
{
"compilerOptions": {
"outDir": "dist"
}
}
在命令中运行中运行：
tsc
可以看到编译后的文件会输出到 ts-demo/dist/index.js
"use strict";
exports.__esModule = true;
exports.hello = void 0;
exports.hello = 'hello world';
console.log(exports.hello);
默认输出为 commonjs，可以以通过配置文件改为 umd。
{
"compilerOptions": {
+ "module": "umd",
"outDir": "dist"
}
}
再次执行编译，输出文件 index.js
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports"], factory);
}
})(function (require, exports) {
"use strict";
exports.__esModule = true;
exports.hello = void 0;
exports.hello = 'hello world';
console.log(exports.hello);
});
承上启下
在前端工程化中 webpack 是常用的打包工具之一，继续往下看如何使用 webpack 打包 ts。
ts-loader
ts-loader是webpack的TypeScript加载器
可以理解成为 webpack 提供的翻译器。
练习
初始化项目
npm init -y
安装webpack 和 ts-loader， ts-loader 依赖 typescript 一并安装。
npm i webpack webpack-cli typescript ts-loader -D
移动 index.ts 到 src/index.ts
mkdir src && mv index.ts src/index.ts
之前编译产生的 index.js 可以先删除
rm index.js
现在目录是这样的
ts-demo
├── dist
│ └── index.js
├── package-lock.json
├── package.json
├── src
│ └── index.ts
└── tsconfig.json
新建配置文件 webpack.config.js
touch webpack.config.js
做个简单的配置
const path = require('path')
module.exports = {
entry: {
index: './src/index.ts' // 输入的文件路径
},
module:{
rules: [{
test: /\.ts$/, // 匹配 .ts 结尾的文件
use: 'ts-loader', // 使用 ts-loader
exclude: /node_modules/ // 排除掉node_modules
}]
},
output: {
filename: 'bundle.[name].js', // 输出的文件名
path: path.resolve(__dirname, 'dist') // 输出的文件目录
}
}
package.json 添加 build 脚本
"scripts": {
+ "build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
运行编译
npm run build
编译后的文件会输出到 bundle.index.js
(()=>{var o={607:(o,e,r)=>{var t,l,n;!function(s){if("object"==typeof o.exports){var p=s(r(875),e);void 0!==p&&(o.exports=p)}else l=[r,e],void 0===(n="function"==typeof(t=s)?t.apply(e,l):t)||(o.exports=n)}((function(o,e){"use strict";e.__esModule=!0,e.hello=void 0,e.hello="hello world",console.log(e.hello)}))},875:o=>{function e(o){var e=new Error("Cannot find module '"+o+"'");throw e.code="MODULE_NOT_FOUND",e}e.keys=()=>[],e.resolve=e,e.id=875,o.exports=e}},e={};function r(t){var l=e[t];if(void 0!==l)return l.exports;var n=e[t]={exports:{}};return o[t](n,n.exports,r),n.exports}r.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r(607)})();
运行看一下效果
node dist/index.js
// out -> hello world
结束
TypeSctrip 的简单环境搭建和配置就结束了。
