亲自教你TypeScript 项目搭建过程

下面是详细讲解“亲自教你TypeScript 项目搭建过程”的完整攻略：

1. 安装TypeScript

首先，我们需要全局安装TypeScript。在终端中运行以下命令：

npm install typescript -g

2. 创建项目

接下来，我们来创建一个新的TypeScript项目。在命令行中输入如下命令：

mkdir my-typescript-project && cd my-typescript-project

3. 初始化npm

接着，我们需要初始化npm。在终端中输入以下命令：

npm init -y

这将创建一个新的package.json文件，并且将所有默认设置存储到其中。

4. 创建TypeScript配置文件

接下来，我们需要创建一个名为tsconfig.json的TypeScript配置文件，该文件用于指定编译选项。

在终端中运行以下命令创建配置文件：

touch tsconfig.json

然后，打开tsconfig.json文件并添加以下内容：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules"
  ]
}

5. 安装依赖项

这一步是安装我们项目的所需依赖项，包括typescript、ts-node和@types/node。请注意，ts-node是一个在Node.js中运行TypeScript代码的工具，@types/node是Node.js类型定义的集合。

在终端中运行以下命令：

npm install -D typescript ts-node @types/node

6. 创建代码文件

接下来，我们将创建一个简单的TypeScript文件，作为我们项目的启动文件。我们将其命名为index.ts。

在项目根目录下创建src目录，并在其中创建index.ts文件。在文件中添加以下代码：

console.log('Hello, TypeScript!');

7. 编译TypeScript代码

现在，我们已经准备好编译TypeScript代码了。在终端中输入以下命令：

tsc

这将编译src/index.ts并输出到指定的outDir目录中。我们可以在tsconfig.json文件中设置outDir选项。在本例中，我们将输出文件保存在dist目录中。

8. 运行代码

我们已经完成了TypeScript项目的搭建和编译工作。现在让我们来尝试运行代码。在终端中输入以下命令：

node dist/index.js

我们应该可以看到以下输出：

Hello, TypeScript!

到这里，我们TypeScript项目已经搭建完成。

示例1：创建Express应用

下面我们将用一个示例说明如何创建一个使用TypeScript的Express应用程序。

在终端中创建一个新的文件夹并进入该文件夹

mkdir express-app-ts && cd express-app-ts

初始化npm

npm init -y

安装依赖项

npm install -D typescript ts-node @types/node
npm install express @types/express

创建TypeScript配置文件tsconfig.json

touch tsconfig.json

将以下内容添加到tsconfig.json文件中：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules"
  ]
}

在项目根目录创建src目录，并在其中创建app.ts文件

import express from 'express';

const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Hello TypeScript Express!'));

app.listen(port, () => console.log(`Server started on port ${port}`));

编译TypeScript代码

tsc

运行代码

node dist/app.js

现在我们可以在浏览器中访问http://localhost:3000，应该可以看到sHello TypeScript Express!输出。

示例2：创建React应用

下面我们将用一个示例说明如何创建一个使用TypeScript的React应用程序。

在终端中创建一个新的文件夹并进入该文件夹

mkdir react-app-ts && cd react-app-ts

初始化npm

npm init -y

安装依赖项

npm install -D typescript ts-node @types/node webpack webpack-cli webpack-dev-server awesome-typescript-loader source-map-loader
npm install react react-dom @types/react @types/react-dom

创建TypeScript配置文件tsconfig.json

touch tsconfig.json

在tsconfig.json文件中添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "allowJs": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "strict": true
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

在项目根目录创建src目录，并在其中创建index.tsx文件：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, TypeScript React!</h1>;

ReactDOM.render(element, document.getElementById('root'));

创建public文件夹，在其中创建index.html文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>TypeScript React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

创建webpack.config.js文件：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.tsx',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader'
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: 'source-map-loader'
            }
        ]
    },
    devServer: {
        contentBase: './public',
        port: 8080
    }
};

编译TypeScript代码

webpack

运行代码

npm start

现在我们可以在浏览器中访问http://localhost:8080，应该可以看到Hello, TypeScript React!输出。

以上是亲自教你TypeScript 项目搭建过程的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：亲自教你TypeScript 项目搭建过程 - Python技术站