TypeScript 教程(一)：安装和tsc编译

目录

• • • 前言
    • 一、TypeScript 简介
    • • 1. 什么是 TypeScript？
      • 2. TypeScript 的历史和发展
      • 3. 为什么要使用 TypeScript？
    • 二、安装 Node.js 和 npm
    • • 1. 下载 Node.js
      • 2. 验证安装
    • 三、安装 TypeScript
    • 四、初始化 TypeScript 项目
    • 五、tsconfig.json 配置详解
    • • 详细解释
    • 六、编写第一个 TypeScript 文件
    • 七、编译 TypeScript 文件
    • 八、运行编译后的 JavaScript 文件
    • 结语

前言

TypeScript 是 JavaScript 的超集，它在 JavaScript 的基础上增加了静态类型，提供了更好的开发体验和工具支持。本篇文章将介绍 TypeScript 的基本概念、优势，以及如何安装和配置 TypeScript 环境。
系列文章列表

• TypeScript 教程(一)：安装和tsc编译
• TypeScript 教程(二)：类型与类型注解
• TypeScript 教程(三)：函数与对象类型
• TypeScript 教程(四)：高级类型与类型操作
• TypeScript 教程(五)：接口与类
• TypeScript 教程(六)：泛型编程
• TypeScript 教程(七)：模块与命名空间
• TypeScript 教程(八)：装饰器与高级类型操控
• TypeScript 教程(九)：类型声明文件与异步编程
• TypeScript 教程(十)：项目配置、代码质量与前端框架集成

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

一、TypeScript 简介

1. 什么是 TypeScript？

TypeScript 是由微软开发的开源编程语言，是 JavaScript 的超集，主要特点是增加了静态类型。TypeScript 可以编译成纯 JavaScript，因此可以运行在任何支持 JavaScript 的环境中。

2. TypeScript 的历史和发展

TypeScript 最初于 2012 年发布，经过多年的发展，已经成为前端开发中的重要工具。TypeScript 的版本更新频繁，不断引入新的特性和改进，最新版本为 TypeScript 4.9。

3. 为什么要使用 TypeScript？

• 静态类型检查：在编译阶段发现错误，减少运行时错误。
• 代码可读性和可维护性：类型注解和接口可以使代码更易读、更易维护。
• 开发工具支持：TypeScript 提供了更好的代码补全、导航、重构等工具支持。

二、安装 Node.js 和 npm

在安装 TypeScript 之前，需要先安装 Node.js 和 npm（Node.js 的包管理工具）。

• 官网地址：
• 在线的 typescript 练习场

1. 下载 Node.js

访问 Node.js 官网，下载适合你操作系统的安装包，并按照提示完成安装。

2. 验证安装

打开命令行工具，输入以下命令来验证安装是否成功：

node -v
npm -v

如果显示出版本号，说明安装成功。

三、安装 TypeScript

使用 npm 安装 TypeScript 非常简单，只需在命令行中运行以下命令：

npm install -g typescript

安装完成后，可以通过以下命令验证安装：

tsc -v

如果显示出 TypeScript 的版本号，说明安装成功。

四、初始化 TypeScript 项目

在你的项目目录中，运行以下命令初始化 TypeScript 项目：

tsc --init

这将生成一个 tsconfig.json 文件，包含了 TypeScript 编译器的默认配置。

五、tsconfig.json 配置详解

tsconfig.json 文件用于配置 TypeScript 编译器选项。以下是所有常用配置属性的详细解释：

