TypeScript学习笔记
TypeScript是JavaScript的超集,任何合法的JS程序都是合法的TypeScript程序
TypeScript通过向JavaScript增加可选的静态类型声明来把JavaScript变成强类型程序语言。
静态类型声明可约束函数、变量、属性等程序实体。
TypeScript语言内部分为三层:
1. 语言层:实现所有TypeScript语言特性
2.编译层:执行编译,类型检查,将TypeScript代码转换成JavaScript代码
3.语言服务层:生成信息以帮助编译器和其他工具来提供更好的辅助特性
语言特性
全局安装:npm install -g typescript
使用WebStrom调试
1. File - Settings - Languages & Frameworks - TypeScript - TypeScript 路径选取全局安装路径
2. 项目 - New - tscofing.json 新增转换项目
此时可以转换成js代码,然后调试添加node指向js代码即可。
使用命令行调试
tsc demo1.ts 可以将TypeScript转换为JavaScript文件
可选静态类型声明
可以声明一个变量的类型,当没有类型声明的时候,会尝试检查赋值。
var counter;
var counter : number;
var counter : number = 0;
基本类型
boolean:true和false,表示是否正确
number:浮点数
string:文本
array:数组,let list : number[] = [] or let list:Array
enum:枚举,enum Color {Red,Blue}; var c : Color = Color.Red
any:任意JS值进行最小静态化检查,var list:any[] = [1,true,'']
void:没有返回值
注:undefined 和 null,不能作为变量类型赋值
联合类型
声明可以存储多种类型值变量
let path : string|string[]
类型守护
可以在运行时使用typeof或者instanceof运算符对类型进行验证
环境声明
允许在TypeScript代码中创建一个不会被编译到JavaScript中的变量。
如果希望调用一个未被定义的对象上的方法,可以使用declare操作符创建一个环境声明。
此时就不会有编译错误
TypeScript,支持do while \ for in \ while \ for ,四种循环方式
函数通过三种方式声明
//具名函数
function greet(name?:string){}
//匿名函数
const greet = function(name?:string){}
//箭头函数
const greet = (name:string):string=>{}
Bower
包管理工具,只用于管理前端的依赖。因此Bower中的许多包也都针对前端做过优化。
安装:npm install -g bower
创建配置文件:bower init 与 npm init 异曲同工
安装包:bower install jquery --save-dev
所有Bower包都保存在bower_components目录下,也需要添加.gitignore中
tsd
TypeScript包含一个lib.d.ts文件,描述JS内建对象、文档对象(DOM)、浏览器对象(BOM)的API。
扩展名为.d.ts的文件是一种特殊的TypeScript文件,称为类型定义文件或描述文件。
一个类型描述文件通常对包含第三方库API的类型声明,使这些库现存的JS库与TS集成在一起。
例如:TypeScript调用jQuery会得到报错。
$.ajax({}); //cannot find name '$'
需要添加jQuery描述文件的引用,例如
///<reference path="node_modules/@types/jquery/index.d.ts" />
tsd就是包含这些引用的开源项目DefinitelyTyped
tsd用来管理TypeScript应用中描述文件的工具,和npm\bower工具一样,也有自己的配置文件tsd.json
安装:npm install tsd -g
创建配置文件:tsd init
安装描述文件:tsd install jquery --save
但是这种方法目前用不了,使用过渡方法:npm install --save @types/jquery
官网:http://definitelytyped.org/
自动化工具
自动化工具可以自动完成开发中的重复任务,例如:编译TS文件,压缩JS文件等
如今最流行的两个自动化工具就是,Grunt 和 Gulp
Grunt中使用文件作为任务的输入和输出,Gulp中是使用流。Grunt插件使用键值对配置,Gulp插件使用代码描述任务。
可读性Gulp高于Grunt.
Gulp
安装:npm install -g gulp
开发依赖:npm install gulp --save-dev
项目根目录创建gulpfile.js,用来配置gulp命令,内容如下:
let gulp = require('gulp');
gulp.task('default',function(){
console.log("Hello Gulp");
});
注意此时不能使用import引入,否则无法进行测试。
执行gulp命令,会检索当前目录下的gulpfile.js,找到后执行default任务。
代码质量
可以使用Gulp插件中的tslint来检查代码质量。
安装:npm install typescript --save-dev
安装:npm install tslint --save-dev
安装:npm install gulp-tslint --save-dev
添加新任务(没起作用不知道为什么)
var gulp = require('gulp');
var tslint = require('gulp-tslint');
gulp.task('lint', function () {
return gulp.src([
'./source/**.ts', './test/**/**.test.ts'
]).pipe(tslint())
.pipe(tslint.report('verbose'));
});
gulp.task('default', ['lint']);
编译TypeScript代码
添加两个编译TypeScript代码的任务,一个编译应用的逻辑代码,另一个编译单元测试的代码
安装:npm install gulp-typescript --save-dev
创建新的gulp-typescript项目对象
var ts = require('gulp-typescript');
var tsProject = ts.createProject({
removeComments: true,
noImplicitAny: true,
target: 'ES5',
module: "commonjs",
declarationFiles: false
});
上面代码将TypeScript编译器作为依赖加载进来,然后创建tsProject对象。
包含TypeScript编译器在编译我们的代码时,需要带上的参数。现在编辑应用源代码
gulp.task('tsc', function () {
return gulp.src('./source/**/**.ts')
.pipe(ts(tsProject))
.js.pipe(gulp.dest('./source/js'));
});
tsc任务会去查找./source/目录及其子目录下所有的.ts文件,然后将他们作为一个输入流传递给TypeScript编译器
编译器会使用tsProject对象的属性作为编译时的参数,并将编译后的JavaScript代码保存在./source/js目录下
针对不同地方的编译,例如单元测试编译。代码格式一样
再次修改default任务
gulp.task('default', ['tsc']);
优化TypeScript应用
编译完TypeScript代码后,会为每个TypeScript文件生成对应的JavaScript文件。
但是他们不能运行在浏览器中,因为在浏览器运行的唯一方法就是添加