前置條件：
安裝 nodejs
安裝typescript模組:
npm install -g typescript
首先，建立乙個目錄作為工作目錄，該目錄的結構如下：
+-- index.html
+-- build
| +-- webpack.config.js
+-- src
| +-- main.ts
目錄結構說明:
index.html檔案用來在瀏覽器執行js檔案
build目錄下的webpack.config.js檔案用來配置webpack
src目錄裡面的main.ts用來編寫typescript**
以上所有的目錄和檔案都先建立好
再使用npm初始化編譯環境
npm init -y #初始化package.json
npm install typescript #初始化本地typescript
tsc --init #初始化tsconfig.json
安裝tslint並初始化配置
typescript的風格比較的嚴謹，所以安裝tslint:
npm install tslint -g
tslint -i
安裝webpack和相關依賴
npm intall webpack webpack-cli webpack-dev-server -d
因為只是在本地搭建的乙個編譯環境，所以無需全域性安裝
在package.json設定啟動指令碼
"scripts":{
"serve": "cross-env node_env=development webpack-dev-server --mode=development --config build/webpack.config.js"
其他依賴安裝
npm install cross-env -d #識別生成環境or開發環境
npm install ts-loader -d #解析.ts檔案
npm install html-webpack-plugin -d #處理html檔案模組
配置檔案webpack.config.js
const htmlwebpackplugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.ts",
output: {
filename: "build.js"
resolve: {
extensions: [".tsx", ".ts", ".js"]
module: {
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: 8080
plugins: [
new htmlwebpackplugin({
template: "./index.html"
以上全部完成之後就可以在main.ts裡面編寫typescript**.
通過命令npm run serve啟動服務之後
隨著每次的改動，
通過瀏覽器檢視http://localhost:8080/ **是隨著改動的，無需手動重新整理瀏覽器。
ts 申明檔案
在專案開發過程中，我們可能回在ts中使用到一些js全域性，如jquery。以jquery舉例，假設js版本的jquery作為乙個全域性庫，而非使用import或require引入。那麼如何在ts中像js一樣直接使用 變數呢？ts的語法檢測不會允許我們使用乙個未經定義的變數，即便它已經同夥jquery...
typescript 打包自動生成宣告檔案
在使用typescript 時，會出現打包後生成編譯成js檔案，這導致從從typescript匯出的模組 函式等無法使用 這時，我們需要配置 tsconfig.json 檔案，在 typescript 官方文件中，編譯選項，在這裡找到與生成相應的 d.ts 檔案和 宣告檔案 相關的選項，其中包括 配...
typescript ts 宣告檔案
在typescript中存在兩種檔案字尾名，一種是.ts,另一種是.d.ts結尾的檔案，我們主要的 都是寫在以.ts檔案結尾的檔案中。而.d.ts結尾的檔案就是宣告檔案。我們都知道，ts 是 js 的超集，ts 是乙個靜態的型別檢查系統，ts 比 js 多的就是型別檢查，而實現型別檢查的關鍵就是 t...