TypeScript基础学习

Posted 2021-06-30 十九万里

最终还是没有逃过ts的魔爪，哈哈哈也不能说魔爪，工作这段时间，感觉每天都在学习新的知识，最近在看源代码的时候看到了部分源码是用ts写的，之前没接触过，今天就来学习一下ts。

文章参考：

TypeScript超详细入门教程

TypeScript 入门教程——菜鸟教程

TypeScript 入门教程-阮一峰

Typescript 和 Javascript之间的区别

上面的教程都写的比较详细了，我就总结部分重要的知识点和我自己的理解
文章主要参考阮一峰老师的教程写的。

一、了解TypeScript

1、 TypeScript是什么

TypeScript 是 javascript 的一个超集，扩展了 JavaScript 的语法。
我们都知道Javascript在声明变量时是没有定义数据类型的，赋值的类型决定了变量的类型。这样的做法在小型的开发环境中是实用的，但随着js的壮大，其实这种不定义数据类型的做法就容易产生一些不可避免的麻烦。当数据类型错误的时候只有在运行的时候才能检查出来。而ts是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检查出数据类型的错误。

关于强类型和弱类型看我上一篇文章：
Flow学习笔记

我在看ts代码的时候发现 大量的ts代码其实是在js的代码上增加了类型注释之后变成的，（这只是一个初学ts者的理解），对js玩家很友好。对js代码有兼容性。

2、TypeScript和javascript的区别

TypeScript 是JavaScript 对象的扩展。

JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将
TypeScript 代码转换为 JavaScript。

TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 中的数据要求带有明确的类型，JavaScript不要求。

TypeScript 为函数提供了缺省参数值。

TypeScript 引入了 JavaScript 中没有的**“类”概念**。

TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

3、TypeScript的优点

1. 静态输入
   静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

2. 大型的开发项目
   有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。

3. 更好的协作
   当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

4. 更强的生产力
   干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

4、TypeScript特性

类型批注和编译时类型检查 ：在编译时批注变量类型

类型推断：ts中没有批注变量类型会自动推断变量的类型

类型擦除：在编译过程中批注的内容和接口会在运行时利用工具擦除

接口：ts中用接口来定义对象类型

枚举：用于取值被限定在一定范围内的场景

Mixin：可以接受任意类型的值

泛型编程：

名字空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突。

元组：元组合并了不同类型的对象，相当于一个可以装不同类型数据的数组。

Await：

二、TypeScript基础知识

1、安装

npm install -g typescript

ts的文件后缀一般就是.ts
用 TypeScript 编写 React 时，文件后缀为 .tsx

编译：

tsc hello.ts
//hello.ts是文件名

2.hellow world ts实例

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

在上面的代码中 ：string 就是我们为person指定的变量的类型。其他语法与js相同。

3、原始数据类型

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt
前几种比较简单我就不详细去说了，我就写一下BigInt

Bigint 任意精度整数
在javaScript中，number可以准确表达的最大数字是2^53没有比这更大的数字,
Number可以表示的最大安全范围是正负2^53 - 1。也就是Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER.BigInt类型出现就可以解决这一问题，比2^53大的数可以使用BigInt类型表示

4、任意值 （any）

any 任意值类型
跟名字一样，any值是对类型不做出确定的值。
any 类型，则允许被赋值为任意类型
我的理解是 一个ts变量被定义为any类型后 。一夜回到解放前，和js一样了。
变量的类型由给他赋值的数据决定。

mix类型：可以接受任意类型的值

注：在ts中 如果一个变量没有被指定类型，那么它默认就是any类型

5、类型推断（Type Inference）

类型推断简单理解说就是在ts的语法中 如果一个变量没有定义类型，会被自动进行类型推断
如果变量没有赋值，那么会被类型推断为any类型

注：如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

6、联合类型（Union Types）

在使用类型检查的时候可以使用多种数据类型，也就是说一个变量可以定义多个数据类型
例如：

let pc： string | number;
pc = one ；
pc = 1 ;

在上面这个例子中 pc这个变量被同时定义为string和number，这就是所谓的联合类型。

联合类型中 数据类型中用 | 隔开

当ts不确定变量是联合类型中的哪个类型时，只能能访问此联合类型的所有类型里共有的属性或方法：
比如上面的例子中
如果我们没有确定pc=one或者pc=1时
使用length属性就会报错，因为length属性不是number的方法
使用string方法时不会报错，因为两者都有string方法。

7、接口（Interfaces）

接口简单来说就是用来描述对象的类型
数据的类型有number null string等数据格式，对象的类型就是用接口来描述的。
这里我借用阮一峰老师的例子：

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

在这个例子中 Person就是我们定义的一个接口。定义了两个变量name和age
这样就比较好理解name和age两个属性都被包含在person这个接口中 调用的时候直接调用person而不是分别去调用每一个属性。
这里要注意几个点：

1、定义的变量属性数量要和接口的保持一致，不能多也不能少

2、接口中可以使用任意属性的方法来定义接口

    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

上面代码中：
使用 [propName: string] 定义了任意属性取 string 类型的值。

3、接口中可以使用readonly定义只读属性

 readonly id: number;

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

8、数组

在ts中 数组有多中定义方式

1、类型 + 方括号」来表示数组：

let fibonacci: number[] = [1, 1, 2, 3, 5];

2、使用数组泛型（Array Generic） Array 来表示数组：

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

3、接口也可以用来描述数组：

nterface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

4、用 any 表示数组中允许出现任意类型：

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

9、函数

ts中的函数 其实就是在js的函数基础上增加类型检查
来看一个ts的函数定义

function sum(x: number, y: number): number {
    return x + y;
}

在这个代码中，给x y sum
分别增加了类型检查，其他没有变化。

注 ：在TS中 =>不是类似于ES6中的箭头函数。是指向的意思
左边是输入类型，需要用括号括起来，右边是输出类型。

ts的函数参数必须和定义的保持一致，不能多也不能少

本节参考：
函数的类型

10、类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。
简单来说就是我们在前面使用any类型后小组值明确他到底是什么类型
语法主要有两种：

值 as 类型   如果是在react中使用 必须使用这个
<类型>值

用途：
1、将一个联合类型断言为其中一个类型
2、将一个父类断言为更加具体的子类
3、将任何一个类型断言为 any

类型断言

这一部分内容比较多 我单独写一篇文章

11、声明文件

这里补充几个概念：

声明语句：在我们使用第三方库的语法时，ts不认识此语法 因此我们要先写出声明语句来标识使用了该第三方库

声明文件：把所有的声明语句放到一个单独的文件中，这个语句就是声明文件。声明文件必需以 .d.ts 为后缀。

第三方声明文件：有一些常用的声明文件已经是写好的，比如jQuery文件。直接下载安装即可

npm install @types/jquery --save-dev

declare var 声明全局变量

declare function 声明全局方法

declare class 声明全局类

declare enum 声明全局枚举类型

declare namespace 声明（含有子属性的）全局对象

interface 和 type 声明全局类型

export 导出变量

export namespace 导出（含有子属性的）对象

export default ES6 默认导出

export = commonjs 导出模块

export as namespace UMD 库声明全局变量

declare global 扩展全局变量

declare module 扩展模块

/// <reference /> 三斜线指令

这块内容也非常多 后续单独补

12、内置对象

在ts中 沿用了js中的内置对象。

ECMAScript 内置对象：
Boolean、Error、Date、RegExp

DOM 和 BOM 内置对象：
Document、htmlElement、Event、NodeList

这些在ts中都是可以直接使用的。