TypeScript配置、tsconfig.json配置文件，TypeScript使用详解

关于TypeScript【JavaScript的超集】

1、TypeScript 是 JavaScript 的一个超集，换句话说，所有的JavaScripe程序代码已经是TtypScript程序代码了，反之不行，因为TypeScript有自己的一些语法。
.
2、TypeScript 支持 ECMAScript 6 - 10… 标准（在未来的新ECMAScript标准中，可能会拥有TypeScript的所有）。
.
3、TypeScript 由微软开发的自由和开源的编程语言。
.
4、TypeScript 设计目标是开发大型应用，它最终是编译成标准的JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上、任何计算机和任何操作系统上运行，并且是开源的。
.
5、TypeScript的类型检查系统是静态的（就是当你在编写代码时，不用运行代码，就能提提前推断错误，并给出解决方案）

TypeScript安装

可用命令行的TypeScript编译器可以使用Node.js包来安装。全局安装如：npm install -g typescript局部安装如：npm i typescript

文件编译(生成对应的.js文件)

在TypeScript安装成功后，会得到两个可执行文件（命令）
1、tsc //TypeScript编译器
2、tsserver //TypeScript独立服务器（用于提供语言服务，如：自动补全，导航，检查，重构等）

在要编译ts文件的目录中打开DOS命令行工具，输入 tsc ts文件名 回车如：tsc xxx.ts注：回车后系统会在当前目录，自动编译并生成一个对应文件名的js文件，也可以在后面指定要输出的目录。

监听ts文件(更新对应的js文件)

注：如果我们每修编写或修改一次ts文件，就要去执行一次编译命令的话，这可是一件很繁琐的事情，此时我们可以通过监听到ts文件有变化时，自动编译并生成、更新js文件）

* 以前做法：

1、在生成的tsconfig.json文件中，把 “outDir”: “./js”, 的注释取消，并指定输出js文件在当前路径下的js目录中

2、【注：这是在项目第一次的时候要操作的】在vsCode中选择终端菜单 -> 配置任务 -> 在弹出的列表中向下滑动选择 -> tsc:构建 - xx项目名/tsconfig.json

3、在vsCode中选择终端菜单 -> 运行任务 -> 在弹出的列表中选择 -> tsc:监视 - xx项目名/tsconfig.json

4、运行后系统会自动生成一个js目录，编译并生成一个对应的js文件，这个文件就是标准的、浏览器能识别的、能解析的js文件啦!

5、现在你修改ts文件时，系统会自动同步到对应的js文件中

* 现在做法：

* 监听单个ts文件如：tsc xxx.ts -w* 监听xxx目录下所有的ts文件如：tsc注：直接在xxx目录下执行tsc命令【前提是：xxx目录下要有tsconfig.json 配置文件才行！！！】

创建TpyeScript配置文件（初始化tsconfig.json 文件）

配置tsconfig.json是在项目开发中是必须要做的一件事情，尤其是在项目是由多人协同开发时，这将起到很好的规范作用！在tsconfig.json配置文件中，许多配置选项控制着从哪里寻找ts源文件、监测、输出等控制着语言本身的核心方面。
当然在编译时再添加关相的配置也行：(但不建议这样做)
如：tsc – onImplicitAny xxx.ts

在项目根目录中（在前端工程中，就是在src/目录，和package.js同级），打开Dos命令工具 执行如下命令： 如：tsc -init 命令执行后会自动生成一个tsconfig.json 的配置文件。

tsconfig.json 配置文件明说

