深入浅出 Typescript ｜青训营TypeScript VS JavaScript TypeScript是Jav

TypeScript VS JavaScript

TypeScript	JavaScript
JavaScript的超集，用于解决大型项目的代码复杂性	一种脚本语言，用于创建动态网页
强类型，支持静态和动态类型	动态弱类型语言
可以在编译期间发现并纠正错误	只能在运行时发现错误
不允许改变变量的数据类型	变量可以被赋值成不同类型

TypeScript基础

基础类型

boolean: 布尔类型，表示逻辑值，可以是 true 或 false
number: 数字类型，表示数值，可以是整数或浮点数
string: 字符串类型，表示文本字符串，可以用单引号或双引号括起来
enum: 枚举类型，定义命名常量集合的数据类型
undefined：表示一个未定义的值
null：表示对象值缺失
any: 任意类型，表示可以是任意类型的值
unknown：描述类型不确定的变量
void: 空类型，表示没有返回值的函数的返回类型
never：无法达到的终点的函数的返回值类型
数组类型[]: 表示一个由同类型元素组成的列表。可以使用泛型表示数组的元素类型，例如 number[] 表示由数字组成的数组
元组类型tuple: 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

函数类型

定义：TypeScript定义函数类型时要定义输入参数类型和输出类型

输入参数：参数支持可选参数和默认参数

输出参数：输出可自动推断，没有返回值，默认void类型

函数重载：名称相同但参数不同，可以通过重载支持多种类型

interface（接口）

定义：接口是为了定义对象类型

特点：

可选属性：？
只读属性：readonly
可以描述函数类型
可以描述自定义属性

总结：接口非常灵活 duck typing

类

定义：写法和JS差不多，增加了一些定义

特点：

增加了public、private、protected 修饰符
抽象类：
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
interface 约束类，使用implements关键字

TypeScript进阶

高级类型

联合类型 |

let num:number | string

num = 8
num = 'eight'

交叉类型 &

interface Person{
	name:string
	age:number
}

type Student = Person & {grade:number}

const stu:Student
stu.age/grade/name

类型断言

非空断言
确定赋值断言

function getLength(arg : number | string): number{
	return arg.length
}

function getLength(arg : number | string): number{
	const str = arg as string
	if(str.length){
		return str.length
	}else{
		const number=arg as number
		return number.toStirng().length
	}
}

类型别名

定义：给类型起个别名

type VS interface：

相同点：都可以定义对象或函数；都允许继承
差异点：interface是TS用来定义对象，type是用来定义别名方便使用；type可以定义基本类型，interface不行；interface可以合并重复声明，type不行

泛型

基本使用

泛型的语法是<>里面写类型参数，一般用T表示

使用时有两种方法指定类型：

定义要使用的类型
通过TS类型推断，自动推导类型

泛型的作用是临时占位，之后通过传来的类型进行推导

基础操作符

typeof：获取类型

interface Person {
    name: string;
    age: number;
}
const sem: Person = { name: "semlinker", age: 30};

type Sem = typeof sem;

keyof：获取所有键

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

type K1 = keyof Person;
type K2 = keyof Person[];

in：遍历枚举类型

type Keys = "a" | "b" | "c"

type Obj = {
    [p in Keys]: any
}

T[K]：索引访问

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

let type1: IPerson['name']
let type2: IPerson['age']

extends：泛型约束

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

loggingIdentity({value: 3})
loggingIdentity({length: 5})

常用工具类型

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

TypeScript实战

声明文件

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

学习心得：

TypeScript与JavaScript各有优势，前者作为JavaScript的超集，专注于解决大型项目的复杂性，提供强类型、静态检查等特性，在大型项目中可带来更好的开发体验和代码质量。相较之下，JavaScript则更适用于动态网页的创建，强调灵活性和快速开发。

深入浅出 Typescript ｜ 青训营