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

目录

前言

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-vnpm-v

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

三、安装 TypeScript

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

npminstall-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

文件，并编写以下代码：

functiongreet(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 的各个知识点，帮助你更好地掌握这门强大的语言。

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