TypeScript,ts

港控/mmm° 2022-06-04 01:37 227阅读 0赞

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"：不包含的编译目录

![353434-20160225165505177-1833655529.png][]

*  tasks.json：指定编译的命令
    
    快捷键 ctrl+shift+p 调出命令窗口，选择 Configure Task Runner 创建如图所示

![353434-20160225165505849-1132635349.png][]

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

![353434-20160225165506380-660898733.png][]

1.  # 声明 #
2.  ## var ##
    
    最常用的关键字，用来声明对象，例如
    
    ![353434-20160225165507052-562376802.png][]
    
    var关键存在一些弊端，例如：

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

![353434-20160225165507661-1973715707.png][]

1.  ## let ##
    
    为了解决 var 关键字的以上弊端，提出了 let关键字，基本用法和var关键字一样，如下：
    
    ![353434-20160225165508333-1824226929.png][]
2.  ## const ##
    
    定义的变量不可以修改
    
    ![353434-20160225165508818-1803977251.png][]
3.  # 类型 #

*  布尔

简单的true/false值

![353434-20160225165509302-1208877924.png][]

*  数字

浮点型的数字

![353434-20160225165509818-275173059.png][]

*  字符串

![353434-20160225165510490-1372401732.png][]

*  数组

在类型后面直接使用\[\]

![353434-20160225165511005-2054700165.png][]

使用Array泛型

![353434-20160225165511396-2001975427.png][]

*  枚举

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

![353434-20160225165512083-2023107101.png][]

1.  # 函数 #
2.  ## 完整函数类型 ##
    
    完整函数类型包含两部分：参数类型和返回值类型
    
    ![353434-20160225165512505-1543888216.png][]
    
    上诉写法过于复杂，ts提供类型推断，可以简化写法，如下所示
    
    ![353434-20160225165512849-485448089.png][]
3.  ## 参数类型 ##

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

![353434-20160225165513427-422337794.png][]

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

![353434-20160225165513771-2074973520.png][]

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

![353434-20160225165514068-1733816263.png][]

1.  ## Lambda和this ##
    
    看如下所示的代码，调用out函数的this 对象被指定为全局变量导致调用失败
    
    ![353434-20160225165514865-1950321151.png][]
    
    在ts中，函数表达式变为使用lambda表达式（ () => \{\} ），这样就会在函数创建的时候就指定'this'值
    
    ![353434-20160225165515365-626409394.png][]
    
    编译后的结果如下所示
    
    ![353434-20160225165515708-1610982192.png][]
2.  # 类 #
3.  ## 结构 ##
    
    ts中类的基本结构如图所示，在ts里，每个成员默认为public的，也存在 private 及 protected，private只能在自身类可用，protected可在继承类中使用
    
    ![353434-20160225165516177-223749055.png][]
4.  ## 抽象类 ##
    
    抽象类使用abstract关键字来定义抽象类和在抽象类内部定义抽象方法，抽象类只能用派生类实例化，抽象方法必须在派生类中实现
    
    ![353434-20160225165516615-67946692.png][]
5.  ## 继承 ##
    
    ![353434-20160225165517333-424467647.png][]
    
    面向对象最基本的模式就是对类型进行继承扩展，如图所示，Dog继承了抽象类animal，实现了抽象方法say，并重写了父类中的move方法
6.  ## 静态成员 ##
    
    类的静态成员，这些属性存在于类本身上面而不是类的实例上
    
    ![353434-20160225165518271-1000414631.png][]
7.  # 接口 #
8.  ## 结构 ##
    
    与C\#或Java里接口的基本作用一样，ts也能够用它来明确的强制一个类去符合某种契约。如下所示，Squre类实现Shape接口。
    
    ![353434-20160225165518630-544949384.png][]
9.  ## 继承 ##
    
    接口可以继承多个接口，使用extends关键字来继承多个接口，如下所示
    
    ![353434-20160225165519240-1300634981.png][]
10. # 泛型 #
    
    ts像C\#和Java，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，ts中使用（<>）括起泛型类型
    
    ![353434-20160225165520927-839361326.png][]
11. # 模块 #
    
    为了开发大型的代码程序，模块化是必须经历的一个过程。ts组织代码的方式主要包括内部使用的命名空间和外部使用的模块。
12. ## 命名空间 ##
    
    当代码变得复杂的时候，要一种手段来组织代码，以便于在记录它们类型的同时还不用担心与其它对象产生命名冲突，这时候我们使用命名空间。命名空间内的代码只在命名空间内才是可见的，对外部不可见。
    
    ![353434-20160225165521661-291046382.png][]
