TypeScript 初体验

最新推荐文章于 2022-06-17 09:44:37 发布

weixin_34301307

最新推荐文章于 2022-06-17 09:44:37 发布

阅读量131

点赞数

文章标签： json webpack python ViewUI

原文链接：https://my.oschina.net/swingcoder/blog/1475724

版权

2019独角兽企业重金招聘Python工程师标准>>>

支持JavaScript的地方，就可以运行TypeScript

官方教程
http://www.typescriptlang.org/docs/handbook/basic-types.html

https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md

包依赖搜索的方式 https://www.typescriptlang.org/docs/handbook/module-resolution.html

中文翻译教程

https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/tutorials/TypeScript%20in%205%20minutes.html

https://www.gitbook.com/book/zhongsp/typescript-handbook/details

教程汇总

http://definitelytyped.org/directory/learn.html

https://tutorialzine.com/2016/07/learn-typescript-in-30-minutes

https://repkam09.com/files/packt/Learning%20TypeScript.pdf

一个TypeScript语言写的应用：微信聊天机器人

Chatie Official Blog

一、更新与安装

#初次安装
npm install -g typescript
#升级
npm update -g typescript
#安装tslint，一个typescript静态语法分析的工具
npm install -g tslint

/usr/local/bin/tsc -> /usr/local/lib/node_modules/typescript/bin/tsc
/usr/local/bin/tsserver -> /usr/local/lib/node_modules/typescript/bin/tsserver
/usr/local/lib
└── typescript@2.4.2

二、开发工具

推荐使用webstorm

三、HelloWorld

#mkdir HelloWorld && cd HellWold

#npm init

如果有安装一些依赖库，其针对typescript语言的类型定义文件也要一并安装（类型管理器，安装typthings后即可搜索各类库支持的typescript定义文件）

npm install --save express ejs request sha1
npm install --save-dev typescript @types/node @types/express @types/request @types/sha1

查看所有已经定义类型的组件（定义类型主要是方便结合TSLint进行排错）

#vi greeting.ts


interface Person{
    firstName:String;
    lastName:String;
}

function sayHello(person:Person){
    return ("hello "+person.firstName+" "+person.lastName);
}

let user = {firstName:"swing",lastName:"coder"};


document.body.innerHTML = sayHello(user);

#tsc greeting.ts （如果是用webstorm且安装了typescript插件，会自动编译成Js。或者使用gulp）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Greeting</title>

</head>
<body>

</body>
<script type="text/javascript" src="greeting.js"></script>
</html>

浏览器里预览即可见输出hello swing coder

四、一个使用TypeScript编辑微信JSSDK应用例子

https://github.com/Microsoft/TypeScript-WeChat-Starter#开始之前

附录一、

一些Node.js软件介绍

gulp 一套协助管理从开发到发布Node.js应用各任务进行自动化管理的工具集。如将typescript编译成js，将js打包成一个文件，压缩js,css等。node最佳实线推荐开发管理器。()
Browserify 使用运行在浏览器的js支持跟运行在Node里一样的require语法：require('模块')。将node运行的项目迁移到web浏览器。将所有js生成一个bundle.js文件。requireJS也是干同样的事。
tsify 是Browserify用来访问typescript的一个插件。
vinyl 将Browserify生成的文件重新包装成gulp可识别的格式。
Watchify 保持gulp一直在后台运行并监控文件修改后自动编译。
Babel 一款js编译器，主要是将ECMAScript 2015（ES2015新特性介绍）及之后版本转换成ES5或ES3。意思是不必要等着浏览器升级版本支持最新版的ES2015及之后的标准，通过Babel转换语法，你现在就可以使用ES2016+的新语法和特性功能了！
babelify 让Browserify在Gulp语法中支持Babel转换。
Uglify 压缩js的体积软件
webpack JS打包和依赖管理工具（webpack getting started）（ Webpack 和 Browserify都是模块打包工具，提供require语法）
Lodash 字符串、数据、对象操作工具库

综合了上述软件/插件后gulp的一个gulpfile.js配置例子，可以实现自动编译，ES2016兼容，打包js和压缩，单独生成source map方便调试，直接使用require方法等特点。


var gulp = require("gulp");
var browserify = require("browserify");

//watch change
var source = require('vinyl-source-stream');
var watchify = require("watchify");
var tsify = require("tsify");
var gutil = require("gulp-util");

//压缩js
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');

var paths = {
    pages: ['src/*.html']
};

var watchedBrowserify = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: ['src/main.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));

gulp.task("copy-html", function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"));
});

function bundle() {
    return watchedBrowserify
        .transform('babelify', {
            presets: ['es2016'],//注意tsconfig.json target 要设低版本，如es5,es2015
            extensions: ['.ts']
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))

        .pipe(gulp.dest("dist"));
}

gulp.task("default", ["copy-html"], bundle);
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);

#也可以实际监控文件变化自动编译
tsc main.ts --watch

附录二、出错解决记录

1. 修改tsconfig.json的compileOption.target为es2016，默认是es5

events.js:163
      throw er; // Unhandled 'error' event
      ^
TypeScript error: node_modules/@types/selenium-webdriver/remote.d.ts(139,29): Error TS2304: Cannot find name 'Map'.

转载于:https://my.oschina.net/swingcoder/blog/1475724