持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

我们在使用TS时，面对函数和对象有时候挺不好定义的，比如我们想定义几个函数：

const add:(x:number,y:number)=>number = function(x,y) {
    return x+y
}
const reduce:(x:number,y:number)=>number = function(x,y) {
    return x-y;
}
const ride:(x:number,y:number)=>number = function(x,y) {
    return x*y;
}

我们发现他们的参数类型和返回值类型都是相同的，但是我们得重复定义多次。

或者当参数是一个对象时：

function dealData(person:{name:string,age:number}):{name:string,age:number} {
    person.age+=1;
    return person;
}

我们重复写这么多声明比较麻烦，于是TS就有了类型别名和接口来简化。

类型别名

TS中的类型别名就是使用type关键字。

type s = string;
let a:s = 'sdsd';

我们可以用type来给string取一个新的名字s，我们以后再定义变量时就可以使用s来代替string了。

当然type不仅仅可以来声明普通类型，还可以声明常量类型。

type name =  'xiaolei' | 'xiaoxu'
let person:name = 'xiaolei';
person = 'xiaoxu';
person = 'xiao';  //报错：不能将类型“"xiao"”分配给类型“name”

我们将person定义为name类型后，那么person的值就只能是xiaolei和xiaoxu两个值的其中一个了。

同时type还可以定义函数：比如我们简化上面的加减乘函数

type Fn = (x:number,y:number)=>number;
const add:Fn = function(x,y) {
    return x+y
}
const reduce:Fn = function(x,y) {
    return x-y;
}
const ride:Fn = function(x,y) {
    return x*y;
}

此外用来定义对象也是可以的：

type Person = {name:string,age:number};
const p1:Person = {name:'xiaolei',age:18}

还可以定义数组：

type Person = {name:string,age:number}
type data = Person[]
let ps:data = [{name:'xiaolei',age:18},{name:'xiaoxu',age:18}]

定义元组：

type data = [number,string]

映射类型

此外，type可以进行映射：

type Keys = "name" | "sex"
type Person = {
  [Key in Keys]: string //类似 for ... in
}
let p: Person = {
  name: 'xiaoxu'，
  sex: 'man'
}

当然，type声明的代码，在TS编译后就会被删除了。比如我们上面声明的Person被编译后：

type Person = {name:string,age:number};
const p1:Person = {name:'xiaolei',age:18}
---------------------------编译后-------------
var p1 = { name: 'xiaolei', age: 18 };

接口

当然除了使用类型别名外，还有一种方式也可以用来声明类型，那就是接口。

interface InterPerson {
    name:string,
    age:number
}
const p1:InterPerson = {name:'xiaolei',age:18};

接口也会和type一样，在ts编译后就被删除了。

接口一般只能用来定义对象或者class类的类型，而type可以用来定义基本类型、函数、数组、元组、常数、对象，范围要广得多。但是在对象和class中基本都还是使用接口为主。因为接口又继承、实现再配合ts的class可以实现面向对象开发。关于更多的interface的细节可以在class中写写。