13. ## 外部模块 ##
    
    模块在其自身的作用域里执行，在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用[export形式][export]之一导出它们。相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用[import形式][export]之一。
    
    模块是自声明的；两个模块之间的关系是通过在文件级别上使用imports和exports建立的。
    
    任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出，
    
    ![353434-20160225165522052-243305176.png][]
    
    可以使用以下import形式之一来导入其它模块中的导出内容。

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

![353434-20160225165522927-1575423292.png][]

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

![353434-20160225165523302-915348424.png][]

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/

[353434-20160225165505177-1833655529.png]: /images/20220604/a22c394a6b5a4c00919656a238e29bb5.png
[353434-20160225165505849-1132635349.png]: /images/20220604/8b4397a70f9e4c7a8250de6912a9f09a.png
[353434-20160225165506380-660898733.png]: /images/20220604/0b7b0e703c0c4cb39797e61b9fb6eb79.png
[353434-20160225165507052-562376802.png]: /images/20220604/86eb76e0bb9e4e7e8eea8439d9184040.png
[353434-20160225165507661-1973715707.png]: /images/20220604/8b5ca925751d4a418ef7d78d119342eb.png
[353434-20160225165508333-1824226929.png]: /images/20220604/46a200cf03f5439aab39679666b8007e.png
[353434-20160225165508818-1803977251.png]: /images/20220604/1748881a47e0460e80000ffc277f823e.png
[353434-20160225165509302-1208877924.png]: /images/20220604/963cd64ed5b645bf896d0679da678abd.png
[353434-20160225165509818-275173059.png]: /images/20220604/77f6af174fbe4d068f2dbf49bdf059c2.png
[353434-20160225165510490-1372401732.png]: /images/20220604/397dd208a0aa4bd7bf19b886f3129816.png
[353434-20160225165511005-2054700165.png]: /images/20220604/7819fba35845496ca607d03b60d18edd.png
[353434-20160225165511396-2001975427.png]: /images/20220604/3a245dfa5fe74662824ee7c471ac7d05.png
[353434-20160225165512083-2023107101.png]: /images/20220604/632de00ed1484a1e815fd89d9a0a9413.png
[353434-20160225165512505-1543888216.png]: /images/20220604/1e844114adae43f18a4105294fbbad68.png
[353434-20160225165512849-485448089.png]: /images/20220604/bd98d802ea514b3e9637628ef1d5d14d.png
[353434-20160225165513427-422337794.png]: /images/20220604/6da7248c1903402dbe90c2531cb8128d.png
[353434-20160225165513771-2074973520.png]: /images/20220604/6862bfabb3994d9db11500a122619dac.png
[353434-20160225165514068-1733816263.png]: /images/20220604/9f9b560830b147d48b2ec1ccc548c8b4.png
[353434-20160225165514865-1950321151.png]: /images/20220604/3f3daa6f65b348cc9cd78a4e6e463890.png
[353434-20160225165515365-626409394.png]: /images/20220604/a66f27fd284d4449b7138be32dcb9388.png
[353434-20160225165515708-1610982192.png]: /images/20220604/9598d2ab49b24af8ad2c5d22ee484218.png
[353434-20160225165516177-223749055.png]: /images/20220604/8ae271f7903742d1985e1ea660ddaf1b.png
[353434-20160225165516615-67946692.png]: /images/20220604/736305863be949ed81a92e975ae1edf2.png
[353434-20160225165517333-424467647.png]: /images/20220604/000a4cbaa0c44cbca51d10f2f4a4cf22.png
[353434-20160225165518271-1000414631.png]: /images/20220604/0b1e70babe91487ebf7dd3ac4eadf5fc.png
[353434-20160225165518630-544949384.png]: /images/20220604/68ed489fe29945ddaad59ab45ee37bd6.png
[353434-20160225165519240-1300634981.png]: /images/20220604/e372dcf3b6e24b52ba654ade564cffc1.png
[353434-20160225165520927-839361326.png]: /images/20220604/5bc3cd5bbe6a4b6db9c3658ee3b9bec4.png
[353434-20160225165521661-291046382.png]: /images/20220604/a09787cd37424d5db67d2a6d7f7dd2de.png
[export]: https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Modules.html
[353434-20160225165522052-243305176.png]: /images/20220604/b68569e3266547138f5f0d4b325e8908.png
[353434-20160225165522927-1575423292.png]: /images/20220604/6cdd1c83a17f4571be4d350388d93c0f.png
[353434-20160225165523302-915348424.png]: /images/20220604/970a8774afd24ece95c087a05d137915.png

TypeScript,ts

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 TypeScriptts使用—类型断言—访问控制符—泛型