{
  "compilerOptions": {
    "target": "es5", // 编译输出的目标 JavaScript 版本，可选值有 'ES3', 'ES5', 'ES6'/ 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', 'ESNext'
    "module": "commonjs", // 生成代码的模块标准，可选值有 'CommonJS', 'AMD', 'System', 'UMD', 'ES6'/ 'ES2015', 'ESNext'
    "strict": true, // 启用所有严格类型检查选项
    "esModuleInterop": true, // 允许通过默认导入语法引入 CommonJS 模块
    "outDir": "./dist", // 编译输出目录
    "rootDir": "./src", // 源代码目录
    "sourceMap": true, // 生成对应的 .map 文件，便于调试
    "removeComments": true, // 从输出文件中移除注释
    "noImplicitAny": true, // 在表达式和声明上有隐含的 any 类型时报错
    "moduleResolution": "node", // 决定模块解析策略，可选值为 'node' 和 'classic'
    "skipLibCheck": true, // 跳过所有声明文件的类型检查
    "forceConsistentCasingInFileNames": true, // 禁止对同一个文件的不一致的引用
    "lib": ["dom", "es6"], // 需要包含在编译中的库文件
    "allowSyntheticDefaultImports": true, // 允许使用默认导入，即使模块没有默认导出
    "experimentalDecorators": true, // 启用实验性的装饰器特性
    "emitDecoratorMetadata": true, // 为装饰器提供元数据支持
    "baseUrl": ".", // 设置解析非相对模块名称的基准目录
    "paths": {
      // 模块名到基于 baseUrl 的路径映射
      "@/*": ["src/*"]
    },
    "typeRoots": ["./node_modules/@types"], // 包含类型声明的文件夹
    "types": ["node"], // 需要包含的类型声明文件
    "jsx": "react", // JSX 代码生成选项，可选值为 'preserve', 'react-native', 'react'
    "declaration": true, // 生成相应的 .d.ts 文件
    "noEmit": false // 不生成输出文件，用于仅进行类型检查
  },
  "include": ["src"], // 包含的文件
  "exclude": ["node_modules", "dist"] // 排除的文件
}

详细解释

• target: 指定 ECMAScript 目标版本。
• module: 指定生成代码的模块标准。
• strict: 启用所有严格类型检查选项，相当于启用 noImplicitAny, noImplicitThis, alwaysStrict, strictBindCallApply, strictNullChecks, strictFunctionTypes, strictPropertyInitialization 等。
• esModuleInterop: 允许通过默认导入语法引入 CommonJS 模块。
• outDir: 指定编译后的输出目录。
• rootDir: 指定输入文件的根目录。
• sourceMap: 生成对应的 .map 文件，便于调试。
• removeComments: 从输出文件中移除注释。
• noImplicitAny: 在表达式和声明上有隐含的 any 类型时报错。
• moduleResolution: 决定模块解析策略。
• skipLibCheck: 跳过所有声明文件的类型检查。
• forceConsistentCasingInFileNames: 禁止对同一个文件的不一致的引用。
• lib: 指定需要包含在编译中的库文件。
• allowSyntheticDefaultImports: 允许使用默认导入，即使模块没有默认导出。
• experimentalDecorators: 启用实验性的装饰器特性。
• emitDecoratorMetadata: 为装饰器提供元数据支持。
• baseUrl: 设置解析非相对模块名称的基准目录。
• paths: 配置模块名到基于 baseUrl 的路径映射。
• typeRoots: 指定包含类型声明的文件夹。
• types: 指定需要包含的类型声明文件。
• jsx: 指定 JSX 代码生成选项。
• declaration: 生成相应的 .d.ts 文件。
• noEmit: 不生成输出文件，用于仅进行类型检查。
• include: 指定包含的文件或文件夹。
• exclude: 指定排除的文件或文件夹。

六、编写第一个 TypeScript 文件

在项目的 src 目录下创建一个 index.ts 文件，并编写以下代码：

function greet(name: string): string {
  return `Hello, ${name}!`
}

const message = greet('世界')
console.log(message)

七、编译 TypeScript 文件

在命令行中运行以下命令，将 TypeScript 文件编译为 JavaScript：

tsc

这将根据 tsconfig.json 的配置，将 src 目录下的 TypeScript 文件编译到 dist 目录中。

八、运行编译后的 JavaScript 文件

在命令行中运行以下命令，查看输出结果：

node dist/index.js

你应该会看到 Hello, 世界! 的输出。

结语

通过本篇文章，你应该已经对 TypeScript 有了基本的了解，并学会了如何安装和配置 TypeScript 环境。在接下来的文章中，我们将深入探讨 TypeScript 的各个知识点，帮助你更好地掌握这门强大的语言。

欢迎在评论区分享你的学习心得和遇到的问题，让我们一起进步！