一、什么是TypeScript

1.定义

TypeScript是微软开发的自由和开源的编程语言
TypeScript是JavaScript的一个超集，支持ECMAScript标准

2.TS与JS的关系

TypeScript本质上是向JavaScript上添加了可选的静态类型和基于类的面向对象编程在JS基础之上，为JS添加了类型支持。TypeScript=Type+JavaScript

二、TypeScript的基础

1.类型注释

TS中定义变量（常量）可以指定类型
A类型的变量不能保存B类型的数据

//格式：
let 变量名:类型=初始值
//示例：
let age:number=18

2.数据类型

（1）JS已有类型

原始类型：number/string/boolean/null/undefined/symbol
对象类型：object（包括数组，对象，函数等对象）

其中数组有两种写法如下：

//写法一：
let 变量：类型[]=[值1，...]
//写法二：
let 变量:Array<类型>=[值1,...]

（2）TS新增类型

联合类型

由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

//格式：
let 变量：类型1|类型2|类型3...=初始值
//示例：
let arr:(number|string)[]=[1,'a',3,'b']

自定义类型

类型别名：给类型起别名，定义了新类型

//定义：
type 别名=类型
//使用
type s=string //定义
const str1:s='abc'
const str2:string='abc'

函数

格式

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }

示例

// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
  return num1 + num2
}

add（1,'1') // 报错

接口

格式

interface 接口名  {
    属性1: 类型1, 属性2: 类型2,
}

示例

interface IGoodItem  {
    name: string, price: number, func: ()=>string
}


const good1: IGoodItem = {
    name: '手表',
    price: 200,
    func: function() {
        return '看时间'
    }
}

const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

接口和类型的区别：

相同点：都可以给对象指定类型

不同点：

  接口，只能为对象指定类型，并且可以继承
  类型别名，可以为任意类型指定别名

元组

元组是另一种特殊的数组，可以确切地包含多少个元素，并且可以特定索引对应的类型

//示例：
let position: [number, number] = [39.5427, 116.2317]

字面量类型

枚举

它是用来描述一个值，该值只能是一组命名常量的一个

格式

enum 枚举名 { 可取值1,可取值2,.. }

示例

// 定义枚举类型
enum Direction { Up, Down, Left, Right }

// 使用枚举类型
function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

void

当函数满足以下三种情况则没有返回值，使用void类型

无return
有return,但后不接内容
有return undefined

any等

三、TypeScript的进阶

在TypeScript中我们会使用泛型来对函数的相关类型进行约束。

1.什么是泛型

泛型是指在定义函数，接口或类时，可以不预先指定其具体的类型，而在使用的时候再指定类型的一种特性。

2.通俗的理解泛型

使用泛型前：

该print函数只能先定义了传入参数和返回参数的类型后，根据指定类型进行使用。

使用泛型后：

使用了泛型后，该print函数支持任意类型的传入参数和返回参数

3.泛型函数

目标：声明一个函数，接收一个参数，接收什么参数返回什么值

function getValue<T>(value: T): T {
	return value;
}

getValue<string>("hello");
getValue<number>(100);

//  泛型实参可以忽略   你传递的参数的类型就是要传递的泛型的类型
echo("hello")

4.泛型类

目标：通过类创建对象，对象key属性可以是字符串，也可以是数值，对象的value属性可以是字符串也可以是数值

class KeyValuePair<K, V> {
	constructor(public key: K, public value: V){}
}

6.泛型接口

目标：创建fetch方法用于获取数据，当获取用户数据时，fetch方法的返回值类型为用户，当获取产品数据时fetch方法的返回值类型为产品，不论是用户数据还是产品数据，都要被包含在响应对象中

interface MyResponse<T> {
	data: T | null;
}

function fetch<T>(): MyResponse<T> {
	return {data: null};
}

interface User {
	username: string;
}

interface Product {
	title: string;
}

fetch<User>().data?.username;
fetch<Product>().data?.title;

7.泛型约束

泛型约束是指对泛型参数的范围进行约束

// 限制类型 T 的范围  就是说  T  的类型要么是字符串要么是数值  其他的是不可以的
class StringOrNumberArray<T extends string | number> {
	constructor(public collection: T[]) {}
	get(index: number): T {
		return this.collection[index];
	}
}

new StringOrNumberArray<string>(["a", "b"])
new StringOrNumberArray<number>([100, 200])

// 类型  boolean  不满足约束  string | number
// new StringOrNumberArray<boolean>([true, false]);

8.继承泛型类

class Store<T> {
	protected _objects: T[] = [];
	add(obj: T) {
		this._objects.push(obj);
	}
}

interface Product {
	name: string;
	price: number;
}
const store = new Store<Product>();

class CompressibleStore<T> extends Store<T> {}
new CompressibleStore<Product>();

clsaa ProductStore extends Store<Product> {}

9.泛型的基本操作符

typeof：获取类型
keyof：获取所有键
in：遍历枚举类型
T[K]：索引访问
extends：泛型约束

10.泛型的常用工具类型

Partial：将类型属性变为可选
Required：将类型属性变为必选
Readonly：将类型属性变为只读
Pick、Record...

四、TypeScript的声明文件

declare:三方库需要类型声明文件
.d.ts:声明文件定义
@types:三方库TS类型包
tsconfig.json:定义TS的配置

四、TypeScript基础 ｜ 青训营