广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Typescript模块的导入导出与继承方式
  • 343
分享到

Typescript模块的导入导出与继承方式

2024-04-02 19:04:59 343人浏览 泡泡鱼
摘要

目录typescript模块的导入导出与继承导入测试导出测试TypeScript知识点整理TS 和 js 有什么差异TS 数据类型TS 中的类TS 的访问修饰符TS 中的接口 - i

Typescript模块的导入导出与继承

ModA.ts

export let x = 8888;
export let print = function (x){console.log(x);};

ModB.ts

export let x = 8888;
export let print = function (x){console.log(x);};

ModTest.ts

export * as B from "./ModB";
export {H,Hello}  from "./ModB.js";
export {Hello as exp}  from "./ModB.js";

导入测试

//导出变量
export let HeadName = 'Nance';
export let MidName = 'Jone';
export let BothDate = '2020-12-20';
 
let [X,Y,Z]=[0,0,0];
export {X,Y,Z};
 
//导出函数
export function Add(a,b){return a+b;}
 
function Multiply(x,y){return x * y;}
export {Multiply};
 
function a1(a,b){return a+b;}
function b1(a,b){return a-b;};
export {a1,b1};//导出多个函数
 
//函数别名形式导出
export {a1 as ADD_FUNC ,b1 as DEL_FUNC};
 
//默认导出,一个模块只能有一个默认导出,不管是类,方法或者是变量
//export default class a{};//默认导出类a后就不能再默认导出函数,或者默认导出变量
//export default function b(){};
let qq=0;
export default qq; //默认导出不能使用 as 别名导出

导出测试

import {HeadName,MidName,BothDate,X,Y,Z,ADD_FUNC,DEL_FUNC,Add} from "./ExportEx";
export {ADD_FUNC,DEL_FUNC,Add as myAdd} from "./ExportEx";//从导入模块直接导出方法
console.log(HeadName,MidName,BothDate);
console.log(X,Y,Z);
console.log(ADD_FUNC(1,2),DEL_FUNC(3,4));
console.log(Add(5,6));

TypeScript知识点整理

TS 和 JS 有什么差异

JS:动态类型,运行时明确变量的类型,变量的类型由变量的值决定,并跟随值的改变而改变;直接运行在浏览器和 node.js 环境中;弱类型,数据类型可以被忽略的语言。一个变量可以赋不同数据类型的值。

TS:静态类型,声明时确定类型,之后不允许修改;编译运行,始终先编译成 javascript 再运行;强类型,一旦一个变量被指定了某个数据类型,如果不经过强制转换,那么它就永远是这个数据类型了。

TS 数据类型

基本数据类型:string、number、boolean

引用数据类型:数组(number[]、string[]、boolean[]、(number | string | boolean)[])、null、undefined、{ pname: string; page: number }、枚举、void、Object、断言

TS 中的类

类中的实例属性, 需要提前声明,,才能在 constructor 构造函数中进行实例属性的初始化。

存取器的操作:就像操作普通对象一样即可

  • set 方法:负责对内部的私有属性赋值.,同时可以达到对外部数据的拦截作用。
  • get 方法:负责对外提供私有属性的值。

TS 的访问修饰符

  • public:公共的
  • private:私有的,外部类不可访问
  • protected:受保护的,类的内部或子类可访问
  • readonly:只读的

TS 中的接口 - interface

interface 接口,主要描述对象结构,一个对象中应该有什么属性,赋值的时候需要符合接口规范。它主要针对的是对象结构,type关键字也可以描述对象, 除此之外,type 还可以描述基本类型,联合类型等。

// (newName: string) => void: 这就是类型, 对一个函数进行约束.
// 利用接口对函数进行约束, 描述一个函数的结构, 有什么参数, 什么返回值.
interface FunctionType {
  (newName: string, newAge: number, test?: string): void;
}

let setMyName: FunctionType = function (
  name: string,
  age: number,
  a?: string
): void {
  console.log(name + age);
};
setMyName("新名称", 100);

// 利用接口定义类的结构, 对类中的属性和方法进行约束.
interface AnimalType {
  aname: string;
  eat(n: string): void;
}

// implements 表示一个类要实现某个接口, 必须按照接口的要求, 实现这个类的内部结构.
class Animal implements AnimalType {
  aname: string;
  constructor() {
    this.aname = "鸭子";
  }
  eat(a: string): string {
    return "123";
  }
}
let ani = new Animal();
console.log(ani.eat("1"));

泛型

在定义函数function 或者 接口interface 或者 类型type 时,由我们传入指定类型,函数/接口/类型 内部都会根据这个类型做业务处理。简单的说,“泛型就是把类型当成参数”。

