Tyscript入门笔记

gulp配置

练习配置

var gulp = require("gulp");
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var watchify = require("watchify");
var gutil = require("gulp-util");
var ts = require("gulp-typescript");
var watchPath = require('gulp-watch-path')

var tsProject = ts.createProject("tsconfig.json");
gulp.task("copy-html", function() {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist/html"));
});
gulp.task('watchHtml', function() {
    gulp.watch('src/html/*.html', function(event) {
        var paths = watchPath(event, 'src/html/', 'dist/html/')
            /*
            paths
                { srcPath: 'src/js/log.js',
                  srcDir: 'src/js/',
                  distPath: 'dist/js/log.js',
                  distDir: 'dist/js/',
                  srcFilename: 'log.js',
                  distFilename: 'log.js' }
            */
        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)
        gulp.src(paths.srcPath)
            .pipe(gulp.dest(paths.distDir))
    })
})
gulp.task('watchjs', function() {
    gulp.watch('src/*.ts', function(event) {
        var paths = watchPath(event, 'src/', 'dist/js/')
            /*
            paths
                { srcPath: 'src/js/log.js',
                  srcDir: 'src/js/',
                  distPath: 'dist/js/log.js',
                  distDir: 'dist/js/',
                  srcFilename: 'log.js',
                  distFilename: 'log.js' }
            */
        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
        gutil.log('Dist ' + paths.distPath)
        gulp.src(paths.srcPath)
            .pipe(tsProject())
            .pipe(babel())
            .pipe(gulp.dest(paths.distDir))
    })
})

gulp.task("complier", ["copy-html", 'watchjs', 'watchHtml'], function() {
    return tsProject.src()
        .pipe(tsProject())
        .pipe(babel())
        .pipe(gulp.dest("dist/js"));
});

目录结构

├── dist (编译后的文件夹)
│ ├── html (html文件夹)
│ └── js (js文件)
├── package.json
├── src (源文件夹)
│ ├── DrawView.ts (ts文件)
│ ├── html (源html文件夹)
│ └── index.ts (ts文件)
├── gulpfile.js
└── tsconfig.json

运行命令

gulp complier

问题

Promise报错

typescript: error TS2693: 'Promise' only refers to a type, but is being used as a value here

解决办法

//修改tsconfig.json
"compilerOptions": {
        "lib": ["es2017", "dom"]
    }

Propety '**'does not exist on type 'HTMLElement'

Property 'value' does not exist on type 'HTMLElement'

解决办法

//类型转换
 (document.getElementById('**'))