带薪学习TS的类型

# TS 相较于 JS的优点

1. TS是静态类型的语言，它在编译时就能发现错误，而js是动态类型的语言，只有在执行的时候才能发现错误减少找bug，改bug的时间，提升开发效率。
2. 程序中任何位置的代码都有代码提示，随时随地的安全感增加了开发体验。
3. 强大的类型系统提升了代码的可维护性，使得重构代码更加容易。
4. TS类型判断机制不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时降低了成本。
5. TS支持最新的ECMAScript语法，优先体验最新的语法。

你好TS

看一段简单的TS代码：

let age: number = 18

这段代码相较于JS多number的类型定义。TS要求对所有声明的变量进行类型定义，这就说明TS是一门强类型的语言。那我们该怎么定义变量的类型呢？不同场景有不同的方式。

TS增加的类型

原始类型

let str: string = 'name'

其他的都一样的写。

数组类型

1.
let arr: number[] = [1,2,3] //数字数组
let bool: boolean[] = [false,true] //布尔数组
2.
let str: Array<string> = ['a','b','c']

联合类型

多种类型定义拼接，不能通过&拼接，因为一个数据不可能同时拥有多种类型。

1.
let arr1: (string | number)[] = [2,3,4,'a']  //有括号：字符串和数字数组
let arr3: number | string[] = 123            //无括号：数字或字符串数组
2.
let arr2: (number | Array<string>)[] = [['a','b','c'],2,6] //嵌套数组

类型别名

定义一个可以复用的类型别名，用在对象身上得注意了，对象中没有你定义的类型数据会报错。

type CustomArray = (number | string)[]
let arr4: CustomArray = [1,2,3]

函数类型（1. 单独指定参数、返回值类型 2. 同时指定）

单独

{}和()中间的是返回值类型定义

function addOne(num1: number,num2: number): number { 
    return num1 + num2
}
const addTwo = (num1: number,num2: number): number=>{
    return num1 + num2
}

同时

const add: (num1:number,num2: number) => number = (num1,num2) =>{
    return num1 + num2
}

函数没有返回值，可以不写void,自定义可选参数

function greet(name: string): void{}
const sayHi = (content: string) =>{} 
                // ts函数参数必须全传，需要自定义可选参数,?需要放在最后面的参数
const println = (name: string,gender?: string):void => {}

函数重载

//定义接受一个参数或三个参数或可接受
function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;

function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {

    if (d !== undefined && y !== undefined) {

        return new Date(y, mOrTimestamp, d);

    } else {

        return new Date(mOrTimestamp);

            }

}

const d1 = makeDate(12345678);
const d2 = makeDate(5, 5, 5);
const d3 = makeDate(2,5) //这里不能确定第二个参数是谁的，报错

Object类型

1. 对象类型，必须指定数据的类型,指定了类型必须定义。

type Person = {
    name: string,
    age: number,
    // sayHi: (content: string)=> void
    sayHi(content: string): void,
    girlFriend?: string  //可选
}

let obj: Person = {
    name:'老六',
    age: 18,
    sayHi(content){
        console.log('学ts');
        
    }
}

obj.girlFriend = '五开人'
console.log(obj);

2. 假如我没有定义obj.gril，但是我去访问它， ts访问不存在的类型会报错。
3. 要增加类型，可以在类型定义里面 girlFriend?: string 。
4. ts就像写注释给编辑器看，不写注释你就不是好的程序员。
5. 有个好处就是会有提示，访问没有的属性也会报错。
6. 定义type可以让我们在编写对象时更简便： let obj2: Person = { }