tsconfig.json配置文件的说明

基础数据类型

布尔值

数字

介绍

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。 TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

js 与 ts 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。 JS是弱类型语言，开发时的类型错误不容易发现。TS主要是支持变量类型检测，能提前发现一些问题。

TS环境配置

TS的环境配置（安装命令）

npm i -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。编译一个 TypeScript 文件很简单：

tsc app.js

TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。主流的编辑器都支持 TypeScript，这里我推荐使用 Visual Studio Code。它是一款开源，跨终端的轻量级编辑器，内置了对 TypeScript 的支持，VS Code它本身也是用TypeScript 编写的。

编译TS文件

在目录中创建app.ts文件，在该目录执行 tsc app.ts 就可以在同目录下编译一个app.js的文件。
一般使用tsc编译ts文件时一般会用tsc的配置文件，用tsc init 就会在你的目录里面生成tsconfig.json的配置文件在目录下面执行tsc 则会自动根据 tsconfig.json 的配置编译处目录下面的ts文件为js文件
tsconfig.json配置说明

target 用于指定编译后的版本目录

"target": "es6",

module用来指定要使用的模板标准

"module": "commonjs",

outFile用于指定输出文件合并为一个文件，只有设置module的值为amd和system模块时才支持这个配置，一般不用配置这里。

"outFile": "./app",

outDir用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹

"outDir": "./app",

tsconfig.json配置文件的说明

{
"compilerOptions": {
/* 基本选项 */
"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'、'reactnative' 或 'react'。 */
"declaration": true,      /* 生成相应的“.d.ts”文件。 */
"declarationMap": true,   /* 为每个对应的“.d.ts”文件生成一个源映射。 */
"sourceMap": true,        /* 生成相应的“.map”文件。 */
"outFile": "./",          /* 连接输出到单个文件。 */
"outDir": "./",           /* 将输出结构重定向到目录。 */
"rootDir": "./",          /* 指定输入文件的根目录。用于通过 --outDir 控制输
                             出目录结构。 */
"composite": true,        /* 启用项目编译 */
"tsBuildInfoFile": "./",  /* 指定文件存放增量编译信息 */
"removeComments": true,   /* 不要向输出发出注释。 */
"noEmit": true,           /* 不发出输出。 */
"importHelpers": true,    /* 从 'tslib' 导入发射助手。 */
"downlevelIteration": true,   /* 以“ES5”或“ES3”为目标时，为“for-of”、展开和解
                               构中的迭代提供全面支持。 */
"isolatedModules": true,  /* 将每个文件转换为一个单独的模块（类似于
                            'ts.transpileModule'）。  */
/* 严格的类型检查选项 */
"strict": true,            /* 启用所有严格的类型检查选项。 */
"noImplicitAny": true,      /* 使用隐含的“任何”类型在表达式和声明上引发错误。
*/
"strictNullChecks": true,    /* 启用严格的空检查。 */
"strictFunctionTypes": true, /* 启用函数类型的严格检查。 */
"strictBindCallApply": true, /* 在函数上启用严格的“绑定”、“调用”和“应用”方法。
*/
"strictPropertyInitialization": true,  /* 启用对类中属性初始化的严格检查。 */
"noImplicitThis": true,              /* 使用隐含的“any”类型在“this”表达式上引发错误。
                                       */
"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 全局变量。 */
/* 源映射选项 */
基础类型
为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与
JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。
布尔值
最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做 boolean （其它语言中也一样）。
数字
和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number 。 除了支持十进制和十六进
制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
字符串
JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样，我们使用 string 表示文
本数据类型。 和JavaScript一样，可以使用双引号（ " ）或单引号（ ' ）表示字符串。
"sourceRoot": "",                 /* 指定调试器应该定位 TypeScript 文件而不是源位置
的位置。 */
"mapRoot": "",                   /* 指定调试器应该定位映射文件而不是生成位置的位置。
*/
"inlineSourceMap": true,         /* 发出带有源映射的单个文件而不是单独的文件。 */
"inlineSources": true,        /* 在单个文件中与源映射一起发出源； 需要设置“--
                                     inlineSourceMap”或“--sourceMap”。 */
/* 实验选项 */
"experimentalDecorators": true,               /* 启用对 ES7 装饰器的实验性支持。 */
"emitDecoratorMetadata": true,          /* 为装饰器的发射类型元数据启用实验性支持。 */
/* 高级选项 */
"skipLibCheck": true,                    /* 跳过声明文件的类型检查。 */
"forceConsistentCasingInFileNames": true /* 禁止对同一文件的大小写不一致的引用。 */
}
}

