TypeScript

TypeScript快速上手

想使用 TypeScript ，需要先安装 Typescript ，安装命令（全局）：

npm i typescript -g

TypeScript是渐进式的，无需懂TypeScript的语法，也可以使用，书写完代码，讲 *.ts 文件编译成普通能识别的 *.js 文件命令：

tsc hello.ts

原始数据类型

const a: string = 'a';
const b: number = 1; // NaN Infinite
const c: boolean = true; // false
const d: null = null;
const f: undefined = undefined;
const g: void = undefined;
// 联合类型
let a: number | string;

unknown & any

let a: any;
let b: string;
// 将一个any类型赋值给其他类型，允许赋值
b = a; // √
let c: unknown;
c = 'asdasd';
// unknown类型不能赋值给其他类型
b = c; // ×
// 如果就想要把c赋值给b，需要用到以下方式
// 第一种
if(typeof c === "string") b = c
// 第二种，类型断言 (<类型>变量) 就相当于 (变量 as 类型)
b = <string>c
b = c as string

TypeScript中object类型

在 typescript 中，定义变量为 object 不仅仅是对象，它表示除原始数据类型的数据，例如函数、数组等

const obj1: object = () => {};
const obj2: object = [];
const obj3: object = {};

而在定义真正对象的时候，可以使用 字面量 方式或 接口 的方式

const obj: {
    age: number;
} = {
    age: 18
};

数组类型

定义一个变量为数组类型，有两种方式

const arr1: Array<number> = [1, 2, 3];
const arr2: number[] = [1, 2, 3];

// demo
function sum(...args: number[]) {
    return args.reduce((prev, current) => prev + current, 0);
}
sum(1, 2, 3);

元组类型

const user: [string, number] = ['Joe', 18];
const [_name, _age] = user;

// demo
const obj = Object.entries({
    name: 'Joe',
    age: 18
});
console.log(obj); // obj返回的就是元组类型

枚举类型

定义一个枚举使用 enum 关键字，定义后不可以在修改

enum STATUS {
    SUCCESS = 0,
    FAIL = 1,
    UNKNOW = 3
}
console.log(STATUS.SUCCESS);

上方这种方式编译后，会将 STATUS 编译成一个变量，可能会影响到代码的使用，如果不想编译成常量，需要再 enum 前面加上 const 关键字

const enum STATUS {
    SUCCESS = 0,
    FAIL = 1,
    UNKNOW = 3
}
console.log(STATUS.SUCCESS);

函数类型

1、函数声明式， ? 表示该值是可有可无的

function fn1(a: number, b?: number): number {
    return 1;
}
fn1(1);

2、函数表达式

const fn2 = function (...args: number[]): number {
    return 1;
};
fn2();

3、没有返回值

function fn3() :void {}
fn3();

任意类型

function stringify(val: any): any {
    return JSON.stringify(val);
}
stringify(true);

类型断言

类型断言有两种方式，第一种方式是采用 as 关键字

let _el = document.querySelector('.img');
let el = _el as HTMLImageElement;
el.width = 100;

第二种方式

let _el = <HTMLImageElement>document.querySelector('.img');
_el.width = 1;

接口

接口的基本使用

interface Post {
    title: string;
    content: string;
}
function getDetail(post: Post) {
    console.log(post.title);
    console.log(post.content);
}
getDetail({
    title: '1',
    content: 'aaa'
});

接口可选属性

interface Post {
    title: string;
    content: string;
    summary?: string;
}
const obj: Post = {
    title: '11',
    content: 'asdasd'
};

接口的动态属性

interface Post {
    title: string;
    content: string;
    summary?: string;
    [key: string]: number | string;
}
const obj: Post = {
    title: '11',
    content: 'asdasd',
    test: 1
};

类

class User {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
    sayHi(msg: string): void {
        console.log(`i am ${this.name}`);
    }
}

类里面的修饰符

class User {
    // 默认为public
    public name: string;
    // 只允许在当前类访问
    private age: number;
    // 只允许在当前和子类访问
    protected sex: boolean;
    // 属性只读，定义后，不能再修改
    readonly hobby: string = 'Rap';
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
        this.sex = true;
    }
    sayHi(msg: string): void {
        console.log(`i am ${this.name}`);
    }
}
const Tom = new User('Tom', 18);

类与接口

interface Eat {
    eat(food: string): void;
}
interface Run {
    run(): void;
}
// Person去实现 Eat 和 Run 接口
class Person implements Eat, Run {
    eat(food: string): void {}
    run() {}
}
class Animal implements Eat {
    eat() {}
}

抽象类

abstract class Animal {
    eat(food: string): void {}
    abstract run(): void;
}
class Dog extends Animal {
    run() {}
}
// dog会有父类的eat方法，也会有自身的run方法
const dog = new Dog();

泛型

在定义时，不去指定具体的类型，在调用时，再把类型传递过去

// 实现生成数字类型的数组
function createNumberArray(length: number, value: number): number[] {
    return Array<number>(length).fill(value);
}
createNumberArray(3, 1);

// 实现生成字符串类型的数组
function createStringArray(length: number, value: string): string[] {
    return Array<string>(length).fill(value);
}
createStringArray(3, '');

// 利用泛型，根据传递的值，去实现不同的返回类型
function createArray<T>(length: number, value: T): T[] {
    return Array<T>(length).fill(value);
}
createArray(3, 1);
createArray(3, '');

类型声明

有时候引入的第三方模块，没有使用类型定义，此时就需要自己去定义类型

import { camelCase } from 'lodash';
declare function camelCase(input: string): string;
const str = camelCase('asdJdf');