ts-node
Node 环境的 typescript 解释执行器。REPL（Read eval print loop）
需要安装 @types/node
npm i -g ts-node
# yarn global add ts-node
npm i @types/node
# yarn add @types/node用 ts-node 执行文件
ts-node some.ts配置文件： tsconfig.json
{
"compilerOptions": {
// 书写你的配置
}
}tsc （typescript compiler）
一个ts的编译器
npm i -g tsc
# yarn global add tsc可以指定编译某个ts文件
tsc hello.ts也可以通过 tsconfig.json 配置。
可以用 outDir 配置项配置 js 文件输出的位置
tsc 作为一个指令，可以用 --help 查看用法
可以用 module 指定生成模块的类型
和 webpack 一起用
初始化项目
mkdir ts-webpack
cd ts-webpack
npm init先安装依赖
npm install webpack ts-loader typescript webpack-cli --save-dev
# npm install -g yarn
# yarn add webpack ts-loader typescript webpack-cli
写一个用于测试的ts文件(src/index.ts)：
export class TreeNode<T> {
left : TreeNode<T>
right : TreeNode<T>
data : T
constructor(data : T) {
this.data = data
}
}
function log(x){
console.log(x)
}
const node = new TreeNode<number>(100)
log( node.data )写一个tsconfig.json文件：
{
"compilerOptions": {
}
}然后配置一个针对ts文件打包处理的webpack配置。
文件名：webpack.config.js
const path = require('path')
module.exports = {
entry: {
index: "./src/index.ts",
},
mode: "development",
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
output: {
filename: "bundle.[name].js",
path: path.resolve(__dirname, "dist"),
}
}为package.json增加指令：
"scripts": {
"start:dev" : "webpack",
}运行起来试一下效果：
npm run start:dev1
