TypeScript学习笔记

一、TypeScript简介

• 众所周知JavaScript是一门弱类型语言，所谓弱类型语言就是声明变量时不指定数据类型，数据类型根据赋值而变化。比如let a = 5;此时a是number类型，而后我们赋值a = "我真聪明";此时a就变成了string类型。
• JavaScript语言就是非常随性的，我们可能在赋值过程中改变了数据类型，导致运行时报错，而很难排查bug。
• TypeScript就是为了满足JavaScript的这一缺陷，要求我们在声明的时候就指定数据类型，后面写代码过程中如果我们改变数据类型就会立刻报错，提醒我们修改，帮助我们及时发现错误。比如let a: number = 5;此时a是number类型，而后我们赋值a = "我真聪明";就会报错。因为限定了a是number类型，不可以赋值string类型的值。
• TypeScript要学习的就是各种类型。

二、TypeScript基础

1.TypeScript的使用

浏览器只能执行JavaScript，不能执行TypeScript，所以我们需要先把TypeScript代码编译成JavaScript代码。

(1)安装编译TypeScript的包

npm i -g typescript    //安装typescript包
tsc -v    //查看typescript包的版本

我在安装typescript包的时候报错了，原因是没有权限，如果你也遇到这种报错，可以尝试我的解决办法：

① 按下 windows+X 键，选择 Windows终端(管理员) 选项

② 输入以下命令

net user administrator /active:yes    //使用管理员账户
npm i -g typescript    //安装typescript包
tsc -v    //查看typescript包的版本

(2)将TypeScript编译成JavaScript

tsc 文件路径

2.TypeScript的类型

(1)number

let 变量名: number = 数字;    

(2)string

let 变量名: string = 字符串;    

(3)boolean

let 变量名: boolean = true或者false;    

(4)null

let 变量名: null = null;    

(5)undefined

let 变量名: undefined = undefined;    

(6)symbol

let 变量名: symbol = Symbol();    

(7)any
any就是不限制类型，任何类型都可以，不建议所有的都用any，不然TypeScript就失去了意义，变成AnyScript了。但是any存在也是有用处的，在我们暂时不知道类型的时候，可以先用any让代码不报错，等功能实现了明确类型了，再把any改成正确类型。

let 变量名: any = 任何类型的值;    

(8)联合类型
有时候我们想定义一个变量可以是多种类型的，那就可以使用联合类型。联合类型，就是只要是限定的类型中的其中一种就可以。多个类型之间用|隔开即可。

let 变量名: 类型1 |类型2 | 类型3 = 其中一种类型的值;    

像上面这种联合类型的，要是类型过多会导致代码过长，可读性差，于是TypeScript给我们提供了解决办法————类型别名，所谓类型别名，就是用type关键字为多个类型起一个别名，在定义变量时把这个别名当做类型传给变量，提高代码观赏性，还可以复用。别名首字母一般大写。

type 别名 = 类型1 | 类型2| 类型3;
let 变量名: 别名 = 其中一种类型的值;

(9)数组
数组的类型指的是数组里面元素的类型。
① 方式一

let 变量名: 类型[] = [元素1, 元素2, 元素3];

② 方式二

let 变量名: Array<类型> = [元素1, 元素2, 元素3];

其实像Array这种带<>的有专业叫法————泛型，就是把<>里的内容当做参数传入函数，Array<>是TypeScript内置的。

(10)对象
对象的类型指的是对象里面属性的类型。
① 方式一：直接使用

const 对象名: {
    属性1: 类型,
    方法名1(形参1: 类型, 形参2: 类型):返回值类型,
    方法名2: (形参1: 类型, 形参2: 类型) => 返回值类型
} = {
    属性: 值,
    方法名1(形参1, 形参2) {},
    方法名2(形参1, 形参2) {}
}

② 方式二：起别名

type 别名 = {
    属性1: 类型,
    方法名1(形参1: 类型, 形参2: 类型):返回值类型,
    方法名2: (形参1: 类型, 形参2: 类型) => 返回值类型
}
const 对象名 = {
    属性: 值,
    方法名1(形参1, 形参2) {
        return 返回值
    },
    方法名2(形参1, 形参2) {
        return 返回值
    }
}

对象可选属性或者方法，直接在属性名或者方法名后面加?即可

(11)函数
函数类型指的是函数参数和返回值的类型。
①普通函数

function 函数名(形参: 参数类型):返回值类型 {
    return 返回值
}

②箭头函数

const 函数名 = (形参: 参数类型) => 返回值类型 {
    return 返回值
}

