TypeScript从入门到精通(十七)配置文件-初识 compilerOptions 配置内容详解

complierOptions里的配置项详情可以去如下网站查看

https://www.tslang.cn/docs/handbook/compiler-options.html (编译选项详解)

complierOptions里的配置项内容很多,挑几个重要的看一下

rootDir和outDir:

现在我们的js文件直接编译到了根目录下,和ts文件混在了一起。我们当然是不喜欢这种方法的,工作中我们希望打包的js都生成在特定的一个文件夹里,比如build
在这里插入图片描述
这样编译的文件会放在指定的文件夹中

编译 ES6 语法到 ES5 语法-allowJs

我们在src文件夹下新建一个Demo.ts文件,并写上一段简单的代码,代码如下

export let person:string = "小哈"

如果不做任何配置,这时候试用tsc是没有效果的。需要到tsconfig.js文件里进行修改,修改的地方有两个。

"target":'es5' ,  // 这一项默认是开启的,你必须要保证它的开启,才能转换成功
"allowJs":true,   // 这个配置项的意思是联通

这两项都开启后,在使用tsc编译时,就会编译js文件了

sourceMap属性:

如果把sourceMap的注释去掉,在打包的过程中就会给我们生成sourceMap文件

sourceMap 简单说,Source map 就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。
在这里插入图片描述

noUnusedLocals 和 noUnusedParameters

假如我们修改Demo.ts文件的代码,如下

let xiaoha:string="小哈"
export const name="xiaha"

编译之后的文件:

//编译后的文件:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.name = void 0;
var xiaoha = "小哈";
exports.name = "xiaha";

我们会发现xiaoha这个变量没有任何地方使用,但是我们编译的话,它依然会被编译出来,这就是一种资源的浪费。

如果可以开启noUnusedLocals:true,开启后我们的程序会直接给我们提示不能这样编写代码,有已声明却没有使用的变量。
在这里插入图片描述

noUnusedParameters是针对于没有使用的函数,方法和noUnusedLocals:true一样

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是 TypeScript 的入门到精通教程: # TypeScript 入门教程 ## 什么是 TypeScriptTypeScript 是一种由微软开发的静态类型语言,它是 JavaScript 的超集,意味着它包含了 JavaScript 的所有内容,并且添加了一些新的特性。TypeScript 可以编译成纯 JavaScript,并且可以在任何地方运行。 TypeScript 的主要特点包括: - 强类型:TypeScript 可以在编译时检查类型错误,从而提高代码质量和可维护性。 - 面向对象:TypeScript 支持类、接口、继承等面向对象编程特性。 - 模块化:TypeScript 支持模块化,可以将代码分成多个模块,以便更好地组织和管理代码。 - 可读性:TypeScript 支持类型注解和接口定义,使代码更容易阅读和理解。 ## 安装 TypeScript 要开始使用 TypeScript,您需要先安装 TypeScript 编译器。您可以使用以下命令在全局范围内安装 TypeScript: ``` npm install -g typescript ``` ## 第一个 TypeScript 程序 创建一个名为 `hello.ts` 的文件,并将以下代码添加到文件中: ```typescript function sayHello(name: string) { console.log(`Hello, ${name}!`); } sayHello("TypeScript"); ``` 要编译 TypeScript 文件,请在命令行中导航到 TypeScript 文件所在的目录,并运行以下命令: ``` tsc hello.ts ``` 这将生成一个名为 `hello.js` 的 JavaScript 文件。要运行这个 JavaScript 文件,请在命令行中运行以下命令: ``` node hello.js ``` 这将输出以下内容: ``` Hello, TypeScript! ``` ## 类型注解 TypeScript 支持类型注解,可以在变量名后面使用冒号来指定变量的类型。例如: ```typescript let name: string = "TypeScript"; let age: number = 10; let isStudent: boolean = true; ``` 在上面的例子中,我们声明了三个变量,并将它们的类型分别设置为字符串、数字和布尔值。 ## 接口 接口是 TypeScript 的一个重要特性,它用于定义对象的形状。例如,以下是一个 `Person` 接口: ```typescript interface Person { name: string; age: number; } let person: Person = { name: "TypeScript", age: 10 }; ``` 在上面的例子中,我们定义了一个 `Person` 接口,它有两个属性:`name` 和 `age`。我们还创建了一个 `person` 对象,并将它的类型设置为 `Person`。 ## 类 TypeScript 支持类,可以使用类来创建对象和继承。以下是一个 `Animal` 类的示例: ```typescript class Animal { name: string; constructor(name: string) { this.name = name; } move(distance: number = 0) { console.log(`${this.name} moved ${distance}m.`); } } class Dog extends Animal { constructor(name: string) { super(name); } bark() { console.log("Woof! Woof!"); } } let dog = new Dog("Fido"); dog.move(10); dog.bark(); ``` 在上面的例子中,我们定义了一个 `Animal` 类和一个 `Dog` 类,并使用 `extends` 关键字将 `Dog` 类继承自 `Animal` 类。我们还创建了一个 `dog` 对象,并调用了 `move()` 和 `bark()` 方法。 ## 模块 TypeScript 支持模块化,可以将代码分成多个模块,并使用 `import` 和 `export` 关键字来管理模块之间的依赖关系。以下是一个简单的模块示例: ```typescript // greeter.ts export function sayHello(name: string) { console.log(`Hello, ${name}!`); } // main.ts import { sayHello } from "./greeter"; sayHello("TypeScript"); ``` 在上面的例子中,我们将 `sayHello()` 函数定义在 `greeter.ts` 文件中,并使用 `export` 关键字将它导出。然后在 `main.ts` 文件中,我们使用 `import` 关键字将 `sayHello()` 函数导入,并调用它。 ## 总结 以上是 TypeScript 的入门教程,涵盖了 TypeScript 的主要特性,包括类型注解、接口、类和模块。这些特性可以帮助您编写更安全、更可维护的 JavaScript 代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值