前言

这段时间学习了TypeScript，借此篇博客记录一下学到的知识以及向大家介绍我所认识的typescript语言。

---

介绍

        关于TypeScript，这里是百度百科的介绍。在我看来可以将TypeScript理解为javaScript的超集，在名字上的Type：类型便是他们之间最大的区别，向Js中引入了类型的概念以及类、接口、继承、泛型等面向对象开发语言的内容，如果有学习过java的小伙伴一定会觉得很亲切。

---

一.环境的配置

        因为浏览器的js是无法解析ts代码的，因此如果我们要使用Ts代码，首先就要将ts代码转换成js代码再交给js引擎解析。这个过程就需要用到我们的ts开发环境。

1.安装nodeJs

        关于nodeJs的下载，我在eggJs的第一篇文章中有明确的介绍，以下是跳转连接。在本文中默认大家已经有了nodeJs开发环境。

2.全局安装typeScript

• 进入命令行
• 输入指令 npm i -g typescript

3.创建一个ts文件

         在ts代码中输入一些js的代码，这里我就用console语句做示范。

4.使用tsc对ts文件进行编译

• 进入terminal（命令行）
• 进入ts文件所在的文件夹
• 输入命令 tsc xxx.tx

（补充）输入命令后，如果没有提示消息便是编译成功的表现。

 二.基本类型

        类型是TS中非常重要的一个特点，可以指定一个变量的类型。指定类型后如果出现类型不匹配，ts编译器会报错。

语法：

//let 变量: 类型;
let first: number;
/*
let 变量 后没有跟类型，则会默认将变量设为any类型，但在ts中
要尽量避免将变量设置为any类型，这样就没有类型的限制。  
*/
let any;
//let 变量: 类型 = 值;
let second: String = 'Second';
// 错误的写法,类型不匹配则会出现编译错误的提醒
let error_1: String = 123;
/* 
TS拥有自动的类型判断机制 
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明
*/
let number = 123; //number变量便会自动被判断为number类型
/* function fn(参数: 类型, 参数: 类型): 类型{
    ...
}
*/
function fn(param1: String, param2: number): void {
  //函数体
}

类型 

类型	例子	描述
number	1, -33, 2.5	任意数字
string	'hi', "hi", hi	任意字符串
boolean	true、false	布尔值true或false
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	空值或undefined
never	没有值	不能是任何值
object	{name:'孙悟空'}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	固定长度数组
enum	enum{A, B}	枚举

• number

/*
将number变量指定为number类型，
只能给该变量赋值数字以及进制值，
否则编译器将报错
*/
  let number: number = 6;
//十六进制
  let hex: number = 0xc00b;

• boolean

  let bool: boolean = true;
  let b = true;

• string

  let color: string = 'blue';
  let c = 'red';

•  any

   /* 
  可以看到any类型的变量可以赋值其他类型，
  这样就没有了类型的约束。(不推荐使用)
  */
  let a: any = 4;
  // any就没办法用ts的自动判断机制
  a = 'hello';
  a = true;
 

• unknown

  /* 
    与any类似，当有不确定变量将是什么类型的时候建议使用unknown
  */
  let u: unknown = false;
  let a: any = true;
  u = 4;
  /* 
    unknown和any的区别在于：
    将unknown和any的值赋值给另一个变量的时候，
    any是可以通过编译的，而unknown则会报编译错误
    因此更安全一些，也正是当有不确定变量类型的时候更推荐unknown。
  */
  let test1: String = u;
  let test2: String = a;

•  void

  let v: void = null;
  let v1: void = undefined;

•  never (不常用)

  /* 
    never类型用于函数完全没有返回值，
    一般用于代码阻断(不常用)
    */
  function never(message: string): never {
    throw new Error(message);
  }

•  object

  /* 
        用于任何js对象，
        没有太大用处
    */
  let obj: object = {};

•  array

  /* 
        数组有两种写法
        1.类型[]
        2.Array<类型>
    */
  let list: number[] = [1, 2, 3];
  let newList: Array<number> = [1, 2, 3];

• tuple 

  /* 
    tuple类型用于确定个数、确定类型的有限个数数组]
    写法:
    [类型1，类型2...]，写了多少种类型就按照相应类型和数量存入
    若是数量或者相应类型对不上则无法通过编译
    */
  let tuple: [string, number, boolean];
  tuple = ['s', 1, false];

•  enum

  /* 
    枚举类比较好理解，就像性别中的男和女，在进行数据库存储的时候
    为了节省时间和空间，一般是将男、女转换为数字0、1，但在联合开发
    的时候，为了更加直译便可以选择枚举类型，系统自动会将值转换为对应值
    */
  enum Color {
    Red,
    Green,
    Blue,
  }
  let c: Color = Color.Green;

 三.编译的配置

        现在我们知道了ts编译成js的方法，但如果每次修改ts代码都要输入一次编译指令就会显得非常的麻烦。这个时候就用到了我们编译的配置、选项。

1. 监视单一ts文件

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

    但这样我们会发现，虽然自动编译了ts文件，但只是编译单一的文件且占据了一个终端(命令行)，如果想要同时监视多个文件就要使用多个终端，也不是很方便。这时候就要用到我们第二种方式。

2.tsconfig.json配置

• 如果想要编译当前目录的所有ts文件，可以使用直接命令 tsc

• 但是想要以这种方式编译，得有一个前提: 在当前目录创建一个tsconfig.json文件

  • 配置选项

{
    /* 
    include
        定义希望被编译文件所在的目录
        默认值：["**/*"] 
    举例:我想要扫描src目录下的所有文件(包括子目录)
    */
    "include": [
        "./src/**/*"
    ],
    /* 
    exclude
        定义需要排除在外的目录
        默认值：["node_modules", "bower_components", "jspm_packages"]
    举例:我想要排除src目录下的hello目录下的所有文件
    */
    "exclude": [
        "./src/hello/**/*"
    ],
    /* 
    compilerOptions
        编译选项是配置文件中非常重要也比较复杂的配置选项
        在compilerOptions中包含多个子选项，用来完成对编译的配置
        以下举例比较常用的项目选项
    */
    "compilerOptions": {
        /* 
            1.target
            设置ts代码编译的目标版本:可选值为ES的所有版本
        */
        "target": "ES6",
        /* 
            2.module
            设置编译后代码使用的模块化系统
            可选值:CommonJS、UMD、AMD、System、ES2020、ESNext、None
        */
        "module": "ES6",
        /* 
            3.outDir
            编译后文件的所在目录
            默认情况下，编译后的js文件会和ts文件位于相同的目录，
            设置outDir后可以改变编译后文件的位置
        */
        "outDir": "./dist",
        /* 
        strict
        启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查
         */
        "strict": true
    }
}

 3.示范

        在src目录中创建了两个ts文件经过编译前后的文件目录结构如下:

---

总结:

         本次Ts的初体验就介绍到这里，本次简单介绍了Ts以及ts基础的类型及手动编译ts的一些配置，在后期中更多的是使用webpack配合tsconfig对ts代码进行编译，之后再与大家分享。

        最后大家如果想要系统的学习typescript代码，建议大家观看尚硅谷李立超老师的Ts视频，我所介绍的Ts大部分内容都是经过学习超哥视频之后的总结。

        希望大家通过本文可以对Ts有一定的收获。