TypeScript 常用知识总结

2022-08-15 08:30:37 浏览数 (5)

一、定义

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

二、新添功能

  • 类型批注和编译时类型检查
  • 类型推断
  • 类型擦除
  • 接口
  • 枚举
  • Mixin
  • 泛型编程
  • 名字空间
  • 元组
  • Await

以下功能是从 ECMA 2015 反向移植而来：

  • 类
  • 模块
  • lambda 函数的箭头语法
  • 可选参数以及默认参数

JavaScript 与 TypeScript 的区别

TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序

  • TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
  • JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
  • TypeScript 通过类型注解提供编译时的静态类型检查。
  • TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
  • TypeScript 为函数提供了缺省参数值。
  • TypeScript 引入了 JavaScript 中没有的“类”概念，写面向对象
  • TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
  • TypeScript 引入了命名空间

TypeScript 的优势

  1. 静态输入: 静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。
  2. 大型的开发项目: 有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。
  3. 更好的协作: 当开发大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。
  4. 更强的生产力: 干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

三、TypeScript 的组成

  • 模块
  • 函数
  • 变量
  • 语句和表达式
  • 注释

四、tsc 常用编译参数

参数作用--help显示帮助信息--module载入扩展模块--target设置 ECMA 版本--declaration额外生成一个 .d.ts 扩展名的文件。tsc ts-hw.ts --declaration ,以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。--removeComments删除文件的注释--out编译多个文件并合并到一个输出的文件--sourcemap生成一个 sourcemap (.map) 文件。sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。--module noImplicitAny在表达式和声明上有隐含的 any 类型时报错--watch在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。

五、TypeScript 数据类型

any、number、string、boolean、数组、元组、枚举、void、null、undefined、never

六、注意点

  1. Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型
  2. never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）
  3. 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名
  4. 类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。 TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）
  5. Typescript 中的对象必须是特定类型的实例
代码语言：javascript复制
var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello "   sites.site1);
};
sites.sayHello();

七、新语法详解

  1. 类型断言

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。 语法：<类型>值 或 值 as 类型 eg: let str = '1' let str:number = <number><any> str

  1. 类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。 如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。

  1. 函数返回值

function function_name():return_type {}

  1. 带参数函数

function func_name(param1 [:datatype], param2 [:datatype]) {}

  1. 可选参数

可选参数使用问号标识,位于变量名后面 eg: str?

  1. 剩余参数

有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。 剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。 eg: function buildName(firstname: string, ...restName: string[]) {}

  1. 元组

我们知道数组中元素的数据类型都是相同的，如果存储的元素数据类型不同，则需要使用元组。 元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

  1. 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具 体的方法。接口可单继承、多继承。

代码语言：javascript复制
eg: interface IPerson {
    firstName: string,
    lastName: string,
    sayHi: ()=>string
}
let customer:IPerson = {
    firstName: 'Tom',
    lastName: 'Hanks',
    sayHi: ():string => {return 'Hi there'}
}
  1. 类

TypeScript 是面向对象的 JavaScript。 类描述了所创建的对象共同的属性和方法。 TypeScript 支持面向对象的所有特性，比如 类、接口等。 访问控制修饰符:TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。 public（默认） : 公有，可以在任何地方被访问。 protected : 受保护，可以被其自身以及其子类和父类访问。 private : 私有，只能被其定义所在的类访问。 类可以实现接口，使用关键字 implements，并将 interest 字段作为类的属性使用。

  1. 鸭子类型(Duck Typing)
代码语言：javascript复制
interface IPoint { 
    x:number 
    y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
    var x = p1.x   p2.x 
    var y = p1.y   p2.y 
    return {x:x,y:y} 
} 
 
// 正确
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  
 
// 错误 
var newPoint2 = addPoints({x:1},{x:4,y:3})
  1. 命名空间

命名空间一个最明确的目的就是解决重名问题

代码语言：javascript复制
namespace SomeNameSpaceName { 
   export interface ISomeInterfaceName {      }  
   export class SomeClassName {      }  
}
let obj = new SomeNameSpaceName.SomeClassName()

如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法: /// <reference path = "SomeFileName.ts" />

  1. 声明文件

我们需要使用 declare 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对：

代码语言：javascript复制
declare var jQuery: (selector: string) => any;
jQuery('#foo');
javascript 打包 面向对象编程 ide typescript

0 人点赞