{"compilerOptions": {/* 访问 https://aka.ms/tsconfig.json 以阅读有关此文件的更多信息 *//* 基本选项 */"incremental": true,                   /* 启用增量编译 */"target": "ESNEXT",                    /* 指定 ECMAScript 目标版本：'ES3'、'ES5'（默认）、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020' 或 'ESNEXT'。 */"module": "commonjs",                  /* 指定模块代码生成：“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”、“es2020”或“ESNext”。 */"lib": [],                             /* 指定要包含在编译中的库文件。 */"allowJs": true,                       /* 允许编译 javascript 文件。 */"checkJs": true,                       /* 报告 .js 文件中的错误。 */"jsx": "preserve",                     /* 指定 JSX 代码生成：'preserve'、'react-native' 或 'react'。 */"declaration": true,                   /* 生成相应的“.d.ts”文件。 */"declarationMap": true,                /* 为每个对应的“.d.ts”文件生成一个源映射。 */"sourceMap": true,                     /* 生成相应的“.map”文件。 */"outFile": "./",                       /* 连接输出到单个文件。 */"outDir": "./",                        /* 将输出结构重定向到目录。 */"rootDir": "./",                       /* 指定输入文件的根目录。用于通过 --outDir 控制输出目录结构。 */"composite": true,                     /* 启用项目编译 */"tsBuildInfoFile": "./",               /* 指定文件存放增量编译信息 */"removeComments": true,                /* 不要向输出发出注释（删除除代码注释）。 */"noEmit": true,                        /* 不发出输出（不生成编译后的文件）。 */"noEmitOnError": true,                 /* 在输出js代码时，如果有错将不编译文件。 */"importHelpers": true,                 /* 从 'tslib' 导入发射助手。 */"downlevelIteration": true,            /* 以“ES5”或“ES3”为目标时，为“for-of”、展开和解构中的迭代提供全面支持。 */"isolatedModules": true,               /* 将每个文件转换为一个单独的模块（类似于 'ts.transpileModule'）。 *//* 严格的类型检查选项 */"strict": true,                        /* 启用所有严格的类型检查选项。 在开发中，建议将stricet这类选项都开启。 */"strictNullChecks": true,              /* 启用严格的空（undefined、null）检查，可以防止“未定义不是对象”。 建议开启*/"strictFunctionTypes": true,           /* 启用函数类型的严格检查。 */"strictBindCallApply": true,           /* 在函数上启用严格的“绑定”、“调用”、应用”方法。 */"strictPropertyInitialization": true,  /* 启用对类中属性初始化的严格检查。 */"noImplicitThis": true,                /* 使用隐含的“any”类型在“this”表达式上引发错误。 */"noImplicitAny": true,                 /* 使用隐含的“any”类型在表达式和声明上引发错误（主要用于控制变量、参数是否必须知道它们的类型【类型检查】），如果是将JavaScript迁移到TypeScript时，可以关闭此项，但不建议这样做。 */"alwaysStrict": true,                  /* 以严格模式解析并为每个源文件发出“使用严格”。 *//* 额外检查 */"noUnusedLocals": true,                /* 报告未使用的本地人的错误。 */"noUnusedParameters": true,            /* 报告未使用参数的错误。 */"noImplicitReturns": true,             /* 不是函数中的所有代码路径都返回值时报告错误。 */"noFallthroughCasesInSwitch": true,    /* 在 switch 语句中报告失败情况的错误。 *//* 模块分辨率选项 */"moduleResolution": "node",            /* 指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */"baseUrl": "./",                       /* 解析非绝对模块名称的基目录。 */"paths": {},                           /* 一系列将导入重新映射到相对于“baseUrl”的查找位置的条目。 */"rootDirs": [],                        /* 根文件夹列表，其组合内容代表运行时项目的结构。 */"typeRoots": [],                       /* 包含类型定义的文件夹列表。 */"types": [],                           /* 类型声明文件要包含在编译中。 */"allowSyntheticDefaultImports": true,  /* 允许从没有默认导出的模块中默认导入。 这不会影响代码发出，只是类型检查。 */"esModuleInterop": true,               /* 通过为所有导入创建命名空间对象，在 CommonJS 和 ES 模块之间启用发射互操作性。 暗示“allowSyntheticDefaultImports”。 */"preserveSymlinks": true,              /* 不解析符号链接的真实路径。 */"allowUmdGlobalAccess": true,          /* 允许从模块访问 UMD 全局变量。 *//* 源映射选项 */"sourceRoot": "",                      /* 指定调试器应该定位 TypeScript 文件而不是源位置的位置。 */"mapRoot": "",                         /* 指定调试器应该定位映射文件而不是生成位置的位置。 */"inlineSourceMap": true,               /* 发出带有源映射的单个文件而不是单独的文件。 */"inlineSources": true,                 /* 在单个文件中与源映射一起发出源； 需要设置“--inlineSourceMap”或“--sourceMap”。 *//* 实验选项 */"experimentalDecorators": true,        /* 启用对 ES7 装饰器的实验性支持。 */"emitDecoratorMetadata": true,         /* 为装饰器的发射类型元数据启用实验性支持。 *//* 高级选项 */"skipLibCheck": true,                     /* 跳过声明文件的类型检查。 */"forceConsistentCasingInFileNames": true  /* 禁止对同一文件的大小写不一致的引用。 */}
}

TypeScript中的数据类型

在TS中为使编写的代码更加规范、更有利于维护，故增加了数据类型校验！！

