使用TypeScript开发一个在线记事本,支持离线存储

   2023-02-09 学习力0
核心提示:先贴上源码传送门: https://github.com/flowforever/yaryin.note记事本网址: http://yindoc.com , 井号后面写你喜欢的文件名即可。 最近在研究NativeScript,NativeScript使用TypeScript,于是就顺便研究了ts。不得不提到NativeScript源码学习,感觉学习到

先贴上源码传送门: https://github.com/flowforever/yaryin.note

记事本网址: http://yindoc.com , 井号后面写你喜欢的文件名即可。

 

最近在研究NativeScript,NativeScript使用TypeScript,于是就顺便研究了ts。

不得不提到NativeScript源码学习,感觉学习到了不少东西,顺便也从上面扣了一个依赖注入的框架下来用,实际使用感觉非常给力。

文件地址: https://github.com/flowforever/yaryin.note/blob/master/utils/yok.ts

除了稍微修改一下依赖,其他基本没动。

 

ts 给我的第一印象就是清爽分明,配合WebStorm逆天的自动编译,写的过程中代码哪边编译不通过提示非常详细。

先贴两段代码:

serviceBase.ts

/**
 * Created by trump on 15/4/23.
 */
///<reference path="../_references.d.ts"/>
/// <reference path="./_references.d.ts"/>
import db = require('../db/db');
import Future = require("fibers/future");
import Fiber = require('fibers');

export class ServiceBase {

    constructor(table) {
        this.table = table; // 这个table就是mongoose的Model
        this.$table = Future.wrap(table); //配合node fibber 解决异步callback hell 太给力了
    }

    table;
    $table;

    getAll() : IFuture<any> {
        return this.$table.findFuture.bind(this.table)({});
    }

    add(model): IFuture<any> {
        return this.$table.createFuture.bind(this.table)(model);
    }

    findById(id: string): IFuture<any> {
        return this.$table.findOneFuture.bind(this.table)({
            _id: id
        });
    }

    find(query:any): IFuture<any>{
        return this.$table.findFuture.bind(this.table)(query);
    }

    findOne(query:any): IFuture<any>{
        return this.$table.findOneFuture.bind(this.table)(query);
    }
}

 

documentServices.ts

 1 /// <reference path="./_references.d.ts"/>
 2 import db = require('../db/db');
 3 
 4 import Future = require("fibers/future");
 5 import Fiber = require('fibers');
 6 import sb = require('./servicesBase');
 7 
 8 export class Document extends sb.ServiceBase {
 9 
10     constructor($db) {
11         super( $db.Document );
12         this.db = $db;
13     }
14 
15     db;
16 
17     getList() : IFuture<any> {
18         return this.getAll();
19     }
20 
21 }
22 
23 $injector.register('documentServices', Document); // 眼尖的同学会看到这行代码,没错这边将DocumentService注入到容器里面,在接下来的controller中我们就不需要require DocumentService 这个类写一对的路径了

 

 

controller/api.ts

///<reference path="../_references.d.ts"/>
import express = require('express');

import services = require('../../services/documentServices');

class Controller {

    constructor($documentServices) {
        this.services = $documentServices; // 我们这边只需要在构造函数里面指定好依赖的名称,yok框架就帮我们做好一切了
    }

    services;// = <services.Document>$injector.resolve('documentServices');

    'get/:name'(req:express.Request, res:express.Response) {
        (()=> {
            var doc = this.services.findOne({
                name: req.params.name
            }).wait();
            res.send(doc||{});
        }).future()();
    }

    '[post]edit'(req:express.Request, res:express.Response) {
        (()=> {
            var saved = null;
            if(!req.body._id) {
                saved = this.services.add({
                    name: req.body.name
                    , content: req.body.content
                }).wait();
                res.send(saved);
            } else {
                saved = this.services.findById(req.body._id).wait();
                saved.content = req.body.content;
                saved.name = req.body.name;
                saved.save(function(){
                    res.send(saved);
                });
            }
        }).future()()
    }

    rename(req:express.Request, res:express.Response) {

    }

    remove(req, res) {

    }

}

$injector.register('apiHomeController', Controller);

module.exports = $injector.resolve('apiHomeController');

 

总体来说:

TypeScript 开发很给力,

NativeScript的那套依赖注入也很给力。

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 项目中使用TypeScript的TodoList实例详解
    项目中使用TypeScript的TodoList实例详解
    目录为什么用todolisttodolist的ts化数据到视图实现handleTodoItemreadonly分类交叉类型新增功能联合类型可选属性数据转视图总结为什么用todolist现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定、遍历、条件
    03-16
  • React之 hook / class 结合typescript笔记
    React之 hook / class 结合typescript笔记
    使用 create-react-app 开启 TypeScriptCreate React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时,你可以运行 npx create-react-app my-app
    03-08
  • Angular基础(三) TypeScript
    Angular基础(三) TypeScript
       一、模仿Reddita) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为:界面可以看到了:b) 对于界面输入的数据,获取的方式有点特别,使用了#newlink这样的语法,newlink是一个对象,现在代表就是所在的inp
    03-08
  • electron教程(番外篇二): 使用TypeScript版本的
    electron教程(一): electron的安装和项目的创建electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLintelectron
    03-08
  • 使用 ESModule 和 TypeScript 构建 Node.js 环境
    使用 ESModule 和 TypeScript 构建 Node.js 环
    介绍由于我经常使用 React,所以我在前端接触过 Node.js,但我从未接触过后端。正常搭建环境的时候,不能使用import语句,变成了require语句,很不方便。我认为有各种各样的错误,所以如果你能指出它们,我将不胜感激。执行环境macOS 蒙特雷 ver12.5.1MacBook
    03-08
  • [个人发展] 我做了一个可以永远谈论任何事情的女士对话AI(TypeScript,Python)
    [个人发展] 我做了一个可以永远谈论任何事情的
    在个人发展中对话式人工智能服务 Eveki我做了虚构角色1这是一项以人工智能为特色的服务,可以再现并享受自然对话。这一次,作为第一个艾小姐发表了。请先尝试实物。服务概览与人工智能对话基本上只需输入您的信息是。对话是用女士的语言进行的,就像人类一样
    03-08
  • 使用 Node.js (TypeScript) 和 Azure Functions 创建无服务器 REST API,并获得 CosmosDB 更改源作为奖励。
    使用 Node.js (TypeScript) 和 Azure Functions
    介绍在本文中,我们将使用 azure 函数和 ComsmosDB 创建一个无服务器 REST API 应用程序。使用的语言是 Node.js/TypeScript。此外,由于我们使用 CosmosDB 作为数据库,因此我们将使用 Azure 函数触发器接收 Change Feed 事件作为奖励。创建资源创建资源组az
    03-08
  • 安装 TypeScript 并编译成JS
    安装 TypeScript 并编译成JS
    官网: https://github.com/microsoft/TypeScriptTypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。TypeScript是一种应用级JavaScript语言。TypeScript为JavaScript添加了可选类型,支持针对任何浏
    03-08
  • 使用TypeScript,AngularJs和Web API构建基本的C
    原文地址:using typescript with angularjs and web api 版权归其作者所有.在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更
    02-10
  • Typescript 中类的继承
    Typescript中类的定义与继承与后端开发语言java/C#等非常像,实现起来非常方便,而且代码便于阅读。用Typescript写较大项目时是非常有优势的。/** * BaseClass */class BaseClass {constructor(name:string,age:number) {this.name=name;this.age=age;}name:s
    02-09
点击排行