在上一章节中我们介绍了typescript的产生背景，和使用typescript开发需要环境和工具，这一节我们就来感受一下typescript吧
一、第一个typescript程序，‘hello ts’
1. 安装TypeScript编译器
在开始编译TypeScript文件之前，需要先安装TypeScript编译器。可以使用npm安装TypeScript，命令为：
npm install -g typescript
安装完成后，可以在命令行输入tsc -v来检查TypeScript版本。
2. 创建TypeScript文件
在安装完TypeScript编译器后，需要创建一个TypeScript文件。TypeScript文件的扩展名为.ts。
例如，可以创建一个叫做hello.ts的文件，并在其中编写以下代码：
function sayHello(name: string) {
console.log("Hello, " + name);
}
let myName = "TypeScript";
sayHello(myName);
3. 编译TypeScript文件
一旦编写了TypeScript文件，接下来需要将其编译为JavaScript文件。可以使用tsc命令来进行编译，例如：
tsc hello.ts
这个命令将会在当前目录下生成一个名为hello.js的JavaScript文件。
4. 使用node执行hello.js文件
如图控制台打印出了 Hello TypeScript
二、tsconfig.json介绍
细心的伙伴可以看到我上面截图的tsconfig.json文件
tsconfig.json文件是TypeScript项目的配置文件，它可以包含各种编译选项，用来配置TypeScript编译器的行为。TSConfig文件是一个JSON格式的文件，由TypeScript团队提供，并被广泛使用。TSConfig文件包含了TypeScript编译器的所有配置信息，它可以用来定义编译器将要处理哪些文件，以及如何处理这些文件。同时，它也可以用来指定生成的JavaScript文件的位置、使用的模块格式、以及其他一些特定于项目的编译器设置。
在实际开发中，常常需要为TypeScript项目创建多个TSConfig文件。每个TSConfig文件都定义了自己独立的编译选项，以便针对不同的项目需要进行配置，例如开发和测试模式、不同浏览器、不同操作系统等。TSConfig文件的使用可以大大提升项目的可维护性、可扩展性以及可重用性。
总的来说，TSConfig文件的作用包括：
-
配置
TypeScript编译器的行为，包括指定需要编译的文件和输出目录等。 -
支持多种编译模式，如开发模式和生产模式。
-
为项目提供统一的编译选项，以确保所有开发人员都在同样的条件下编译和调试代码。
-
提升项目的可维护性，支持不同的模块和语法规范，以应对日益复杂的需求。
-
支持自定义编译器行为，满足特定项目的需求，提升开发效率和代码质量。
tsconfig.json文件的生成
我们在项目的根目录下输入
tsc --init
就可以生成tsconfig.json文件
常用配置介绍
- “compilerOptions”
这是tsconfig.json最重要的部分，用于设置编译器选项。关键的配置有：
- “target”: 指定编译后的JavaScript代码的目标版本。常见的目标版本包括es5、es6、es2015、es2016和es2017等。默认值是es3。
- “module”: 指定编译后的JavaScript模块的类型。常见的模块类型包括CommonJS、AMD、UMD、ES6模块等。默认值是CommonJS。
- “outDir”: 指定编译后的JavaScript文件输出的目录。
- “strict”: 启用TypeScript的严格模式，包括强类型检查和更严格的null和undefined检查。
- “include”
指定需要编译的文件的路径。可以使用通配符来匹配多个文件。例如：
{
"include": [
"src/**/*.ts"
]
}
表示编译所有src目录下的ts文件及其子目录下的ts文件。
- “exclude”
指定不需要编译的文件的路径。可以使用通配符来匹配多个文件。例如：
{
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
表示不编译node_modules目录下的文件及以.spec.ts结尾的文件。
- “files”
指定需要编译的文件列表。如果指定了这个选项，include和exclude选项将被忽略。例如：
{
"files": [
"src/index.ts",
"src/utils.ts"
]
}
表示只编译src目录下的index.ts和utils.ts文件。
- “extends”
可以使用extends选项来继承其他tsconfig.json文件中的配置。例如：
{
"extends": "./base.json",
"compilerOptions": {
"target": "es6"
}
}
表示继承base.json文件中的配置，并覆盖compilerOptions.target选项。
- “references”
可以使用references选项来将多个项目进行关联，并在编译时一起构建。例如：
{
"references": [
{ "path": "../lib" },
{ "path": "../app" }
]
}
表示将当前项目与上级目录下的lib和app项目进行关联。文章来源：https://www.toymoban.com/news/detail-506526.html
- “compileOnSave”
指定是否在保存文件时自动进行编译。默认值为false。文章来源地址https://www.toymoban.com/news/detail-506526.html
到了这里，关于hello TypeScript的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