类型	名称	实例	描述
string	字符串	‘xxx’，“xxx”	任意字符
number	数字	1，-6，28.3	任意数字
object	对象	{ key: value }	js对象
boolean	布尔	true，false	真、假
array	数组	[1, 2, 3]	js 数组
tuple	元组	[123, ‘666’, false]	Tuple 它属性于数组类型中的一种
enum	枚举	enum { A, B=‘123’}	从0开始，如果没有给标识符赋值时，那标识符的值为对应所以的下标！
any	任意类型	*	任意类型（注：如果都用any，那TS的类型系统就失去意义了）
unknown	顶级类型	*	类型安全的any，每当想使用 any 时，应该先试着用 unknown
never	没有值	其他类型	它包括 null 和 undefined 两种类型，代表从来都不会出现的值
void	空值	undefined	在ts中void表示没有任何类型，一般在定义方法的时候，而方法没有返回值时用
null	是一个数	null	null值的类型可能是：null 或 number 或 undefined
undefined	不明确的	var xxx; let xx; const: xxx	常、变量已声明，但没赋任何值
not defined	未定义	xxx	连常、变量都没声明
字面量	字面量	其本身	定义常、变量时，不加类型限制（TS会隐式的加上）

注：当把类型看作是值的集合时，any 和 unknown 是包含所有值的集合，因为 any 和 unknown 在 TypeScript 中是所谓的“顶部类型”。

* 而：unknown 类型是 any 的类型安全版本。每当你想使用 any 时，应该先试着用 unknown。

* 在 any 允许我们做任何事的地方，unknown 的限制则大得多。

TypeScript的错误处理

在TypeScript项目开发中，遇到有报错时，不用害怕（尤其是刚接触TypeScript的小伙伴们，可能还会对使用TypeScript产生抵触心理）当逐渐上手之后，就会体会到就是因为TypeScript提前告知我们在开发时的不足而带来的好处。

所以当遇到有报错时，首先要区分是什么错，再根据不同的错误信息来做对应的处理，从大范围可分为以下3种错误形式：

业务逻辑错误（与代码无关）。
TypeScript类型检查没有通过。
TypeScript编译没有通过。

TypeScript配置、tsconfig.json配置文件，TypeScript使用详解相关推荐

import引入json文件_关于TypeScript中import JSON的正确姿势详解
前言 Typescript是微软内部出品的,用actionscript的语法在写js的一门新语言,最近 TypeScript 中毒,想想我一个弱类型出身的人,怎么就喜欢上了类型约束--当然这不是重点, ...
tsconfig 配置文件各字段详解
tsconfig 配置文件各字段详解 files 需要解析的ts的文件. {"files": ["./index.ts"] } 当找不到对应的文件时会报错. e ...
java项目引入json配置,TS-28 配置tsconfig.json（3）：工程引用
ts3.0引入的新特性: 工程引用项目目录树 object/ src/ client/ common/ server/ test/ tsconfig.json 问题: 1.不希望在构建目录dist下 ...
GitLab CI流水线配置文件.gitlab-ci.yml详解（三）
GitLab CI流水线配置文件.gitlab-ci.yml详解 - contents:: 目录本文讲解在 :ref:GitLab的汉化与CI持续集成gitlab-runner的配置 <con ...
Tomcat(二)：tomcat配置文件server.xml详解和部署简介
1. 入门示例:虚拟主机提供web服务该示例通过设置虚拟主机来提供web服务,因为是入门示例,所以设置极其简单,只需修改$CATALINA_HOME/conf/server.xml文件为如下内容即可 ...
Linux配置启动挂载：fstab文件详解
Linux配置启动挂载:fstab文件详解 [日期:2014-12-23] 来源:Linux社区作者:aceking10 [字体:大中小] fstab文件介绍 fstab文件包含了你的电脑上的存 ...
性能测试之JMeter接口关联【JSON提取器】详解
1.JSON提取器介绍相信做过自动化测试的朋友经常会遇到这样的场景:我想调用系统中的某个业务接口,但是需要先登录系统.也就是现在很多接口的访问,都是需要登录接口的token做为基础. 在JMeter ...
mysql配置文件my.cnf详解
mysql配置文件my.cnf详解 basedir = path 使用给定目录作为根目录(安装目录). character-sets-dir = path 给出存放着字符集的目录. datadir = ...
Apache配置文件httpd.conf详解
转自:http://www.jianshu.com/p/c36dd3946e74 Apache配置文件httpd.conf详解 Apache的配置由httpd.conf文件配置,因此下面的配置指令都是 ...
yum的配置文件yum.conf详解
转自:https://blog.csdn.net/im5437/article/details/53445142 说明:经过网上抄袭和自己的总结加实验,非常详细,可留作参考. yum的配置一般有两种方 ...