开发typescript项目有一些现成的脚手架，比如：typescript-library-starter，它的配置齐全，更适合用在实际项目开发上。其实在学习阶段可以自己搭建一个简单的typescript运行环境，只用作学习typescript语法。

 

初始化项目

依次执行：

mkdir ts-learn-democd ts-learn-demonpm init -y

 

然后全局安装 typescript，便于在任意文件夹使用 tsc 命令：

// 安装失败的话请以管理员身份运行，此处是sudo命令是mac上管理员权限sudo npm install typescript -g

 

安装成功后进入项目根目录，使用 tsc 命令进行初始化：

tsc --init

此时项目根目录里多了一个 tsconfig.json 文件，它的配置信息参考：

 

在项目里安装 typescript，注意这一次不是全局安装，全局安装是为了tsc命令，这里是为了本地编译和开发

npm install typescript

 

配置TSLint（可选）

类似ESLint，统一代码风格，全局安装TSLint:

sudo npm install tslint -g

然后在项目中初始化：

tslint -i

此时项目目录中会多一个 tslint.json 文件，关于它的配置可自行百度，在学习阶段默认的配置即可。

 

配置webpack

使用webpack进来开发和打包，先安装一些必要的插件：

npm install webpack webpack-cli webpack-dev-server -Dnpm install html-webpack-plugin clean-webpack-plugin -Dnpm install ts-loader -D

 

在项目根目录创建 webpack.config.js 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin')const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {  entry: './src/index.ts',  output: {    filename: 'main.js'  },  resolve: {    extensions: ['.js', 'ts', 'tsx']  },  module: {    // 配置以.ts/.tsx结尾的文件都用ts-loader解析    rules: [      {        test: /\.tsx?$/,        use: 'ts-loader',        exclude: /node_modules/      }    ]  },  devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',  devServer: {    contentBase: './dist',    stats: 'errors-only',    compress: false,    host: 'localhost',    port: 8888  },  plugins: [    new CleanWebpackPlugin({      cleanOnceBeforeBuildPatterns: ['./dist']    }),    new HtmlWebpackPlugin({      template: './src/template/index.html'    })  ]}

 

上述webpack配置信息中可知，项目源码放在 src 目录下，入口文件是 ./src/index.ts 。接下来还要创建模板html文件，在 ./src/template目录下创建index.html模板：

 

目录结构如下：

 

 

开发和打包

webpack配置文件已经写好，接下来只要写好script命令就可以轻松开发了。在package.json文件中指定命令：

// start 是启动本地开发// build是打包"scripts": {    "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js",    "build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js"  },

注意到命令里有一个 cross-env，这个是指定当前环境变量的，需要安装一下：

npm install cross-env

 

好了，现在在index.ts随便写一些ts代码测试一下：

// ./src/index.tslet str: string = 'hello world'document.write(str)

 

本地启动服务执行：

npm start

打包执行：

npm run build

 

结尾

此typescript运行环境只是简单的做到可执行ts文件，还有很多不足之处，在学习typescript的同时，可以再慢慢改善。