TypeScript

HaoOuBa
2021-04-08 / 6 评论 / 453 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月25日,已超过552天没有更新,若内容或图片失效,请留言反馈。

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');
5

评论 (6)

取消
  1. 头像
    张小龙没
    Windows 10 · Google Chrome

    画图

    回复
  2. 头像
    小黑山
    Android · Google Chrome

    1222

    回复
  3. 头像
    江小白
    Android · QQ Browser

    画图

    回复
  4. 头像
    instagram takipçi satın al
    Windows 10 · Google Chrome

    I don't even know how I ended up here, but I thought this post
    was good. I don't know who you are but definitely you're going
    to a famous blogger if you are not already
    ;) Cheers!

    回复
  5. 头像
    liuxiaobai
    iPhone · QQ Browser

    第一名✌️

    回复
    1. 头像
      HaoOuBa 作者
      Windows 10 · Google Chrome
      @ liuxiaobai

      表情

      回复