開發typescript項目有一些現成的腳手架，比如：typescript-library-starter，它的配置齊全，更適合用在實際項目開發上。其實在學習階段可以自己搭建一個簡單的typescript運行環境，只用作學習typescript語法。
初始化項目
依次執行：
mkdir ts-learn-demo cd ts-learn-demo npm init -y
然后全局安裝 typescript，便於在任意文件夾使用 tsc 命令：
// 安裝失敗的話請以管理員身份運行，此處是sudo命令是mac上管理員權限 sudo npm install typescript -g
安裝成功后進入項目根目錄，使用 tsc 命令進行初始化：
tsc --init
此時項目根目錄里多了一個 tsconfig.json 文件，它的配置信息參考：https://www.tslang.cn/docs/handbook/tsconfig-json.html
在項目里安裝 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 -D npm install html-webpack-plugin clean-webpack-plugin -D npm 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模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>TS Demo</title> </head> <body></body> </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.ts let str: string = 'hello world' document.write(str)
本地啟動服務執行：
npm start
打包執行：
npm run build
結尾
此typescript運行環境只是簡單的做到可執行ts文件，還有很多不足之處，在學習typescript的同時，可以再慢慢改善。