这是我参与「第五届青训营」笔记创作活动的第6天。

0.前言

之前的想法是跟着课程做笔记，但是发现好像一直在赶些什么一样，对于正在开发的项目也是力不从心的，所以我想在青训营学习其他知识的同时，主要学好TypeScript，并服务于项目，因为我觉得在前端这个开发领域，实践是非常重要的。所以我决定重新系统地学习TypeScript话不多说，开始正题。

1.TypeScript是什么

ts是js的超集，也就是说js有的ts都有，ts与js的关系如下图

TypeScript = Type + JavaScriptts在js基础之上添加了类型支持

let age:number=12;//ts写法，声明变量时要有具体的类型
let age=12;//js写法，没有明确的类型

而TypeScript为什么要为JavaScript添加类型支持呢？其实主要是为了方便

而TypeScript相比于JavaScript有哪些优点呢？

2.体验TypeScript

在体验之前，我们要先安装编译ts的工具包

2.1 TypeScript常用类型

首先先来了解什么是类型注解：例如

let age:number=12;

这里的: number就是类型注解，为age变量添加类型约束，约定age变量的类型是number，换句话说，如果我再给age赋一个字符串，那么就会报错，而且是类型错误。

ts中常用的类可以分为两类

js中已有类型

①原始类型：number/string/boolean/null/underfined/symbol

②对象类型：object（包括数组、函数、对象）

ts新增类型

联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any

每个具体的对象都有自己的类型语法

2.1.1原始类型

let age:number = 12;
let s:symbol = Symbol();

2.1.2数组类型

let numbers:number[] = [1, 2, 3];
let strings:Array<string> = ['1','3','5'];

有一种特殊情况，就是我们确定了所需数组中元素的个数，比如坐标、经纬度...这个时候普通的数组类型由于元素个数不确定而不适用，我们需要用到元组--元祖类型是另一种类型的数组，它确切的知道包含多少个元素，以及特定索引对应的类型

let position:[number,number] = [12,23];

2.1.3联合类型

数组中既可以有number类型，也可以有string类型，竖线链接多个类型，构成联合类型

let arr:(number | string)[] = [1,'a',2,'b'];

2.1.4自定义类型（类型别名）

当同一类型被多次使用时，可以通过类型别名简化该类型的使用

2.1.5函数类型

函数的类型，实际上指的是函数参数和返回值的类型

为函数指定类型的两种方式：

单独指定参数返回值的类型
同时指定参数返回值的类型

单独指定参数和返回值类型

function add(arg1:number,arg2:number):number{//普通表示
    return arg1+arg2;
}
const add = (arg1:number,arg2:number):number=>{
    return arg1+arg2;
}

同时指定参数和返回值类型但这种方式只适用于函数表达式

const add:(arg1:number,arg2:number)=>number=(arg1,arg2)=>{
    return arg1+arg2;
}

如果函数没有返回值，函数的返回值类型是void。

使用函数实现某个功能时，参数可以传也可以不传。在这种情况下，给函数参数指定类型就用到可选参数--在可传可不传的参数名称后面添加问号。

注意，可选参数只能出现在参数列表的最后。也就是说，可选参数后面不能再出现必选参数。

2.1.6对象类型

js中的对象是由属性和方法构成的，而ts中对象的类型就是在描述对象的结构（有什么类型的属性和方法）

对象的属性或方法也可以是可选的，此时就用到了可选属性

可选属性的语法与函数可选参数的语法一致，都使用问号来表示

2.1.7 接口

当一个对象类型被多次使用时，一般会使用接口来描述对象的类型，达到复用的目的

interface IPerson {
    name:string
    age:number
    sayHi():void
}
let person:IPerson = {
    name:'mengww',
    age:20,
    sayHi(){}
}

那么接口和类型别名有什么区别呢？

接口只能为对象指定类型，而类型别名可以为任意类型指定别名

接口的继承

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

interface One {x:number,y:number}
interface Two {x:number,y:number,z:number}
可以直接写成
interface Two extends One {
    z:number
}

从零学TypeScript-01 | 青训营笔记