TypeScript学习笔记

Easter79
• 阅读 581

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

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