TypeScript学习笔记

Easter79
• 阅读 762

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文件。

但是他们不能运行在浏览器中,因为在浏览器运行的唯一方法就是添加