// 制作泛型接口, 用T来表示广泛的类型, 就看使用的时候, 传递的是什么类型.
interface PType<T> {
  p: T;
  p1: T;
}

type PTypeOne<T> = {
  p: T;
  p1: T;
};

let pp1: PTypeOne<string> = {
  p: "123",
  p1: "222",
};

let pp2: PType<number> = {
  p: 12,
  p1: 22,
};

let pp3: PType<number[]> = {
  p: [1, 2, 3],
  p1: [4, 5, 6],
};

// 制作泛型函数
function getValue<T>(a: T, b: T): T {
  return (a as any) + (b as any);
}
console.log(getValue<string>("10", "20"));
console.log(getValue<number>(10, 20));

function getResult<T, Y>(a: T, b: Y): any {
  return (a as any) + (b as any);
}
console.log(getResult<string, number>("10", 20));

文件 .d.ts 的作用

全局声明公共的类型,所有的.ts文件默认从这个文件中查找类名名称,.ts不需要单独导入这个文件,.d.ts文件也不需要单独的导出某个类型。

// 对于联合类型比较长的情况,可以通过type关键字,给这个联合类型起个别名(相当于自定义了一种新类型)。重用的时候写起来方便。
type baseTypeArr = (number | string | boolean)[];

// number | string | boolean | number[]: 联合类型,表示当前这个变量,允许接收number/string/boolean/number[]这几个类型中的一个即可。
type baseType = number | string | boolean | number[];

// 对于初始值可能为null/undefined的类型,也使用联合类型约束
declare type dataType = string | undefined;
declare type arrType = number[] | null;

// declare 声明类型 namespace 命名空间 ,每个命名空间内都是独立作用域,其实就是将不同的类型放到各自的模块内,统一管理。
namespace HomeType {
  type homeList = number | string;
}

declare namespace CateType {
  type cateList = number | string;
}

declare namespace CartType {
  type cartList = number | string;
}

// 自定义类型,叫People类型
// psex?: boolean 表示People类型中的psex属性可有可无
type People = {
  page: number;
  pname: string;
  psex?: boolean | undefined;
};

type CommonObject = {
  // [propName: string | number]: string | number | boolean; // [propName: string] 接收任意key,且是字符串。
  [propName: string | number]: any; // any:让一个变量可以是任意类型的值,被any标识的数据,ts会放弃对它的检查,而是直接通过编译,ts失效了。一定是在不确定类型/类型不统一是才使用any。
};

declare interface MyPeople {
  pname: string;
  page: number;
  psex?: boolean;
}

const 和 readonly 的区别

  • const:用于变量,在运行时检查;使用 const 变量保存的数组,可以使用 push、pop 等方法。
  • readonly:用于属性,在编译时检查;使用Readonly Array<number>声明的数组不能使用push,pop等方法。

枚举和常量枚举(const 枚举)的区别

枚举会在编译时被编译成一个对象,可以当作对象使用。

const 枚举会在 TS 编译期间被删除,避免额外的性能消耗。

   // 普通枚举
   enum Witcher {
     Ciri = 'Queen',
     Geralt = 'Geralt of Rivia'
   }
   function getGeraltMessage(arg: {[key: string]: string}): string {
     return arg.Geralt
   }
   getGeraltMessage(Witcher) // Geralt of Rivia
 
   // const枚举
   const enum Witcher {
     Ciri = 'Queen',
     Geralt = 'Geralt of Rivia'
   }
   const witchers: Witcher[] = [Witcher.Ciri, Witcher.Geralt]
   // 编译后
   // const witchers = ['Queen', 'Geralt of Rivia'

   

TS 中的 interface 可以给 Function/Array/Class 做声明吗

可以

TS 中如何枚举联合类型的 key

  type Name = { name: string }
  type Age = { age: number }
  type UNIOn = Name | Age
  
  type UnionKey<P> = P extends infer P ? keyof P : never
  
  type T = UnionKey<Union>

什么是抗变、双变、协变和逆变

  • Covariant 协变,TS对象兼容性是协变,父类 <= 子类,是可以的。子类 <= 父类,错误。
  • Contravariant 逆变,禁用strictFunctionTypes编译,函数参数类型是逆变的,父类 <= 子类,是错误。子类 <= 父类,是可以的。
  • Bivariant 双向协变,函数参数的类型默认是双向协变的。父类 <= 子类,是可以的。子类 <= 父类,是可以的。

TS 中同名的 interface 或者同名的 interface 和 class 可以合并吗

  • interface 会合并
  • class 不可以合并

