`

TypeScript语法基础 - import引入模块

 
阅读更多

   1. 第一种暴露方式

export var dbUrl='xxxxx';
export function getData(){
	console.log('获取数据库的数据')
	return [{
		title:'111122'
	},{
		title:'122ddddd'
	}]
}

export function save() {
	console.log('保存数据成功');
}

//index.ts中接收
import {getData,save} from '../modules/db'
//export default getData; //default只能调用一次
getData();//获取数据库的数据
save();//保存数据成功

 

   2. 第二种方式

var dbUrl='xxxxx';
function getData(){
	console.log('获取数据库的数据')
	return [{
		title:'111122'
		},{
		title:'122ddddd'
	}]
}

function save() {
	console.log('保存数据成功');
}

export {dbUrl,getData,save};
//index.ts中接收
import {getData,save} from '../modules/db'
getData();//获取数据库的数据
save();//保存数据成功

 

   3. 综合应用

------------db.ts
interface DBI {
	add(info:T):boolean;
	update(info:T,id:number):boolean;
	delete(id:number):boolean;
	get(id:number):any[];
}

//定义一个操作mysql数据库的类 注意:要实现泛型接口 这个类也应该是一个泛型类
export class MysqlDb implements DBI{
	constructor() {
		console.log('数据库建立连接');
	}

	add(info: T): boolean {
		console.log(info);
		return true;
	}

	delete(id: number): boolean {
		return false;
	}

	get(id: number): any[] {
		return [];
	}

	update(info: T, id: number): boolean {
		return false;
	}

}

//定义一个操作mssql数据库的类
export class MssqlDb implements DBI{
	add(info: T): boolean {
	console.log(info);
		return true;
	}

	delete(id: number): boolean {
		return true;
	}

	get(id: number): any[] {
		var list=[{
			title:'1111',
			desc:'xxx'
		},{
			title:'12221',
			desc:'dmmmdld'
		}]
		return list;
	}

	update(info: T, id: number): boolean {
		return false;
	}
}

------------Article.ts
import {MssqlDb} from "../modules/db";

class ArticleClass{
	title:string | undefined;
	desc: string | undefined;
}

var ArticleModel=new MssqlDb();
export {
	ArticleClass,ArticleModel
}

------------User.ts
import {MssqlDb} from "../modules/db";

//操作用户表 定义一个User类和数据表的映射
class UserClass{
	username:string | undefined;
	password: string | undefined;
}
var UserModel=new MssqlDb();
export {
	UserClass,UserModel
}


import {UserClass,UserModel} from "../model/user";
import {ArticleModel,ArticleClass} from "../model/article";

//增加数据
var u=new UserClass();
u.username='张三';
u.password='112222';
UserModel.add(u);

//获取user表数据
var res=UserModel.get(122);
console.log(res);

//获取文章的数据
var aRes=ArticleModel.get(1);
console.log(aRes);

 

分享到:
评论

相关推荐

    typescript例子-如何使用node.js

    TypeScript 是一种强大的静态类型编程语言,它是 JavaScript 的超集,为开发者提供了额外的语法特性,如类型系统、接口和泛型,以提高代码的可维护性和开发效率。当与 Node.js 结合使用时,TypeScript 可以帮助构建...

    simple-typescript-transpiled-web-app

    首先,**基于浏览器的模块加载** 是一种原生的JavaScript模块化解决方案,它依赖于ES6的`import`和`export`语法。TypeScript是ES6的超集,所以它可以无缝地使用这些特性。当在浏览器中运行时,我们需要一个工具(如...

    Typescript的学习和服务器端渲染笔记.zip

    TypeScript支持ES6的模块语法,可以使用`import`和`export`关键字来组织和导入代码,这有助于代码的模块化和按需加载。 ```typescript // 导出模块 export function add(a: number, b: number) { return a + b; } ...

    vue-cli3 js项目中引入ts混用typeScript1

    由于Vue CLI默认不理解`.vue`文件中的TypeScript语法,所以需要创建一个声明文件`vue-shim.d.ts`来解决这个问题。在项目根目录下创建此文件,并输入以下内容: ```typescript declare module "*.vue" { import Vue...

    typescript例子-Backbone.js MVC

    5. **模块化与ES6语法**:使用TypeScript的模块系统(如import和export)进行代码组织,同时,可以利用ES6语法(如箭头函数、解构赋值)提升代码的简洁性。 6. **编译与调试**:了解如何配置tsconfig.json文件以...

    TypeScript-入门指南

    - **Visual Studio 2012**: 支持 TypeScript 模块/语法高亮,需要安装 TypeScript 插件。 - **Sublime Text/Vim/Emacs**: 这些编辑器也支持语法高亮。 - **重构和 GoTo Definition**: 在 VS2012 中提供了这些功能。 ...

    typescript-vs-flowtype:Flowtype和TypeScript之间的区别-语法和可用性

    **Flowtype与TypeScript:语法和可用性的比较** 在JavaScript的静态类型检查领域,Flowtype和TypeScript是两个重要的工具,它们为JavaScript开发者提供了额外的安全性和可维护性。这篇文章将深入探讨这两个工具在...

    TypeScript-Course-1-Ver2

    与 ES6 一样,TypeScript 也支持模块系统,使用 `import` 和 `export` 关键字组织代码,实现代码的复用和隔离。在 `main` 中,你将学习如何导入和导出模块,以及命名导出和默认导出的区别。 ### 6. 构造器与继承 ...

    Typescript-The-Complete-Developer-s-Guide-2020

    4. **模块与导入导出**:通过模块系统,可以将代码组织成可重用的模块,使用`import`和`export`关键字进行导入和导出,提高代码的可维护性和隔离性。 5. **泛型**:泛型是TypeScript的一个强大特性,允许创建可重用...

    typescript-handbook.pdf

    TypeScript支持ES6的模块语法,这使得代码可以被组织成更小、更易管理的单元。 ```typescript // math.ts export function add(a: number, b: number) { return a + b; } // app.ts import { add } from './math'...

    TypeScript 入门教程-javascript

    15. **模块(Modules)**:TypeScript 使用 ES6 的模块语法,支持 `import` 和 `export`,使代码组织更加清晰。 16. **命名空间(Namespaces)**:在非 ES6 模块环境下,TypeScript 提供了命名空间进行代码封装和...

    Mastering TypeScript - Second Edition 原书高清PDF及代码

    1. **TypeScript基础知识**:书中首先会介绍TypeScript的基本语法,包括变量声明、数据类型(如基本类型、联合类型、元组、枚举、void和never)、接口、类以及模块。这些是理解TypeScript的基础,对于初学者来说至关...

    learning-typescript--oreilly-typescript-first_steps:随Brice Wilson遵循O'Reilly课程“ TypeScript第一步”而编写的文件的存储库

    **TypeScript基础知识** TypeScript是JavaScript的一个超集,由Microsoft开发,旨在提供静态...通过这个课程,学习者可以逐步掌握TypeScript的语法和特性,为编写更健壮、易于维护的JavaScript应用打下坚实的基础。

    gulp-typescript-order:Gulp 模块根据它们的依赖关系对 Typescript 文件进行排序

    在 TypeScript 开发中,由于模块间的依赖关系,编译时需要确保文件的加载顺序与它们的依赖关系一致,以避免因为错误的加载顺序导致的编译错误或运行时错误。这个插件的出现,就是为了自动化这个过程,提升开发效率。...

    为Babel和TypeScript编译的代码添加moduleexports

    TypeScript虽然支持ES模块和CommonJS模块,但在编译时默认会根据你的tsconfig.json文件中的"module"选项来决定输出哪种模块系统。如果你选择"commonjs",TypeScript将会生成`require`和`module.exports`。但如果你...

    零基础学透 TypeScript.rar

    TypeScript 支持 CommonJS 和 ES 模块语法,允许你组织代码为可重用的模块。`import` 和 `export` 关键字分别用于导入和导出模块。 9. **严格模式与非严格模式** TypeScript 具有严格的类型检查模式,但也可以...

    前端项目-typescript.zip

    TypeScript支持ES6的模块化语法,使用`import`和`export`关键字,使得代码组织更加规范,便于代码复用和管理。同时,TypeScript还支持CommonJS和AMD模块规范,方便在不同环境中使用。 6. **编译到JavaScript** ...

    resolve-relative-import:解析es,浏览器,节点模块的路径

    在JavaScript开发中,模块导入是不可或缺的一部分,尤其是在ES6及后续版本中引入的模块系统。`resolve-relative-import`是一个工具,旨在帮助开发者处理模块的相对导入问题,它支持在ES模块、浏览器环境以及Node.js...

    TypeScript教程入门指南

    `import`和`require`都可用于导入其他模块中的内容,但在TypeScript中推荐使用`import`: ```typescript import { Person } from './person'; ``` **6.4 import,export,require关键字** `import`和`export`...

    Typescript-源码.rar

    7. **模块(Modules)**:TypeScript支持ES6模块语法,允许我们组织代码并按需导入和导出。 ```typescript // 导出 export const pi = 3.14; // 导入 import { pi } from './math'; ``` 8. **装饰器...

Global site tag (gtag.js) - Google Analytics