文章目录
- 基础知识
- 基础类型: number, string, boolean, object, array, undefined, void(代表该函数没有返回值)
- unknown
- enum(枚举): 定义一个可枚举的对象
- 联合类型: | (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)
- 交叉类型: & (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)
- any 类型
- null 和 undefined
- null
- undefined
- never类型
- type
- interface:接口,可以描述一个对象或函数
- class 类
- 函数
- 泛型: 不定义为具体类型
- 迭代器和生成器
- 装饰器
- 继承、多态、重载、重写
- 继承
- 多态
- 重载
- 重写
- Record
- Paritial
- Reuqired
- Readonly
- Exclude
- Extract
- in
- TypeScript 编译原理
- 面试题及实战
- 什么是类型推论,以下代码ts推论出的类型是什么
- 1. 你觉得使用ts的好处是什么?
- 2. type 和 interface的异同
- 2.1 都可以描述一个对象或者函数
- 2.2 都允许拓展(extends)
- 2.3 只有type可以做的:声明基本类型别名,联合类型,元组等类型
- 2.4 interface可以多次定义并被视为合并所有声明成员,type不支持
- 2.5 type能使用in关键字生成映射类型,interface不行
- 3. 如何基于一个已有类型, 扩展出一个大部分内容相似, 但是有部分区别的类型?
- 4. 什么是泛型, 泛型的具体使用?
- 5. 写一个计算时间的装饰器
- 6. 写一个缓存的装饰器
- 7. 实现一个路由跳转 通过ts约束参数的routeHelper
- 8. 实现一个基于ts和事件模式的countdown基础类
- 使用
- 9. npm install一个模块,都发生了什么
- 10. eventemitter3
执行ts文件命令:
tsc 文件.ts
基础知识
基础类型: number, string, boolean, object, array, undefined, void(代表该函数没有返回值)
类型 | 关键字 | 描述 |
---|---|---|
任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。能不用any就不用any。 |
数字类型 | number | 双精度64位浮点值, 它可以用来表示整数和分数:let num: number = 666; |
字符串类型 | string | let str: string = '呀哈哈'; |
布尔类型 | boolean | let flag: boolean = true; |
数组类型 | 无 | 声明变量为数组 在元素类型后面加[]: let arr: number[] = [1,2]; , 或使用数组泛行: let arr:Array<number> = [1,2]; |
元组 | 无 | 元组类型用来表示已知元素数量和类型的数组, 各元素的类型不必相同, 对应位置的类型需要相同: let x:[string,number]; 正确: x = ['呀哈哈', 2]; 错误: x = [2, '呀哈哈']; |
枚举 | enum | 枚举类型用于定义数值集合 enum Color {Red, Green, Blue}; let c : Color = Color.Blue; console.log(c); // 2 |
void | void | 用于标识方法返回值的类型, 表示该方法没有返回值,不返回或返回undefined function hello(): void{ alert('Hello World'); } 。常用于表示函数没有返回值。 |
null | null | 表示对象值缺失 |
undefined | undefined | 用于初始化变量为一个未定义的值 |
never | never | never是其他类型(包括 null 和 undefined) 的子类型, 代表从不会出现的值.对于函数而已never表示函数用于执行不到返回值哪一步(抛出异常或死循环)的返回值类型。常用于构造条件类型来组合出更灵活的类型定义。 |
unknown | unknown | 和any类型,但使用前必须进行断言或守卫。声明时如果不确定具体类型则可以使用,在使用时用类型断言或类型守卫进行类型收缩。 |
unknown
let e : unknown = '123';
if(typeof e == 'string'){
e = 111;
}else{
e = 123;
}
console.log("🚀 ~ e:", e) // 111
console.log("🚀 ~ e type:", typeof e) // number
enum(枚举): 定义一个可枚举的对象
数字枚举的声明可以分为两大类:带有初始化器和不带初始化器
- 不带初始化器,枚举成员默认从 0 开始,依次递增
- 带有初始化器,可以分为两种
- 使用初始化器并指定初始化的常数,未使用初始化器的成员取值是在上一个成员的基础上+1
- 使用初始化器并初始化值是对已经声明的枚举的枚举成员的引用
const Enum1 = {
'RUN':'run', // 0
'EAT':'eat', // 1
}
enum Enum2 {
'RUN',// 默认 RUN = 0
'EAT', // 默认 EAT = 1
'YHH' = 10,
'YHH2', // 11
'ABC' = 'abc', // 使用 '=' 复制
'YHH3', // 没有这个属性
}
// 使用初始化器并初始化值是对已经声明的枚举的枚举成员的引用
enum Enum3 {
one: Enum2.YHH, // 10
two, // 11
}
// 使用
const eat = Enum2.EAT;
const getValue = () => {
return 0
}
enum List {
A = getValue(),
B = 2, // 此处必须要初始化值,不然编译不通过
C
}
console.log(List.A) // 0
console.log(List.B) // 2
console.log(List.C) // 3
联合类型: | (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)
交叉类型: & (联合类型一次只能一种类型;而交叉类型每次都是多个类型的合并类型。)
any 类型
任意值是 typescript 针对编程时类型不明确的变量使用的一种数据类型. 常用于以下三种情况
// 变量的值会动态改变时, 比如来着用户的输入, 任意值类型可以让这些变量跳过编译阶段的类型检查
let x: any = 1;
x = 'yhh';
x = false;
// 改写现有代码时, 任意值允许在编译时可选择地包含或移除类型检查
let x: any = 4;
x.isEmpty(); // 正确, isEmpty方法在运行时可能存在, 但这里并不会检查
x.toFixed(); // 正确
// 定义存储各种类型数据的数组时
ler arrayList: any[] = [1,false,'fine'];
arratList[1] = 100;
null 和 undefined
null
null
在 JavaScript
中 表示’什么都没有’.
null
是一个只有一个值的特殊类型, 表示一个空对象引用.
用 typeof
检测 null
返回是 object
.
undefined
undefined
在 javascript
中是一个没有设置值的变量.
typeof
一个没有值的变量会返回 undefined
.
Null
和 Undefined
是其他任何类型(包括void
)的子类型. 可以赋值给其他类型, 比如数字类型, 赋值后的类型会变成 null
或 undefined
.
在 typescript
中启用严格的空检验(--strictnullChecks
)特性, 就可以使 null
和 undefined
只能被赋值给 void
或本身对应的类型.
// 启用 --strictnullChecks
let x : number;
x = 1;
x = undefined; // 错误, 因为 x 只能是数字类型
x = null; // 错误
// 如果一个类型可能出现 null 或 undefined, 可以使用 | 类支持多中类型
// 启用 --strictnullChecks
let x : number | null | undefined;
x = 1;
x = undefined; // 正确
x = null; // 正确
never类型
never
是其他类型(包括null
和undefined
)的子类型, 代表从不会出现的值. 这意味着声明never
类型的变量只能被never
类型所赋值, 在函数中通常表现为抛出异常或无法执行到终止点.
let x : never;
let y : number;
x = 123; // 错误, 数字类型不可转为 never 类型
// 正确, never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception') })();
// 正确, never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception') })();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message:string): never{
throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到终止点的情况
function loop(): never{
while (true){}
}
type
type Action = 'eat' | 'run';
// 声明 a 变量类型为 Action, 可选值为:'eat', 'run'
const a:Action = 'eat';
interface:接口,可以描述一个对象或函数
interfact object 对象类型
// interface object对象类型
interface User{
name: string,
age?: number, // 可以定义,可以不定义,非强制的属性
// readonly id: number
}
// 定义axios.post 返回值类型
axios.post<User>().then();
function printUser(user: User): void{
console.log("🚀 ~ printUser ~ user.name:", user.name)
console.log("🚀 ~ printUser ~ user.age:", user.age)
}
const user1 : User = {
name: "张三",
age: 18
}
printUser(user1);
interface function 函数类型
interface UserFun{
( name: string , age: number ): void;
}
const myFunction: UserFun = (name, age)=>{
}
interface array可索引类型
// 可索引类型
interface StringArray {
// 定义索引key为number, 索引值为string
[index: number]: string;
}
let arr1 : StringArray;
arr1 = ["1","2","3"];
console.log("🚀 ~ arr1:", arr1)
let arr2 : StringArray;
arr2 = {1: '呀哈哈', 2: '18'};
console.log("🚀 ~ arr2:", arr2)
class 类
函数
泛型: 不定义为具体类型
// 泛型: 不定义为具体类型
// T: 可以是任意类型,可以理解为占位符,也可以继承接口
function funcT<T>(arg: T): T{
return arg;
}
funcT('呀哈哈');
funcT(19);
funcT({name:'呀哈哈'});
funcT({age:18});
// 如 以下func1、func2可以统一使用funcT来实现
function func1(arg: string): string{
return arg;
}
function func2(arg: number): number{
return arg;
}
// T extends User: T必须继承User
function funcTE<T extends User>(arg: T): T{
return arg;
}
funcTE({age:18, name: '呀哈哈'});
迭代器和生成器
装饰器
执行顺序:
1、有多个参数装饰器时,从最后一个参数一次向前执行
2、方法和方法参数中参数装饰器先执行
3、类装饰器总是最后执行
4、方法和属性装饰器,谁在前面谁先执行,因为参数属于方法一部分,所以参数会一直紧紧挨着方法执行
类装饰器
function Log(target: any){
console.log(target);
console.log('in log decorator');
}
@Log
class A{
constructor(){
console.log('constructor');
}
}
new A();
继承、多态、重载、重写
继承
有时候我们定义的泛型不想过于灵活或者说想继承某些类等,可以通过 extends 关键字添加泛型约束。
interface ILengthwise {
length: number;
}
function loggingIdentity<T extends ILengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
loggingIdentity(3);
loggingIdentity({length: 10, value: 3});
多态
指允许一个接口表示多种形态,多态允许一个类实例的对象使用相同的方法名,具有不同的表现行为。在TypeScript中,多态通常是通过类的继承和子类重写父类的方法来实现的。
class Animal {
makeSound() {
console.log("Some generic animal sound");
}
}
class Dog extends Animal {
makeSound() {
console.log("Woof!");
}
}
let animal = new Animal();
let dog = new Dog();
animal.makeSound(); // 输出:Some generic animal sound
dog.makeSound(); // 输出:Woof!
重载
指允许一个函数接受不同数量或类型的参数,并执行不同的操作。在TypeScript中,通过为同名函数定义不同的函数签名来实现重载。
// 重载示例
function overload(a: number, b: number): number;
function overload(a: string, b: string): string;
function overload(a: any, b: any): any {
if (typeof a === "string" || typeof b === "string") {
return a.toString() + b.toString();
}
return a + b;
}
console.log(overload(1, 2)); // 输出:3
console.log(overload("Hello", "World")); // 输出:HelloWorld
重写
指子类重新定义了父类的方法,以改变(重写)其行为。在TypeScript中,子类可以通过使用super关键字来调用父类的方法,并在此基础上添加或修改自己的实现。
class Printer {
print(s: string) {
console.log('Printer: ' + s);
}
}
class ColorPrinter extends Printer {
print(s: string, color: string) {
console.log('ColorPrinter: ' + s + ' in ' + color);
}
}
let printer = new Printer();
let colorPrinter = new ColorPrinter();
printer.print('Hello'); // 输出:Printer: Hello
colorPrinter.print('World', 'blue'); // 输出:ColorPrinter: World in blue
Record
Record<K extends keyof any, T> 的作用是将 K 中所有的属性的值转化为 T 类型。
interface PageInfo {
title: string;
}
type Page = "home" | "about" | "contact";
const x: Record<Page, PageInfo> = {
about: { title: "about" },
contact: { title: "contact" },
home: { title: "home" }
};
Paritial
Partial 的作用就是将某个类型里的属性全部变为可选项 ?。
Reuqired
Required 的作用就是将某个类型里的属性全部变为必选项。
Readonly
Readonly 的作用是将某个类型所有属性变为只读属性,也就意味着这些属性不能被重新赋值。
Exclude
Exclude<T, U> 的作用是将某个类型中属于另一个的类型移除掉。
type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
Extract
Extract<T, U> 的作用是从 T 中提取出 U。
type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () => void
in
in 用来遍历枚举类型:
type Keys = "a" | "b" | "c"
type Obj = {
[p in Keys]: any
} // -> { a: any, b: any, c: any }
TypeScript 编译原理
Scanner 扫描仪,Parser 解析器,Binder 绑定器,Checker 检查器,Emitter 发射器
面试题及实战
什么是类型推论,以下代码ts推论出的类型是什么
1、类型推论:指在编写TypeScript代码时,即使没有明确指定变量的类型,编译器也能根据上下文推断出变量的类型。这种类型推断机制使得TypeScript代码更加简洁,减少了需要显式声明类型的需要。
例如,如果声明一个变量但没有为其赋值,TypeScript会将其类型推断为any类型。但如果为变量赋了值,TypeScript会根据赋的值推断出更具体的类型,如字符串、数字等。这种类型推断的过程发生在初始化变量、设置默认参数值、决定函数返回值时,以及在需要确定变量类型的其他情况下。
let a = 1024; // number
let b = '1024'; // string
const c = 'yhh'; // yhh, 使用const定义,会把该常量的类型进行收缩,收缩到具体的字面类型(这个类型只表示一个值)
let d = [true, false, true]; // boolean[]
let e = {name: 'yhh'}; // object
let f = null; // any, 类型拓宽
可赋值性:数组,布尔,数字,对象,函数,类,字符串,字面量类型,满足以下任一条件时,A类型可以赋值给B类型:
1、A是B的子类型
2、A是any的类型
规则2是规则1的例外
let aa = 1024;
let aa1 : number = 1024;
aa = aa1;
aa1 = aa;
let bb : string = 'bb';
let bb1 : string | number = 'bb1';
bb = bb1;
bb1 = bb;
bb1 = 2;
// bb = bb1; // 不符合规则
let i : 3 = 3;
// i = 4; // 不符合,i只能是3
let j = [1,2,3];
j.push(4);
// j.push('5'); // 不符合,j只能是number类型
// any类型可以赋值任何类型
let k : any = 1;
k = '1';
k = {name: 'yhh'};
k = null;
k = undefined;
k = 1;
let n = []; // never[]
// n.push(1); // never类型不能push任何值
let m; // any
m = []; // any
m.push(1); // any类型可以push任何值
2、类型断言:可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型
语法格式:<类型>值或 值 as 类型
在 tsx 语法(React 的 jsx 语法的 ts 版)中必须使用值 as 类型。
以下写法在编译时不会报错。但在运行时会报错,因为123为number,不用slice。
因此类型断言尽量避免使用,只在明确知道类型时可以使用。
function formatInput(input: string):string{
return input.slice(0,10);
}
function getUserInput(): string | number{
return 123;
}
let input = getUserInput();
formatInput(input as string);
formatInput(<string>input);
1. 你觉得使用ts的好处是什么?
1、TypeScript是JavaScript的加强版,它给JavaScript添加了可选的静态类型和基于类的面向对象编程,它拓展了JavaScript的语法。所以ts的功能比js只多不少.
2、Typescript 是纯面向对象的编程语言,包含类和接口的概念.
3、TS 在开发时就能给出编译错误, 而 JS 错误则需要在运行时才能暴露。
4、可以明确知道数据的类型。代码可读性极强,几乎每个人都能理解。
5、ts中有很多很方便的特性, 比如可选链.
2. type 和 interface的异同
重点:用interface描述数据结构,用type描述类型
2.1 都可以描述一个对象或者函数
interface User {
name: string
age: number
}
interface SetUser {
(name: string, age: number): void;
}
type User = {
name: string
age: number
};
type SetUser = (name: string, age: number)=> void;
2.2 都允许拓展(extends)
interface 和 type 都可以拓展,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多,但是两者语法不同。
// interface extends interface
interface Name {
name: string;
}
interface User extends Name {
age: number;
}
// type extends type
type Name = {
name: string;
}
type User = Name & { age: number };
// interface extends type
type Name = {
name: string;
}
interface User extends Name {
age: number;
}
// type extends interface
interface Name {
name: string;
}
type User = Name & {
age: number;
}
2.3 只有type可以做的:声明基本类型别名,联合类型,元组等类型
type 可以声明基本类型别名,联合类型,元组等类型
// 基本类型别名
type Name = string
// 联合类型
interface Dog {
wong();
}
interface Cat {
miao();
}
type Pet = Dog | Cat
// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]
// 当你想获取一个变量的类型时,使用 typeof
let div = document.createElement('div');
type B = typeof div
2.4 interface可以多次定义并被视为合并所有声明成员,type不支持
interface Point {
x: number
}
interface Point {
y: number
}
const point: Point = {x: 1, y: 2};
interface User {
name: string,
age: number
}
interface User{
id: number
}
// 最终合并为
const user: User = {
name: 'yhh',
age: 18,
id: 1
}
2.5 type能使用in关键字生成映射类型,interface不行
type Keys = 'firstname' | 'surname';
type DudeType = {
[key in Keys]: string;
}
const dude: DudeType = {
firstname: 'y',
surname: 'hh'
}
3. 如何基于一个已有类型, 扩展出一个大部分内容相似, 但是有部分区别的类型?
首先可以通过Pick和Omit
interface Test {
name: string;
sex: number;
height: string;
}
type Sex = Pick<Test, 'sex'>;
const a: Sex = { sex: 1 };
type WithoutSex = Omit<Test, 'sex'>;
const b: WithoutSex = { name: '1111', height: 'sss' };
比如Partial, Required.
再者可以通过泛型.
4. 什么是泛型, 泛型的具体使用?
泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,使用时再去指定类型的一种特性。
可以把泛型理解为代表类型的参数
interface Test<T = any> {
userId: T;
}
type TestA = Test<string>;
type TestB = Test<number>;
const a: TestA = {
userId: '111',
};
const b: TestB = {
userId: 2222,
};
5. 写一个计算时间的装饰器
export function before(beforeFn: any) {
return function(target: any, name: any, descriptor: any) {
const oldValue = descriptor.value;
descriptor.value = function() {
beforeFn.apply(this, arguments);
return oldValue.apply(this, arguments);
};
return descriptor;
};
}
export function after(afterFn: any) {
return function(target: any, name: any, descriptor: any) {
const oldValue = descriptor.value;
descriptor.value = function() {
const ret = oldValue.apply(this, arguments);
afterFn.apply(this, arguments);
return ret;
};
return descriptor;
};
}
// 计算时间
export function measure(target: any, name: any, descriptor: any) {
const oldValue = descriptor.value;
descriptor.value = async function() {
const start = Date.now();
const ret = await oldValue.apply(this, arguments);
console.log(`${name}执行耗时 ${Date.now() - start}ms`);
return ret;
};
return descriptor;
}
6. 写一个缓存的装饰器
const cacheMap = new Map();
export function EnableCache(target: any, name: string, descriptor: PropertyDescriptor) {
const val = descriptor.value;
descriptor.value = async function(...args: any) {
const cacheKey = name + JSON.stringify(args);
if (!cacheMap.get(cacheKey)) {
const cacheValue = Promise.resolve(val.apply(this, args)).catch((_) => cacheMap.set(cacheKey, null));
cacheMap.set(cacheKey, cacheValue);
}
return cacheMap.get(cacheKey);
};
return descriptor;
}
7. 实现一个路由跳转 通过ts约束参数的routeHelper
import { Dictionary } from 'vue-router/types/router';
import Router, { RoutePath } from '../router';
export type BaseRouteType = Dictionary<string>;
export interface IndexParam extends BaseRouteType {
name: string;
}
export interface AboutPageParam extends BaseRouteType {
testName: string;
}
export interface UserPageParam extends BaseRouteType {
userId: string;
}
export interface ParamsMap {
[RoutePath.Index]: IndexParam;
[RoutePath.About]: AboutPageParam;
[RoutePath.User]: UserPageParam;
}
export class RouterHelper {
public static replace<T extends RoutePath>(routePath: T, params: ParamsMap[T]) {
Router.replace({
path: routePath,
query: params,
});
}
public static push<T extends RoutePath>(routePath: T, params: ParamsMap[T]) {
Router.push({
path: routePath,
query: params,
});
}
}
8. 实现一个基于ts和事件模式的countdown基础类
import { EventEmitter } from 'eventemitter3';
export interface RemainTimeData {
/** 天数 */
days: number;
/**
* 小时数
*/
hours: number;
/**
* 分钟数
*/
minutes: number;
/**
* 秒数
*/
seconds: number;
/**
* 毫秒数
*/
count: number;
}
export type CountdownCallback = (remainTimeData: RemainTimeData, remainTime: number) => void;
enum CountdownStatus {
running,
paused,
stoped,
}
// 练习
interface User {
name: string
age: number
}
function test<T extends User>(params: T): T{
return params
}
test({name:'1',age:1});
export enum CountdownEventName {
START = 'start',
STOP = 'stop',
RUNNING = 'running',
}
interface CountdownEventMap {
[CountdownEventName.START]: [];
[CountdownEventName.STOP]: [];
[CountdownEventName.RUNNING]: [RemainTimeData, number];
}
export function fillZero(num: number) {
return `0${num}`.slice(-2);
}
export class Countdown extends EventEmitter<CountdownEventMap> {
private static COUNT_IN_MILLISECOND: number = 1 * 100;
private static SECOND_IN_MILLISECOND: number = 10 * Countdown.COUNT_IN_MILLISECOND;
private static MINUTE_IN_MILLISECOND: number = 60 * Countdown.SECOND_IN_MILLISECOND;
private static HOUR_IN_MILLISECOND: number = 60 * Countdown.MINUTE_IN_MILLISECOND;
private static DAY_IN_MILLISECOND: number = 24 * Countdown.HOUR_IN_MILLISECOND;
private endTime: number;
private remainTime: number = 0;
private status: CountdownStatus = CountdownStatus.stoped;
private step: number;
constructor(endTime: number, step: number = 1e3) {
super();
this.endTime = endTime;
this.step = step;
this.start();
}
public start() {
this.emit(CountdownEventName.START);
this.status = CountdownStatus.running;
this.countdown();
}
public stop() {
this.emit(CountdownEventName.STOP);
this.status = CountdownStatus.stoped;
}
private countdown() {
if (this.status !== CountdownStatus.running) {
return;
}
this.remainTime = Math.max(this.endTime - Date.now(), 0);
this.emit(CountdownEventName.RUNNING, this.parseRemainTime(this.remainTime), this.remainTime);
if (this.remainTime > 0) {
setTimeout(() => this.countdown(), this.step);
} else {
this.stop();
}
}
private parseRemainTime(remainTime: number): RemainTimeData {
let time = remainTime;
const days = Math.floor(time / Countdown.DAY_IN_MILLISECOND);
time = time % Countdown.DAY_IN_MILLISECOND;
const hours = Math.floor(time / Countdown.HOUR_IN_MILLISECOND);
time = time % Countdown.HOUR_IN_MILLISECOND;
const minutes = Math.floor(time / Countdown.MINUTE_IN_MILLISECOND);
time = time % Countdown.MINUTE_IN_MILLISECOND;
const seconds = Math.floor(time / Countdown.SECOND_IN_MILLISECOND);
time = time % Countdown.SECOND_IN_MILLISECOND;
const count = Math.floor(time / Countdown.COUNT_IN_MILLISECOND);
return {
days,
hours,
minutes,
seconds,
count,
};
}
}
使用
<template>
<div class="home" @click="toAboutPage">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<div>
倒计时:{{timeDisplay}}
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '../components/HelloWorld.vue';
import { RouterHelper } from '../lib/routerHelper';
import { Countdown, CountdownEventName, fillZero } from '../lib/countdown';
import { RoutePath } from '../router';
import { measure } from '../decorator';
@Component({
components: {
HelloWorld,
},
})
export default class Home extends Vue {
public timeDisplay: string = '';
@measure
public toAboutPage() {
RouterHelper.push(RoutePath.About, { testName: '1111' });
}
public created() {
const countdown = new Countdown(Date.now() + 60 * 60 * 1000, 10);
countdown.on(CountdownEventName.RUNNING, (remainTimeData) => {
const { hours, minutes, seconds, count} = remainTimeData;
this.timeDisplay = [hours, minutes, seconds, count].map(fillZero).join(':');
});
}
}
</script>
9. npm install一个模块,都发生了什么
npm install命令输入 > 检查node_modules目录下是否存在指定的依赖 > 如果已经存在则不必重新安装 > 若不存在,继续下面的步骤 > 向 registry(本地电脑的.npmrc文件里有对应的配置地址)查询模块压缩包的网址 > 下载压缩包,存放到根目录里的.npm目录里 > 解压压缩包到当前项目的node_modules目录中。
10. eventemitter3
TypeScript 编译器提供了两个发射器:
emitter.ts: 它是 TS -> JavaScript 的发射器
declarationEmitter.ts: 用于为 TypeScript 源文件(.ts) 创建声明文件