TypeScript学习——语法篇

前言

TypeScript 是微软开发的 JavaScript 的超集，这里说的超集，意思就是 TypeScript 在语法上完全包含 JavaScript。TypeScript 的主要作用是给 JavaScript 赋予强类型的语言环境。TypeScript 相当于在 JavaScript 外面包裹了一层类型系统，这样可以帮助我们开发更健壮的前端应用。

一、基本类型

1、对于TypeScript，首先要了解的是，TypeScript 可以在 JavaScript 的基础上，对变量的数据类型加以限制。TypeScript 中最基本的数据类型包括布尔、数字、字符串、null、undefined，这些都很好理解。在下面的代码中，我们分别定义了这几个数据类型的变量。当修改数据类型时就会报错。

let myName:string = 'Lisa';
let myAge:number=18;
// myAge='20' 类型报错
let isDone:boolean = true
let myAddress: undefined
let timer:null = null;
let me:[string,number] = ['lisa', 18]
// me[0] = 1 类型报错

2、不知道什么类型时，可以使用any作为这个变量的类型。可以用any 标记任何属性，可以修改任何数据，访问任何方法也不会报错。也就是说 在TS中，当你把变量的类型标记为any后，这个变量的使用就和JS没啥区别，错误只会在浏览器里运行的时候才会提示。

let anyThing;
let anyColor:any = 'pink';
anyColor= 123;
console.log(anyColor.a.b.v)

二、enum枚举

3、我们可以使用enum去定义枚举类型，这样可以把类型限制在指定的场景之内（enum类型是对JavaScript标准数据类型的一个补充）。下面的代码中我们可以把颜色限制在green、blue和yellow三个值之内。

enum color {green,blue,yellow}
console.log(color['green'] === 0) // true
console.log(color[0] === 'green') // true
let scores = [color['green'], color['blue'], color['yellow']]

三、基础类型组合新的类型

4、然后我们可以通过学到的这些基础类型，通过组合的方式组合出新的类型，最常见的组合方式 就是使用|来实现类型联合。 course1变量类型为字符串或数字，赋值为这两个类型都不会报错，和可以用来限制变量只能赋值为几个字符串的一个，score的取值只能是代码中三个值之一。

let course1:string|number = '玩转vue';
course1 = 1
// course1 = true 报错
type courseScore = '好' | '非常好' | '嘎嘎好';
let score1:courseScore = '好'
// let score2:courseScore = '一般好' 报错

四、interface接口

5、通过interface接口（此接口跟其他语法不一样）可以定义对象的类型限制。下面代码中定义了http请求的入参类型，姓名时字符串，存款使用number[]语法定义类型为数字组成的数组；头像是string或boolean，通过?设置为可选属性；地址使用readonly设置为只读属性，修改就会报错。

interface 入参类型{
    姓名: string,
    存款: number[],
    头像?:string|boolean,
    readonly address:string
}
let params:入参类型 = {
    姓名: 'Lisa',
    存款: [100,1000],
    头像: false,
    address:'女'
}
params.address = 'xxxxx'

五、函数类型限制

6、然后学一下函数的类型限制。其实函数的定义，参数和返回值本质上也是变量的概念，都可以进行类型的定义。下面的代码中定义了参数x和y是数字，返回值也是数字的add函数，定义好参数和返回值类型，函数的类型自然也就确定了。

// function 函数(参数：参数类型):返回值类型{}
function add(x:number, y:number):number {
    return x + y;
}
add(1,3)

也可以使用变量的方式去定义函数，直接使用(参数类型)=>返回值类型的语法，去定义add1的变量类型，但是这有写出来的代码可读性稍差一些，更建议使用type或者interface关键字去定义函数类型。

let add1:(a:number,b:number)=>number = function(x: number, y: number): number { return x + y;}
type addType = (a:number, b:number)=> number
let add2:addType = function(x:number, y:number):number {
    return x+y;
}

interface addType1 {
    (a:number, b:number):number
}
let add3: addType1 = function(x:number, y:number):number{
    return x + y;
}

如果你的函数本来就支持多个类型的参数，下面的代码中 reverse 函数既支持数字也支持字符串。我们的要求是如果参数是数字，返回值也要是数字，参数是字符串返回值也只能是字符串，所以参数和返回值都用 number|string 就没法精确地限制这个需求。我们需要使用函数重载的方式，定义多个函数的输入值和返回值类型，更精确地限制函数的类型。

function reverse(x:number):number
function reverse(x:string):string
function reverse(x:number|string):number|string|void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''))
    } else if (typeof x === 'string') {

        return x.split('').reverse().join('')
    }
}

总结

TS数字类型有字符串、布尔值、数字等，通过这些基础类型可以组合出复杂的类型组合，并且可通过type和interface关键字定义复杂对象类型和函数的类型。