hello TypeScript

在上一章节中我们介绍了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文件的作用包括：

1. 配置TypeScript编译器的行为，包括指定需要编译的文件和输出目录等。

2. 支持多种编译模式，如开发模式和生产模式。

3. 为项目提供统一的编译选项，以确保所有开发人员都在同样的条件下编译和调试代码。

4. 提升项目的可维护性，支持不同的模块和语法规范，以应对日益复杂的需求。

5. 支持自定义编译器行为，满足特定项目的需求，提升开发效率和代码质量。

tsconfig.json文件的生成

我们在项目的根目录下输入

tsc --init

就可以生成tsconfig.json文件

常用配置介绍

1. “compilerOptions”

这是tsconfig.json最重要的部分，用于设置编译器选项。关键的配置有：

• “target”: 指定编译后的JavaScript代码的目标版本。常见的目标版本包括es5、es6、es2015、es2016和es2017等。默认值是es3。
• “module”: 指定编译后的JavaScript模块的类型。常见的模块类型包括CommonJS、AMD、UMD、ES6模块等。默认值是CommonJS。
• “outDir”: 指定编译后的JavaScript文件输出的目录。
• “strict”: 启用TypeScript的严格模式，包括强类型检查和更严格的null和undefined检查。

2. “include”

指定需要编译的文件的路径。可以使用通配符来匹配多个文件。例如：

{
  "include": [
    "src/**/*.ts"
  ]
}

表示编译所有src目录下的ts文件及其子目录下的ts文件。

3. “exclude”

指定不需要编译的文件的路径。可以使用通配符来匹配多个文件。例如：

{
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

表示不编译node_modules目录下的文件及以.spec.ts结尾的文件。

4. “files”

指定需要编译的文件列表。如果指定了这个选项，include和exclude选项将被忽略。例如：

{
  "files": [
    "src/index.ts",
    "src/utils.ts"
  ]
}

表示只编译src目录下的index.ts和utils.ts文件。

5. “extends”

可以使用extends选项来继承其他tsconfig.json文件中的配置。例如：

{
  "extends": "./base.json",
  "compilerOptions": {
    "target": "es6"
  }
}

表示继承base.json文件中的配置，并覆盖compilerOptions.target选项。

6. “references”

可以使用references选项来将多个项目进行关联，并在编译时一起构建。例如：

{
  "references": [
    { "path": "../lib" },
    { "path": "../app" }
  ]
}

表示将当前项目与上级目录下的lib和app项目进行关联。

7. “compileOnSave”

指定是否在保存文件时自动进行编译。默认值为false。