一.什么是TS（TypeScript）

是一种由微软开发的开源编程语言，它是 JavaScript 的超集，能够为 JavaScript 添加静态类型检查和面向对象编程的特性。TS 可以在编译时进行类型检查，从而提高代码的可读性、可维护性和可靠性，同时还支持 ECMAScript 的最新特性。TS 可以运行在任何支持 JavaScript 的平台上，并且可以与现有的 JavaScript 代码无缝集成。TS 还具有良好的开发工具支持，例如 Visual Studio Code、WebStorm 等常用的 IDE 都支持 TS 的开发。

TS也可以称为JS的超集，即JS能做到的TS可以做到，JS做不到的TS也可以做到。

TS与JS的区别

二.TS基础类型

1.布尔型(Boolean)

最基本的数据类型，只有简单的true和flase两个值。

let isLogin: boolean = false;
// 编译通过
// 后面约定，未强调编译错误的代码片段，默认为编译通过
 
let isLogin2: boolean = new Boolean(1);
//编译报错
//使用构造函数 Boolean 创造的对象不是布尔值

2.数字(number)

和JS一样，TS中的所有数字都是浮点数，类型都是number

let n1: number = 6;
let n2: number = 0xf00d;// ES6 中的十六进制表示法,会被编译为十进制数字
let n3: number = 0b1010;// ES6 中的二进制表示法,会被编译为十进制数字
let n4: number = 0o744;// ES6 中的八进制表示法,会被编译为十进制数字
let n5: number = NaN;
let n6: number = Infinity;

3.字符串(string)

使用 string表示文本数据类型。和JS一样，可以使用双引号（ "）、单引号（'）和反引号(`)表示字符串

let name: string
name = '234'

4.数组和元组(Turple)

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

// 数组
let arr5:number[]
arr5 = [23,23,4]

// 元组
// 定义了两个number，那么arr6数组只能有两个元素
let arr6:[number,number]
arr6 = [234,235]

5.对象(Object)

let p1:object;//非基础类型,引用类型
p1={name:"karen",age:23}  //{name:"karen",age:23}
p1=[10,20,320]//数组也是特殊的对象 -->打印[10,20,320]
p1={name:'jack',age:18,color:"red"} //{name:'jack',age:18,color:"red"}
// p1="hello" //报错
console.log(p1)
 
let p2:Object;
p2=[10,20]
console.log(p2);//[10,20]

三.TS函数类型

定义：TS定义函数类型时要定义输入参数类型和输出类型
输入参数：参数支持可选参数和默认参数
输出参数：输出可以自动推断，没有返回值时，默认为void类型
函数重载：名称相同但参数不同，可以通过重载支持多种类型

function add(x: number[])：number
function add(x: string[])：string
function add(x: any[]): any{
    if (typeof x[0] === 'string'){
      return x.join()
    
   }
   if (typeof x[0] === 'number'){
       return x.reduce((acc,cur)=> acc+cur)
       }
   }

四.TS接口

定义：接口是为了定义对象类型特点：

可选属性：？
只读属性：readonly
可以描述函数类型
可以描述自定义类型总结：接口非常灵活duck typing

  interface Person{
      name: string;
      sayHello():void;
  }
  
  function fn(per: Person){
      per.sayHello();
  }
  
  fn({name:'xxx', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});

五.TS类

定义：写法和JS差不多，增加了一些定义特点：

增加了public、private、protected修饰符
抽象类：
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
interface约束类，使用implements关键字

class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    say() {
        console.log(`年龄为${this.age}的${this.name}say`)
    }
}
let person: Person = new Person('张三', 18);
person.say()

六.TS 的优缺点

1.优点

灵活：可以将代码自动转换为js代码
兼容性强：可以在任何浏览器和操作系统运行，并不需要浏览器的支持，通过node.js运行即可
方便维护：在ts中的报错在编译时就能发现，不会直接显示到用户页面

2.缺点

不利于前端工程师上手，需要理解接口，枚举等类型的概念
需要多写一些类型的定义
工作量大，和一些库不能完美结合

七. TS声明文件

declare:三方库需要类型声明文件
.d.ts:声明文件定义
@types:三方库TS类型包
tsconfig.json:定义TS的配置

TS可以规范我们的代码，编译阶段发现错误，在原生JS基础上加了一层定义；
ts是js的类型化超集，支持所有js，并在此基础上添加静态类型和面向对象思想。
静态类型，定义之后就不能改变。

深入理解TS | 青训营