如何使 TS 项目引入并识别编译为 JS 的 npm 库包

  • npm install @types/xxxx
  • 自己添加描述文件

TS 如何自动生成库包的声明文件

可以配置tsconfig.JSON文件中的declaration和outDir

  • 1.declaration: true, 将会自动生成声明文件
  • 2.outDir: ‘’, 指定目录

-?、-readonly

用于删除修饰符

type A = {
    a: string;
    b: number;
}

type B = {
    [K in keyof A]?: A[K]
}

type C = {
    [K in keyof B]-?: B[K]
}

type D = {
    readonly [K in keyof A]: A[K]
}

type E = {
    -readonly [K in keyof A]: A[K]
}

TS 是基于结构类型兼容

typescript的类型兼容是基于结构的,不是基于名义的。下面的代码在ts中是完全可以的,但在java等基于名义的语言则会抛错。

interface Named { name: string }
class Person {
  name: string
}
let p: Named
// ok
p = new Person()

const 断言

const断言,typescript会为变量添加一个自身的字面量类型

  • 对象字面量的属性,获得readonly的属性,成为只读属性
  • 数组字面量成为readonly tuple只读元组
  • 字面量类型不能被扩展(比如从hello类型到string类型)
// type '"hello"'
let x = "hello" as const
// type 'readonly [10, 20]'
let y = [10, 20] as const
// type '{ readonly text: "hello" }'
let z = { text: "hello" } as const

type 和 interface 的区别

  • type 侧重于直接定义类型,还可以给一个或多个类型起一个新名称(当变量用),interface 只能定义对象数据结构类型;
  • type 可以为基本类型、联合类型或元组甚至any等等赋值定义别名,interface 明显办不到;
  • interface 定义重名了会合并属性,type 办不到(会报错提醒 重复定义);
  • type 不支持继承。

implements 与 extends 的区别

  • extends, 子类会继承父类的所有属性和方法。
  • implements,使用 implements 关键字的类将需要实现需要实现的类的所有属性和方法。

枚举和 object 的区别

枚举可以通过枚举的名称,获取枚举的值。也可以通过枚举的值获取枚举的名称。

object 只能通过 key 获取 value。

数字枚举在不指定初始值的情况下,枚举值会从0开始递增。

虽然在运行时,枚举是一个真实存在的对象。但是使用 keyof 时的行为却和普通对象不一致。必须使用 keyof typeof 才可以获取枚举所有属性名。

never 和 void 的区别

  • never:表示永远不存在的类型。比如一个函数总是抛出错误,而没有返回值。或者一个函数内部有死循环,永远不会有返回值。函数的返回值就是 never 类型。
  • void:没有显示的返回值的函数返回值为 void 类型。如果一个变量为 void 类型,只能赋予undefined 或者 null。

unknown 和 any 的区别

unknown 类型和 any 类型类似。

与 any 类型不同的是,unknown 类型可以接受任意类型赋值,但是 unknown 类型赋值给其他类型前,必须被断言。

如何在 window 扩展类型

  declare global {
    interface Window {
      myCustomFn: () => void;
    }
  }

元组越界问题

let aaa: [string, number] = ['aaa', 5];
// 添加时不会报错
aaa.push(6);
// 打印整个元祖不会报错
console.log(aaa); // ['aaa',5,6];
// 打印添加的元素时会报错
console.log(aaa[2]); // error

重写(override)和重载(overload)

重写是指子类重写“继承”自父类中的方法 。虽然 TS 和 JAVA 相似,但是 TS 中的继承本质上还是 JS 的“继承”机制—原型链机制

重载是指为同一个函数提供多个类型定义

class Animal {
    speak(Word: string): string {
        return '动作叫:' + word;
    }
}

class Cat extends Animal {
    speak(word: string): string {
        return '猫叫:' + word;
    }
}

let cat = new Cat();
console.log(cat.speak('hello'));



function double(val: number): number
function double(val: string): string
function double(val: any): any {
    if (typeof val == 'number') {
        return val * 2;
    }
    return val + val;
}

let r = double(1);
console.log(r);

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Typescript模块的导入导出与继承方式

