TypeScript ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第2天主要记录了什么是TypeScrip

这是我参与「第四届青训营」笔记创作活动的第2天

一、什么是TypeScript?

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。

二、TypeScript和JavaScript的相同点和不同点？

TypeScript和JavaScript都是弱类型语言，不同的是：TypeScript是静态类型，JavaScript是动态类型。

三、TypeScript的优缺点？

(1) 优点

增加了代码的可读性和可维护性
其非常包容
TypeScript 拥有活跃的社区

(2) 缺点

有一定的学习难度，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类（Enums）等前端工程师可能不是很熟悉的概念
短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本
集成到构建流程需要一些工作量
可能和一些库结合的不是很完美

四、TypeScript基本语法

(1) 基础数据类型

// 字符串const q = 'string';	// 字符串const q: string = 'string';
// 数字const w = 1;	// 数字const w: number = 1;
// 布尔值const e = true;	// 布尔值const e: boolean = true;
// nullconst r = null;	// nullconst r: null = null;
// undefinedconst t = undefined;	// undefinedconst t: undefined = undefined;

(2) 对象类型


const bytedancer: IBytedancer = {

    jobId: 9303245,

    name: 'Lin',

    sex: 'man',

    age: 28,

    hobby: 'swimming',

}

interface IBytedancer {

    // 只读属性：约束属性不可在对象初始化外赋值

    readonly jobId: number;

    name: string;

    sex: 'man' | 'woman' | 'other';

    age: number;

    // 可选属性：定义该属性可以不存在

    hobby?: string;

    // 任意属性：约束所有对象属性都必须是该属性的子类型

    [key: string]: any;

(3) 函数类型

//1
function add(x, y) {
    return x + y;
}
const mult = (x, y) => x * y;

//2
interface IMult {
    (x: number, y: number): number;
}
const mult:IMult = (x, y) => x * y;

//3
function add(x: number, y: number): number {
    return x + y;
}
const mult: (x: number, y: number) => number = (x, y) => x * y

(4) 数组类型

// 「类型＋方括号」表示
type IArr1 = number[];

// 泛型表示
type IArr2 = Array<string | number | Record<string, number>>;

// 元祖表示
type IArr3 = [number, number, string, string];

// 接口表示
interface IArr4 {
    [key: number]: any;
}

const arr1: IArr1 = [1, 2, 3, 4, 5, 6];

const arr2: IArr2 = [1, 2, '3', '4', { a: 1 }];

const arr3: IArr3 = [1, 2, '3', '4'];

const arr4: IArr4 = ['string', () => null, {}, []];

(5) 类型别名&类型断言

//通过type关键字定义了I0bjArr的别名类型
type IObjArr = Array<{
    key: string;[objkey: string]: any;
}>
function keyBy<T extends IObjArr>(objArr: Array<T>) {
    // 未指定类型时，result类型为｛｝
    const result = objArr.reduce((res, val, key) => { res[key] = val; return res; }, {});
    // 通过as关键字，断言result类型为正确类型
    return result as Record<string, T>;
}

五、高级类型

(1) 联合/交叉类型

联合类型：IA|IB;联合类型表示一个值可以是几种类型之一

const bookList = [{
    author: 'xiaoming',
    type: 'history',
    range: '2001-2021',
}, {
    author: 'xiaoli',
    type: 'story',
    theme: 'love',
}]

交叉类型：IA&IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

type IBookList = Array<{
    author: string;
} & ({
    type: 'history'; range: string;
} | {
    type: 'story'; theme: string;
})>

(2) 类型保护与类型守卫

interface IA { a: 1, al: 2 }
interface IB { b: 1, b1: 2 }

//类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域

function getIsIA(arg: IA | IB): arg is IA {
    return ! !(arg as IA).a;
}

function log2(arg: IA | IB) {
    if (getIsIA(arg)) {
        console.log(arg.al)
    } else {
        console.log(arg.b1);
    }
}

TypeScript ｜ 青训营笔记