注：函数若无返回值可以不写返回值类型，或者写viod表示无返回值

③可选参数
调用参数时，可传可不传的参数，在参数名后面加一个?即可。可选参数必须放在必选参数之后。

const 函数名 = (形参1: 类型, 形参2?: 类型) => 返回值类型 {
    return 返回值
}
const 函数名 = (形参1: 类型, 形参2?: 类型) => 返回值类型 {
    return 返回值
}

④默认参数
调用函数时，没有传的参数使用设置的默认值。默认参数必须放在必选参数之后，且默认参数不能同时是可选参数。

const 函数名 = (形参1: 类型, 形参2: 类型 = 默认值) => 返回值类型 {
    return 返回值
}
const 函数名 = (形参1: 类型, 形参2: 类型 = 默认值) => 返回值类型 {
    return 返回值
}

(12)元组
元组是固定数量的不同类型元素组成的集合，与数组解构相似，但一个数组通常元素类型都是相同的，各元素之间独立，而元组则是由不同类型元素组成的，各元素之间存在紧密联系。简单来说，ts里的元组就是需要挨个元素指定类型的数组。元组的应用，比如经纬度。

const 元组名: [类型1, 类型2] = [元素1, 元素2]

(13)类
①基本写法

class 类名 {
    属性: string;
    constructor(形参: 类型) {};
    方法1(形参: 类型) {};
}
const 实例名 = new 类名(参数);

②类的继承
子类通过super关键字继承父类的属性和方法。

class 父类 {
    属性: string;
    constructor(形参: 类型) {};
    方法1(形参: 类型) {};
}
class 子类 extends 父类 {
    属性: string;
    constructor(形参1: 类型, 形参2: 类型) {
        super(形参1);
        this.属性 = 形参2;
    };
    方法1(形参: 类型) {};
}
const 实例名 = new 类名(参数);

(14)接口interface
接口interface是为对象指定类型的，作用与类型别名type相似。但是interface只能用于为对象指定类型，而type则可以为任何类型指定别名，推荐使用type。
①基本使用

// interface写法
interface 接口名 {
    属性: 类型
    方法(): 返回值类型
}
const 对象名: 接口名 = {};
// type写法
type 类型别名 = {
    属性: 类型
    方法(): 返回值类型
}
const 对象名: 接口名 = {};

interface不写=哦！

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

interface 父接口 {
    属性: 类型
    方法(): 返回值类型
}
interface 子接口 extends 父接口 {};

(15)枚举
枚举就是定义一组标识符，用来描述一个值，这个值可以是这组常量中的任何一个标识符。定义枚举用关键字enum，通过.取值，跟对象类似。

enum 枚举名 {标识符1, 标识符2, 标识符3};

不指定标识符的值时，它的值就是下标

指定了标识符的值时，它的值就是指定的值

如果中间有一个指定了值，那么它后面的标识符的值将在该值的基础上递增，而前面的标识符的值依旧是下标。

(16)字面量类型
具体的字符串也可以作为类型。但是一定要使用const关键字才行哦，因为const关键字定义的是常量不会改变，如果用let关键字定义ts会自动推断为string类型。字面量类型一般配合联合类型一起使用。

const 变量名 = 字符串;

(17)泛型
泛型就是把类型当参数传入到函数中使用，语法是在函数名后通过<>把类型传入函数。

function 函数名<Type>(value: Type):Type {}

像上面这种，因为不能保证value上一定有length属性，发生了报错，我们需要对Type类型进行更详细的规定，保证value上一定有length属性，有两种方法：
①指定更详细的类型

②泛型约束
利用接口继承，将约束的类型写在接口里，由Type继承。

3.TypeScript的类型推断机制

TypeScript有自己的类型推断机制，即使我们不写类型，它也会帮我们自动推断类型。但是类型推断并非百分百准确，有时候TypeScript也很难看出咱们数据的类型，所以建议还是自己写类型。当然，我们可以利用类型推断帮助我们判断类型，不知道定义的变量是啥类型的时候，把鼠标放在变量名上面，TypeScript就会提示我们。

4.TypeScript类型断言

有时候TypeScript也不能明确咱们定义的某个变量的类型，它就会报错，这个时候我们就可以使用as关键字进行类型断言，通俗的讲就是跟TypeScript说“我保证这个变量就是xx类型，就算出bug了也不要你负责，快快闪开”。进行了类型断言，以后该变量出现错误TypeScript也不会报错了，慎用。主要用于我们获取页面某个标签元素的时候。

const 变量名 = 元素 as 类型;