前端与TypeScript | 青训营笔记

34 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

什么是TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。从技术上讲TypeScript就是具有静态类型的 JavaScript 。

为什么选择TypeScript

  • 可读性增强
  • 可维护性增强
  • 包含于兼容所有Js特性,支持共存
  • 支持渐进式引入与升级

TypeScript基础类型

类型例子描述
number1, -33, 2.5任意数字
string'hi', "hi",hi任意字符串
booleantrue、false布尔值true或false
字面量其本身限制变量的值就是该字面量的值
any(不建议使用,没啥用)/任意类型
unknown/类型安全的any
void空值(undefined)没有值(或undefined)
never没有值不能是任何值
object{name:'孙悟空'}任意的JS对象
array[1,2,3]任意JS数组
tuple[4,5]元素,TS新增类型,固定长度数组
enumenum{A, B}枚举,TS中新增类型

泛型

泛型在TS中是一个非常重要的属性

基本使用

//普通类型定义
type Cat<T> = { type: T } 
//普通类型使用
const cat: Cat<string> = { type: 'cute' }

//类定义
class Car<T> {
    private type: T;
    constructor(type: T){
        this.type = type;
    }
}
//类使用
const car: Car<number> = new Car<number>(1) //亦可简写为 const car = new Car(1)

//函数定义
function foo<T, U>(value: [T, U]): [U, T] { 
    return [value[1], value[0]]; 
}
// 函数使用 swipe<Cat<string>, Car<number>>([cat, car]) // 亦可简写为 swipe([cat, car])

总的来说,泛型的语法格式如下:
类型名<泛型列表> 具体类型定义

泛型工具

Partial< T >

此工具的作用就是将泛型中全部属性变为可选的。

Record< U,T >

此工具的作用是将 K 中所有属性值转化为 T 类型,我们常用它来申明一个普通 object 对象。

Pick<T, K>

此工具的作用是将 T 类型中的 K 键列表提取出来,生成新的子键值对类型。

Exclude<T, U>

此工具是在 T 类型中,去除 T 类型和 U 类型的交集,返回剩余的部分。

Omit<T, K>

此工具可认为是适用于键值对对象的 Exclude,它会去除类型 T 中包含 K 的键值对。

ReturnType< T >

此工具就是获取 T 类型(函数)对应的返回值类型:

Required< T >

此工具可以将类型 T 中所有的属性变为必选项。

写在结尾

关于TypeScript的知识点还有许多,在日后会继续深入学习的!