正文

新手必看：从零开始，轻松搭建高效的TypeScript项目指南

/0 浏览量
0718

了解TypeScript

首先，让我们来了解一下TypeScript。TypeScript是一种由微软开发的编程语言，它是JavaScript的一个超集，增加了静态类型检查、接口、类等特性。这些特性使得TypeScript在开发大型应用时，代码更加健壮、易于维护。

环境搭建

安装Node.js

在开始之前，确保你的电脑上安装了Node.js。你可以从Node.js官网下载并安装。安装完成后，打开命令行工具，输入node -v和npm -v，检查是否成功安装。

安装TypeScript

使用npm全局安装TypeScript：

npm install -g typescript

安装完成后，输入tsc -v查看TypeScript版本。

创建项目

创建目录结构

创建一个项目目录，例如my-typescript-project。在项目中创建以下目录结构：

my-typescript-project/
├── src/
│   ├── index.ts
│   └── utils/
│       └── helpers.ts
├── tsconfig.json
└── package.json

配置tsconfig.json

在my-typescript-project目录下创建tsconfig.json文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

这个配置表示将源文件编译成ES5模块，并输出到dist目录。

配置package.json

在package.json文件中添加以下脚本：

{
  "scripts": {
    "build": "tsc"
  }
}

这表示通过运行npm run build命令来编译TypeScript代码。

编写代码

编写index.ts

在src/index.ts文件中编写以下代码：

import { add } from './utils/helpers';

console.log(add(1, 2));

编写utils/helpers.ts

在src/utils/helpers.ts文件中编写以下代码：

export function add(a: number, b: number): number {
  return a + b;
}

编译和运行

在命令行中，进入my-typescript-project目录，运行以下命令编译TypeScript代码：

npm run build

编译完成后，会在dist目录下生成index.js文件。运行以下命令运行生成的JavaScript代码：

node dist/index.js

输出结果为：

3

恭喜你，你已经成功搭建了一个TypeScript项目！接下来，你可以根据自己的需求，添加更多文件和功能，享受TypeScript带来的便利。

-- 展开阅读全文 --