本文链接: https://www.lsjlt.com/news/168579.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Typescript模块的导入导出与继承方式
    目录Typescript模块的导入导出与继承导入测试导出测试TypeScript知识点整理TS 和 JS 有什么差异TS 数据类型TS 中的类TS 的访问修饰符TS 中的接口 - i...
    99+
    2022-11-13
  • JavaScript ES6模块导入和导出的方法
    目录前言:1.默认导入导出2.按需导入导出第一种情况,age is not defined第二种情况,sex is not defined 3.默认导出和整体导出一起使用总...
    99+
    2022-11-13
  • Django模板继承与模板的导入实例详解
    目录一:模版的继承1.什么是模板继承2.使用继承流程原理3.模板继承语法二:模板的继承使用1.案例需求2.总结模板继承三:模版的导入1.模板导入2.模板导入格式3.模板导入使用4.使...
    99+
    2022-11-13
  • Javascript模块导入导出的方法是什么
    这篇“Javascript模块导入导出的方法是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Javascript模块导入...
    99+
    2023-07-04
  • node和ES6中模块导出与导入怎么实现
    这篇文章主要介绍“node和ES6中模块导出与导入怎么实现”,在日常操作中,相信很多人在node和ES6中模块导出与导入怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”node和ES6中模块导出与导入怎...
    99+
    2023-06-17
  • Python模块导入的方式有哪些
    这篇文章给大家分享的是有关Python模块导入的方式有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。概念Python 模块是一个以 .py 结尾的 Python 文件,包含了 Python 对象定义和Pyth...
    99+
    2023-06-02
  • Python有哪些导入模块的方式
    本篇内容介绍了“Python有哪些导入模块的方式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!常规导入常规导入应该是最常使用的导入方式,大概...
    99+
    2023-06-02
  • 如何进行JavaScript中模块的导入和导出
    今天就跟大家聊聊有关如何进行JavaScript中模块的导入和导出,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。简介早期的 Web 网站主要由 HT...
    99+
    2022-10-19
  • Python导入模块的方法
    Python导入模块的方法有两种:import module 和 from module import a,区别是前者所有导入的东西使用时需加上模块名的限定(module.a),而后者不需要。 导入一个模块,Python 解析器对模块位置...
    99+
    2023-01-30
    模块 方法 Python
  • Python导入模块的3种方式小结
    目录导入模块方式一:临时添加模块完整路径导入模块方式二:将模块保存到指定位置导入模块方式三:设置环境变量很多初学者经常遇到这样的问题,即自定义 Python 模板后,在其它文件中用 ...
    99+
    2023-03-10
    Python导入模块
  • Python中的模块导入方式有哪些?
    Python是一种功能强大的编程语言,通过使用模块,可以将代码组织成可重用的部分。模块是Python程序中的文件,它包含了一组相关的函数、类和变量等。在Python中,有多种方式导入模块,下面将介绍其中的几种常用的导入方式,并给出相应的代码...
    99+
    2023-10-22
    import AS 模块导入方式关键词: fromimport
  • python模块导入方式浅析步骤
    目录1.模块的使用2.导入模块并使用3.模块的导入方式之from-import 语句4.__all__变量用来控制*5.总结首先啊,在python中我们熟知的py文件就是一个模块,也...
    99+
    2022-11-11
  • MySQL表数据的导入与导出方法
    本篇内容介绍了“MySQL表数据的导入与导出方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! LOAD...
    99+
    2022-10-18
  • node导出模块的两种方式是什么
    今天小编给大家分享一下node导出模块的两种方式是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2022-10-19
  • python导入pygame模块的方法
    这篇“python导入pygame模块的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“python导入pygame模块的...
    99+
    2023-06-30
  • Python中几种导入模块的方式总结
    模块内部封装了很多实用的功能,有时在模块外部调用就需要将其导入。常见的方式有如下几种: 1 . import >>> import sys >>> sys.path ...
    99+
    2022-06-04
    几种 模块 方式
  • Python中导入模块的几种方式总结
    目录Part.I 预备知识Chap.I 几个概念的区分Chap.II 模块中的 all 变量Part.II 导入模块的几种方法Chap.I 方法Chap.II 实例补充:python...
    99+
    2022-12-09
    python导入模块的三种方法 python中模块导入的方法 python导入模块的命令
  • Docker镜像与容器的导入导出方法
    这篇文章主要介绍“Docker镜像与容器的导入导出方法”,在日常操作中,相信很多人在Docker镜像与容器的导入导出方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Docker镜像与容器的导入导出方法”的疑...
    99+
    2023-06-29
  • 批量备份还原导入与导出MongoDB数据方式
    前文链接传送门 mongo数据库的安装与配置 Navicat 建立数据库连接 新建数据库 导入JavaScript文件入数据库 mongodb数据备份和还原主要分为二种,一...
    99+
    2022-11-12
  • Python模块导入的几种方法
    在Python语言的编辑器里,除了默认的内置函数外,其他函数的调用,必须先通过import语句将其导入才能使用。 import语句导入整个函数模块 导入方法: import 函数模块名 示例 新建一个名为func_test.py的文件,...
    99+
    2023-01-30
    模块 几种方法 Python
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作