zoukankan      html  css  js  c++  java
  • TypeScript初尝试

    用TypeScript是有背景的,其实是想让我们的后端开发,逐步的前台走,弱类型的JS,有时候给后端的开发也会带去很多的不便,这篇不是文档,很琐碎,只是记录自己弄的东西。

    1. 什么是TypeScript
    中文的TypeScript网站是 https://www.tslang.cn/docs/home.html 站点的只是很详细,不过文档我觉得还是面向的是有一些JS基础的人看的。

    毕竟是一个C# 常用IDE是VS的开发,首先按照文档的介绍在VS里面配置的TS。

    安装node
    安装npm
    创建package.json

     1 {
     2   "version": "1.0.0",
     3   "name": "asp.net",
     4   "private": true,
     5   "devDependencies": {
     6     "del": "^5.1.0",
     7     "gulp": "^4.0.2",
     8     "gulp-watch": "^5.0.1",
     9     "gulp-concat": "^2.6.1",
    10     "typescript": "^3.6.2",
    11     "gulp-typescript": "^5.0.1"
    12   }
    13 }

    使用Gulp编译TS 
    创建 gulpfile.js

    /// <binding AfterBuild='default' Clean='clean' />
    /*
    This file is the main entry point for defining Gulp tasks and using Gulp plugins.
    Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
    */
    
    var gulp = require('gulp');
    var del = require('del');
    var watch = require('gulp-watch');
    var concat = require('gulp-concat');
    var ts = require('gulp-typescript');
    
    var tsProject = ts.createProject("./tsconfig.json");
    var paths = {
        files: ['TypeScript/**/*.js', 'TypeScript/**/*.ts', 'TypeScript/**/*.map'],
        tsFiles: ['TypeScript/**/*.ts'],
    };
    
    gulp.task('clean', function () {
        return del(['Scripts/ts/**/*']);
    });
    
    gulp.task('default', done => {
        gulp.src(paths.tsFiles).pipe(tsProject()).pipe(gulp.dest('Scripts/ts'));
        gulp.src(paths.files).pipe(gulp.dest('Scripts/ts'));
        done();
    });
    
    watch(paths.tsFiles, gulp.series('default'));

    NuGet 安装 
    jquery.TypeScript.DefinitelyTyped
    knockout.TypeScript.DefinitelyTyped

    添加TS 文件
    一个class .ts
    一个实现  .ts
    添加tsconfig.json

    {
      "baseUrl": ".",
      "compilerOptions": {
        "noImplicitAny": true,
        "noEmitOnError": true,
        "outDir": "./Scripts/ts",
        "sourceMap": true,
        "target": "esnext",
        "module": "amd",
        "baseUrl": ".",
        "outFile": "b.js",
        "allowJs": true
      },
      "files": [
        "TypeScript/app.ts",
        "TypeScript/person.ts"
      ],
      "compileOnSave": true
    }

    AMD 方式编译代码 使用requirejs加载

  • 相关阅读:
    JAVA多线程2 锁
    IE8标准模式下VML不能显示问题
    JAVA多线程1
    JAVA判断32位还是64位,调用不同的DLL
    JNA调用DLL
    如何提高执行力
    httpClient多线程请求
    【NodeJS】安装
    [转载]一个项目涉及到的50个Sql语句(整理版)
    resultMap中的collection集合出现只能读取一条数据的解决方法
  • 原文地址:https://www.cnblogs.com/guojian/p/11458952.html
Copyright © 2011-2022 走看看