TypeScript开发环境搭建

发表时间： | 阅读次数:

TypeScript的几种开发环境介绍

搭建TypeScript

1.安装TypeScript

1
cnpm install -g typescript

2.创建一个项目

1
2
3
#创建一个typescript_demo的项目以及主要的文件夹
mkdir -p typescript_demo/src/{css,image}
#使用VScode打开

3.创建package.json文件

1
npm init

4.创建tsconfig.json文件

1
tsc --init

5.在src下创建index.js文件

1
2
3
4
5
6
7
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

6.在根目录下创建index.html文件

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <script src="./src/index.js"></script>
</body>
</html>

7.目录结构图

1
2
3
4
5
6
7
8
9
ts_vscode/
    |-- src/
    |    |--css/
    |    |--image/
    |    |--index.ts
    |
    |--index.html
    |--package.json
    |--tsconfig.json

8.安装live-server，来帮助我们启动一个服务器环境

1
npm install -g live-server

9.修改package.json中的scripts

1
2
3
"scripts": {
    "test": "tsc -w & live-server"
}

10.在终端中输入npm t 可以启动项目了

1
npm t

搭建WebPack+TypeScript

1.安装TypeScript

1
cnpm i -g typescript

2.安装WebPack

1
2
3
$ cnpm i webpack --save-dev
#如果需要webpack开发工具
cnpm install webpack-dev-server --save-dev

3.安装ts-loader

1
cnpm i ts-loader --save-dev

4.创建package.json文件

1
npm init

5.创建tsconfig.json文件

1
tsc --init

6.目录结构图

1
2
3
4
5
6
7
8
9
10
11
typescript_demo/
    |--src/
    |    |--css/
    |    |--image/
    |    |--index.ts
    |--dist/
    |    |--bundle.js
    |    |--index.html 
    |--package.json
    |--tsconfig.json
    |--webpack.config.js

7.配置tsconfig.json

1
2
3
4
5
6
7
8
9
10
{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

8.配置项目目录中的webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const path = require('path');
module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

9.配置package.json

1
2
3
4
"scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  },

10.配置editorconfig文件

1
2
3
4
5
6
7
8
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

11.html内容

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>
<body>
  <script src="./bundle.js"></script>
</body>
</html>

11.输入npm start 启动项目

1
npm start

TypeScript+React

1.安装React依赖

1
npm install -g create-react-app

2.创建一个名为「react_typescript」的项目

1
create-react-app react_typescript --scripts-version=react-scripts-ts

3.执行npm start

1
npm start