TS初探

  1. 简介

    TypeScript具有类型系统，且是JavaScript的超集。它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。Ts主要用于解决那些问题：

  • js木有编译类型检查，写代码的时候木有错误，在运行的时候就发现错误一大堆，ts具有类型系统，可以解决此类问题
  • js代码非常灵活，同一团队中，大神和小菜鸟写的代码各不相同，维护起来十分不便，统一采用ts开发js，使用相同的规则进行编码，能够比较好的解决此类问题
  • js发展十分迅速，存在各种各样的版本和各种环境，在不同的环境中特性存在差异，为了满足各种环境，需要编写各异的代码，js通过制定编译环境可以将同一代码编译成对应环境的js脚本
  • js在编译大型项目缺乏良好的模块及文件的组织，需要支持有模块及命名空间的概念，遵循CommonJs的规范，ts支持模块及命名空间，同时支持。

  1. 环境

  2. 安装

    node install –g typescript

  3. VSC

  • tsconfig.json：指定ts编译的一些参数信息

"compilerOptions"：

  1. Target:编译目标平台（es3,es5,e6,es2015）
  2. Module:组织代码方式（commonjs,amd）
  3. sourceMap:编译文件对应关系
  4. outDir:输出目录

"exclude"：不包含的编译目录

  • tasks.json：指定编译的命令

    快捷键 ctrl+shift+p 调出命令窗口，选择 Configure Task Runner 创建如图所示

参数 "args" 指代编译的范围

  1. 声明

  2. var

    最常用的关键字，用来声明对象，例如

    var关键存在一些弊端，例如：

  • 变量可以重复声明
  • 变量声明可以滞后
  • 没有块级作用域

  1. let

    为了解决 var 关键字的以上弊端，提出了 let关键字，基本用法和var关键字一样，如下：

  2. const

    定义的变量不可以修改

  3. 类型

  • 布尔

简单的true/false值

  • 数字

浮点型的数字

  • 字符串

  • 数组

在类型后面直接使用[]

使用Array泛型

  • 枚举

enum 类型是对js类型的一个补充，使用枚举类型可以为一组数值选择一个友好的名称

 

  1. 函数

  2. 完整函数类型

    完整函数类型包含两部分：参数类型和返回值类型

    上诉写法过于复杂，ts提供类型推断，可以简化写法，如下所示

  3. 参数类型

  • 默认参数

    默认参数可以指定参数默认值，函数调用时可以不用传递默认参数

  • 可选参数

    可选参数在参数后用 ? 来表示，可选参数只能在必须参数后

  • 剩余参数

    剩余参数表示不知道传递多个类型相同的参数可以使用，剩余参数只能用类型数组来表示，并在参数前加上省略号，剩余参数只能是最后一个参数

  1. Lambda和this

    看如下所示的代码，调用out函数的this 对象被指定为全局变量导致调用失败

    在ts中，函数表达式变为使用lambda表达式（ () => {} ），这样就会在函数创建的时候就指定'this'值

    编译后的结果如下所示

  2. 类

  3. 结构

    ts中类的基本结构如图所示，在ts里，每个成员默认为public的，也存在 private 及 protected，private只能在自身类可用，protected可在继承类中使用

  4. 抽象类

    抽象类使用abstract关键字来定义抽象类和在抽象类内部定义抽象方法，抽象类只能用派生类实例化，抽象方法必须在派生类中实现

  5. 继承

    面向对象最基本的模式就是对类型进行继承扩展，如图所示，Dog继承了抽象类animal，实现了抽象方法say，并重写了父类中的move方法

  6. 静态成员

    类的静态成员，这些属性存在于类本身上面而不是类的实例上

  7. 接口

  8. 结构

    与C#或Java里接口的基本作用一样，ts也能够用它来明确的强制一个类去符合某种契约。如下所示，Squre类实现Shape接口。

  9. 继承

    接口可以继承多个接口，使用extends关键字来继承多个接口，如下所示

  10. 泛型

    ts像C#和Java，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，ts中使用（<>）括起泛型类型

  11. 模块

    为了开发大型的代码程序，模块化是必须经历的一个过程。ts组织代码的方式主要包括内部使用的命名空间和外部使用的模块。

  12. 命名空间

    当代码变得复杂的时候，要一种手段来组织代码，以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突，这时候我们使用命名空间。命名空间内的代码只在命名空间内才是可见的，对外部不可见。

  13. 外部模块

    模块在其自身的作用域里执行，在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用import形式之一。

    模块是自声明的；两个模块之间的关系是通过在文件级别上使用imports和exports建立的。

    任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出，

    可以使用以下import形式之一来导入其它模块中的导出内容。

  • 导入一个模块中的某个导出内容

  • 将整个模块导入到一个变量，并通过它来访问模块的导出部分

CommonJS和AMD都有一个exports对象的概念，它包含了一个模块的所有导出内容。ts模块支持export =语法，以配合传统的CommonJS和AMD的工作流。

export =语法定义一个模块的导出对象。它可以是类，接口，命名空间，函数或枚举。

若要导入一个使用了export =的模块时，必须使用TypeScript提供的特定语法import let = require("module")。

  1. 示例

  2. 编码规范

  • 使用PascalCase为类型命名。
  • 不要使用I做为接口名前缀。
  • 使用PascalCase为枚举值命名。
  • 使用camelCase为函数命名。
  • 使用camelCase为属性或本地变量命名。
  • 不要为私有属性名添加_前缀。
  • 1个文件对应一个逻辑组件（比如：解析器，检查器）。
  • 不要导出类型/函数，除非你要在不同的组件中共享它。
  • 不要在全局命名空间内定义类型/值。
  • 共享的类型应该在types.ts里定义。
  • 在一个文件里，类型定义应该出现在顶部。
  • 使用 undefined，不要使用 null。
  • 由于种种原因，我们避免使用一些方法，而使用我们自己定义的。
  • 不使用ECMAScript 5函数；而是使用core.ts这里的。
  • 不要使用for..in语句；而是使用ts.forEach，ts.forEachKey和ts.forEachValue。注意它们之间的区别。
  • 如果可能的话，尝试使用ts.forEach，ts.map和ts.filter代替循环。

  1. 资料

    https://zhongsp.gitbooks.io/typescript-handbook/content/

posted @ 2016-02-25 16:58  S&L·chuck  阅读(31556)  评论(0)  编辑  收藏  举报