typescript 导入导出-Typescript模块的导出、导入和继承方法

目录 Typescript模块导出导入与继承导出测试导入测试TypeScript知识点梳理TS和JS有什么区别TS数据类型TS类TS访问修饰符TS套接字接口子类文件.d.ts角色const

目录TypeScript知识点整理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 数据类型

基本数据类型：字符串、数字、布尔值

参考数据类型：field(number[], string[], boolean[], (number|string|boolean)[]), null, undefined, {pname:string;page:number}, enumeration, void, Object,assertion

TS 课程

类中的实例属性需要提前声明，实例属性可以在构造函数构造函数中初始化。

访问器的操作：就像操作普通对象一样

TS 访问修饰符 TS 中的套接字接口

接口socket主要描述了对象结构，对象中应该有哪些属性，形参必须符合socket规范。 主要是针对对象结构，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函数或者socket接口或者类型的时候，我们传入指定的类型，function/socket/type就会根据这个类型进行业务处理。 简而言之，“泛型是用作参数的类型”。

// 制作泛型接口, 用T来表示广泛的类型, 就看使用的时候, 传递的是什么类型.
interface PType {
  p: T;
  p1: T;
}
type PTypeOne = {
  p: T;
  p1: T;
};
let pp1: PTypeOne = {
  p: "123",
  p1: "222",
};
let pp2: PType = {
  p: 12,
  p1: 22,
};
let pp3: PType = {
  p: [1, 2, 3],
  p1: [4, 5, 6],
};
// 制作泛型函数
function getValue(a: T, b: T): T {
  return (a as any) + (b as any);
}
console.log(getValue("10", "20"));
console.log(getValue(10, 20));
function getResult(a: T, b: Y): any {
  return (a as any) + (b as any);
}
console.log(getResult("10", 20));

文件.d.ts的作用

全局声明公共类型，所有.ts文件默认从该文件查找类名typescript 导入导出，.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 enumeration）的区别

枚举在编译时会被编译成对象，可以作为对象使用。

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中的接口可以声明Function/Array/Class吗？

能

如何枚举TS中union类型的key

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

什么是反变体、双变体、协变和逆变？ TS中可以合并同名接口或者同名接口和类吗？ 如何在TS项目中导入并识别编译成JS的npm库包？ 如何在TS中手动生成库包声明？ 文档

tsconfig.json文件中的声明和outDir可以配置

-？，-只读

用于删除修饰符

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是基于struct类型兼容的

TypeScript 的类型兼容性基于结构typescript 导入导出，而不是名称。 下面的代码在 ts 中完全没问题，但在基于名义的语言（例如 java）中会抛出错误。

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

const 断言

const 确定 typescript 会将其自己的文字类型添加到变量中

// 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

类型和接口的区别 实现和扩展的区别 枚举和对象的区别

枚举可以通过枚举的名称获取枚举的值。 您还可以通过枚举的值获取枚举的名称。

对象只能通过key获取值。

如果未指定初始值，数字枚举将从 0 开始递增。

事实上，在运行时，枚举是一个真实的对象。 并且使用keyof时的行为与普通对象不一致。 您必须使用 keyoftypeof 来获取枚举的所有属性名称。

never 和 void 之间的区别 未知和 any 之间的区别

未知类型与any 类型类似。

与any类型不同的是，未知类型可以接受任何类型参数，但是未知类型参数在传递给其他类型之前必须先确定。

如何扩展窗口中的文字

  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

覆盖和过载

重画是指从父类“继承”的泛型重画的技术。其实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);

以上是个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。