/* 访问 https://aka.ms/tsconfig.json 以阅读有关此文件的更多关于配置文件选项的信息https://aka.ms/tsconfig.json

基础数据类型

为了让程序有价值，严谨性，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与 JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

布尔值

最基本的数据类型就是简单的true，false值，在Js和Ts里叫做 boolean （其它语言中也一样）。

const isOK: boolean = true;

数字

和js一样，TS里的所有数字都是浮点数。这些浮点数的类型是 number 。除了支持十进制和十六进制字面量，TS还支持ECMAScript 2015中引入的二进制和八进制字面量。

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744

字符串

TS程序的另一项基本操作是处理网页或服务器端的文本数据。像其它语言里一样，我们使用 string 表示文本数据类型。和JS一样，可以使用双引号（ " ）或单引号（ ' ）表示字符串。

let name: string = "ok";
name = "smith";

同样你还可以和js一样使用模板字符串

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${ age + 1 } years old next month.`;

上面的这些代码与下面定义 sentence 的方式效果相同：

let sentence: string = "Hello, my name is " + name + ".\n\n" +
"I'll be " + (age + 1) + " years old next month.";

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

什么是类型推论

以下代码虽然没有指定类型，但是会在编译的时候报错：

let name = "name";
name = 7;

error

其实上面的代码等价于下面的代码

let name:string="name"
name=7

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

let name;
name = "name1";
name = 7;
//没有错误

元组Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如，你可以定义一对值分别为 string 和 number 类型的元组

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // 错误

枚举

enum 类型是对JavaScript标准数据类型的一个补充。像JAVA等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;
let c1:Color =Color.Blue

默认情况下，从 0 开始为元素编号。你也可以手动的指定成员的数值。例如，我们将上面的例子改成从 1 开始编号：

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

或者，全部都采用手动赋值：

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

反向映射

除了创建一个以属性名做为对象成员的对象之外，数字枚举成员（字符串枚举成员没有反向映射）还具有了反向映射，从枚举值到枚举名字

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true

字符串枚举

在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化

enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT"
}

Any

有时候我们在编程阶段不知道某个变量要使用啥类型的数据类型，那么我们可以使用 any 类型来标记这些变量：

let type: any = "12";
type = 3;
type = true;

在对现有代码进行改写的时候， any 类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。你可能认为 Object 有相似的作用，就像它在其它语言中那样。但是 Object 类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法：

let object: any;
object.go();
object.go1();

let object2: object = { a: 4, go: () => {} };
object2.go();//Error object中不存在go

当你只知道一部分数据的类型时， any 类型也是有用的。比如，你有一个数组，它包含了不同的类型的数据：

let list: any[] = [1, true, "free"];
list[1] = 100;

Void

某种程度上来说， void 类型像是与 any 类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是 void ：

function warnser(): void {
console.log("This is my warning message");
}

注意：声明一个 void 类型的变量没有什么太大的用处，因为你只能为它赋予 undefined 和 null ：

let unusable: void = undefined;

Null 和 Undefined

TypeScript里， undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null 。和 void 相似，它们的本身的类型用处不是很大：

let u: undefined = undefined;
let n: null = null;

Never

never 类型表示的是那些永不存在的值的类型。例如， never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是 never 类型，当它们被永不为真的类型保护所约束时。 never 类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是 never 的子类型或可以赋值给 never 类型（除了 never 本身之外）。即使 any 也不可以赋值给 never 。

下面是一些返回 never 类型的函数：

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}

void

用于标识方法返回值的类型，表示该方法没有返回值。

function ISOK(): void {
console.log("isok")
}

好了今天先更新到这，明天我再将别的内容进行整理供大家学习！！

Ts基础教程(一)-----------------------超级详细

介绍

js 与 ts 的区别

TS环境配置

编译TS文件

tsconfig.json配置文件的说明

基础数据类型

布尔值

数字

字符串

类型推论

什么是类型推论

元组Tuple

枚举

反向映射

字符串枚举

Any

Null 和 Undefined

Never

void

猜你喜欢