详解Vue3.0 前的 TypeScript 最佳入门实践

2020-06-14 06:02:51易采站长站整理

extends
很明显就是ES6里面的类继承,那么
implement
又是做什么的呢?它和
extends
有什么不同?

implement
,实现。与C#或Java里接口的基本作用一样,
TypeScript
也能够用它来明确的强制一个类去符合某种契约

implement基本用法:


interface IDeveloper {
name: string;
age?: number;
}
// OK
class dev implements IDeveloper {
name = 'Alex';
age = 20;
}
// OK
class dev2 implements IDeveloper {
name = 'Alex';
}
// Error
class dev3 implements IDeveloper {
name = 'Alex';
age = '9';
}

extends
是继承父类,两者其实可以混着用:


class A extends B implements C,D,E

搭配

interface
type
的用法有:

3.5 声明文件与命名空间:

declare
namespace

前面我们讲到Vue项目中的

shims-tsx.d.ts
shims-vue.d.ts
,其初始内容是这样的:


// shims-tsx.d.ts
import Vue, { VNode } from 'vue';

declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any;
}
}
}

// shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}

declare
:当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。

这里列举出几个常用的:

declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare global 扩展全局变量
declare module 扩展模块

namespace
:“内部模块”现在称做“命名空间”

module X {
相当于现在推荐的写法
namespace X {
)

跟其他 JS 库协同

类似模块,同样也可以通过为其他 JS 库使用了命名空间的库创建