JavaScript：动态类型语言（Dynamically Typed Language），在运行期间检查数据的类型的语言。用这类语言编程，不会给变量指定类型，而是在赋值时得到数据类型。
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。

TypeScript增加了什么？

类型
完美支持ES新特性
添加ES不具备的新特性
丰富的配置选项
强大的开发工具

TypeScript环境搭建

安装node.js
使用npm全局安装typescript

npm i -g typescript
tsc -v

简单的数据类型

/**
 * 简单的数据类型
 */

// 类型声明
let a: number;
a = 1;
console.log(a);

let b: boolean = true;
console.log(b);

function test(name: string) {
  console.log(name);
}
test("steven");

// 自动类型判断
let i = 1;
console.log(typeof i);

// 字面量声明
let j: 1;
console.log(j); // undefined

// any类型
let x: any; // 隐式：let x;
x = 1;
x = "hello";
let y: number = 1;
y = x; // any类型的隐患
console.log(x, typeof x, y, typeof y); // hello string hello string

// unknown类型
let unk: unknown;
unk = 1;
unk = "hello";
y = 1;
if (typeof unk === "number") {
  y = unk; // 解决any类型隐患
}
console.log(unk, y);

// 类型断言
let z: string;
z = unk as string;
console.log(z);

// 函数
console.log("函数");
// 设置形参类型
function fun1(name: string) {} // 默认返回undefined
console.log(fun1("steven"));
// 指定返回值类型
function fun2(): string {
  return "hello";
}
console.log(fun2());
// void返回值类型
function fun3(): void {
  return; // 可返回undefined,null和什么都不返回return;
}
console.log(fun3());
// never返回值类型(永远不会返回结果)
function fun4(): never {
  throw new Error("提示");
}
console.log(fun4());
console.log('test'); // 不会执行

复杂的数据类型声明

/**
 * 复杂的数据类型声明
 */

// 对象类型声明
let a: {
  name: string;
  age?: number;
  [name: string]: unknown;
};
a = {
  name: "steven",
  logName() {
    console.log(this.name);
  },
};
console.log(a.name);
if (typeof a.logName === "function") {
  a.logName();
}

// 数组类型声明
let arr1: number[];
arr1 = [1];
let arr2: Array<string>;
arr2 = ["hello"];
console.log(arr1, arr2);

// 扩展类型tuple（元组）
// 元组就是定长的数组。（就代表数组中的数量是固定的就叫做元组，元组的存储效率比较好点，因为元组是固定，不会出现扩容的现象，所有效率会好点）
let arr3: [string, number, boolean];
arr3 = ["1", 2, true];
console.log(arr3);

// enum（枚举）
enum num {
  a = 1,
  b,
}
console.log("数字枚举", num);
enum color {
  red = "红",
  green = "绿",
  blue = "蓝",
}
console.log("字符串枚举", color);

// 联合类型声明
let b: number | string;
b = 1;
b = "hello";
let c: 1 | 2 | 3;
b = 3;

// 类型别名
type myType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0;
let x: myType = 1;
console.log(typeof x); // number

配置

自动编译

自动编译单个文件

编译文件时，使用-w指令后，TS编译器会自动监视文件的变化，并在文件发生改变时对文件进行重新编译。
tsc 文件名.ts -w

自动编译当前项目下的所有的ts文件

如果直接使用tsc指令，则可以自动将当前项目下的所有的ts文件编译成js文件
有一个前提，首先在项目的根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个json文件，添加配置后，只需要tsc命令即可完成对整个项目的编译

配置文件：tsconfig.ts

{
  // **：表示任意目录
  //  *：表示任意文件
  "include": ["./dev"], // 定义希望被编译文件所有的目录，默认值：["**/**"]
  //   "exclude": ["./prop/**/*"], // 定义不需要编译的目录，默认值：["node_modules","bower_components","jspm_packages"]
  //   "extends": "./config/base", // 定义被继承的配置文件
  //   "files": ["demo1.ts", "demo2.ts", "./dev/dev.ts"], // 指定需要编译文件的列表
  "compilerOptions": {
    "target": "ES6", // 指定ts编译的js目标版本，可选值："ES3"（默认）， "ES5"， "ES6"/ "ES2015"， "ES2016"， "ES2017"或 "ESNext"
    "module": "ES6", // 指定使用的模块化规范，可选值："None"， "CommonJS"， "AMD"， "System"， "UMD"， "ES6"或 "ES2015"
    // "lib": [], // 指定编译过程中需要引入的库文件的列表 注意：如果--lib没有指定默认注入的库的列表。默认注入的库为：► 针对于--target ES5：DOM，ES5，ScriptHost ► 针对于--target ES6：DOM，ES6，DOM.Iterable，ScriptHost
    "outDir": "./dist", // 用来指定编译后文件所在的目录
    // "outFile": "./dist/main.js", // 将编译的代码合并成一个文件(mudule只能使用 amd或者是system)
    "allowJs": false, // 是否对js文件进行编译，默认：false
    "checkJs": false, // 是否检查js代码符合语法规范，默认：false
    "removeComments": false, // 在编译的时候是否移除注释，默认：false
    "noEmit": false, // 不生成编译后的文件，默认：false
    "noEmitOnError": false, // 当存在语法错误的时不生成编译后的文件，默认：false
    "alwaysStrict": false, // js中有一种模式叫做严格默认，它语法更严格，在浏览器执行的性能更高，开发时候我们都会让我们的代码在严格模式下执行，默认：false(当代码中有引入导出模块代码时，js会自动进入严格模式下)
    "noImplicitAny": false, // 不允许隐式的any类型，默认：false
    "strictNullChecks": false, // 严格的检查空值，默认：false
    "strict": false, // 所有严格检查的总开关，默认：false
  }
}

TypeScript笔记

TypeScript增加了什么？

TypeScript环境搭建

简单的数据类型

复杂的数据类型声明

配置