【博学谷学习记录】超强总结,用心分享丨前端开发:TypeScript核心(上)

TypeScript核心

1.类型注解

示例代码：

// 约定变量age的类型为number类型
let age: number = 18;
age = 19;

: number 就是类型注解，它为变量提供类型约束。
约定了什么类型，就只能给该变量赋值什么类型的值，否则报错。
而且：约定类型之后，代码的提示也会非常清晰。
错误演示：

let age: number = 18;
// 报错: 不能将类型"string"分配给类型"number"
age = '19';

2.原始类型

TS 常用类型：

JS 已有类型
简单类型，number string boolean null undefined
复杂类型，对象 数组 函数

TS 新增类型
联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等

原始类型：
使用简单，完全按照 JS 的类型来书写即可

let age: number = 18;
let myName: string = '小明';
let isLoading: boolean = false;
let nullValue: null = null;
let underfinedValue: undefined = undefined;

3.数组类型

写法 1：

let numbers: number[] = [1,3,5];

写法 2：

let strings: Array<string> = ['a','b','c'];

推荐使用：
number[] 写法

4.联合类型

数组中有 number 和 string 类型，这个数组的类型如何书写？

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

定义：
类型与类型之间使用 | 连接，代表类型可以是它们当中的其中一种，这种类型叫：联合类型

5.类型别名

示例代码：

// 类型别名： type 类型别名 = 具体类型
type CustomArr = (number | string)[];
let arr: CustomArr = [1,'a',4];

类型别名:
type 类型别名 = 具体类型 基本语法
定义类型别名，遵循大驼峰命名规范，类似于变量
使用类型别名，与类型注解的写法一样即可
使用场景：
当同一类型（复杂）被多次使用时，可以通过类型别名，简化 该类型的使用

type CustomArr = (number | string)[];
let arr: CustomArr = [1,'a',4];
let arr2: CustomArr = [2,'b',8];

6.函数类型

基本使用
给函数指定类型，其实是给 参数 和 返回值 指定类型。

两种写法：
在函数基础上 分别指定 参数和返回值类型
使用类型别名 同时指定 参数和返回值类型

示例代码 1：分别指定

// 函数声明
function add(num1: number,num2:number): number{
	return num1 + num2;
}
// 箭头函数
const add = (num1:number,num2:number): number =>{
	return num1 + num2;
}

示例代码 2：同时指定

type AddFn = (num1:number,num2:number) => number;
const add: AddFn = (num1,num2)=>{
	return num1 + num2;
}

注意： 通过类似箭头函数形式的语法来为函数添加类型，只适用于函数表达式

7.void 类型

如果函数没有返回值，定义函数类型时返回值类型为 void

const say = (): void =>{
	console.log('hi');
};

如果函数没有返回值，且没有定义函数返回值类型的时候，默认是 void

const say = ()=>{
	console.log('hi');
}

注意：
在 JS 中如果没有返回值，默认返回的是 undefined
但是 void 和 undefined 在 TypeScript 中并不是一回事
如果指定返回值类型是 undefined 那返回值必须是 undefined

const add = (): undefined =>{
	return undefined;
}

8.可选参数

如果函数的参数，可以传也可以不传，这种情况就可以使用 可选参数 语法，参数后加 ? 即可

const fn = (n?: number) = >{
	// ..
}
fn();
fn(10);

注意：必选参数不能位于可选参数后(start?: number, end: number)这样是不行的

9.对象类型

基本使用
TS 的对象类型，其实就是描述对象中的 属性 方法 的类型，因为对象是由属性和方法组成的。

// 空对象
let person: {} = {};

// 有属性的对象
let person: {name: string} = {
	name:'同学',
}

// 有属性和方法，一行书写多个属性 ; 分隔
let person: { name: string; sayHi():void } = {
	name: 'jack',
	sayHi(){}
}

// 换行写可以省略 ; 符号
let person: {
	name: string;
	sayHi(): void;
} = {
	name: 'jack',
	sayHi(){}
}

扩展用法
掌握：对象类型中，函数使用箭头函数类型，属性设置可选，使用类型别名。

函数使用箭头函数类型

let person:{
	name:string
	sayHi:()=> void
} = {
	name:'jack',
	sayHi(){}
}

对象属性可选

// 例如: axios({url,method}) 如果是get请求 method 可以省略
const axios = (config: {url:string; method?:string}) => {};

使用类型别名

// {} 会降低代码可阅读性，建议对象使用类型别名
type Config = {
	url: string;
	method?: string
};
const axios = (config:Config) => {};