一文看懂 | 关于 TypeScript 总结

[[414624]]

TypeScript 是微软开发的一个开源的编程语言，通过在 JavaScript 的基础上添加静态类型定义构建而成。

TypeScript 更具表现力，这意味着它的语法混乱更少，由于高级调试器专注于在编译时之前捕获逻辑错误，因此调试很容易，静态类型使 TypeScript 比 JavaScript 动态类型更易于阅读和结构化，由于通用的转译，它可以跨平台使用，在客户端和服务器端项目中。

TypeScript 通过 TypeScript 编译器或 Babel 转译为 JavaScript 代码，可运行在任何浏览器，任何操作系统，当前稳定版本为 4.2.3 版本。

TypeScript 的主要特点是什么?

跨平台性：

TypeScript 编译器可以安装在任何操作系统上，包括 Windows、macOS 和 Linux;

支持 ES6 特性：

TypeScript 包含计划中的 ECMAScript 2015(ES6) 的大部分特性，例如箭头函数;

面向对象编程思想：

TypeScript 提供所有标准的 OOP 功能，如类、接口和模块;

严格的静态类型检查：

TypeScript 使用静态类型并帮助在编译时进行类型检查，因此，你可以在编写代码时发现编译时错误，而无需运行脚本;

可选的静态类型：

如果你习惯了 JavaScript 的动态类型(在使用变量的时候可以根据传值改变变量的数据类型)，TypeScript 还允许可选的静态类型(在变量后面添加冒号+数据类型，在使用中不可以改变其数据类型，否则报错);

DOM 操作：

您可以使用 TypeScript 来操作 DOM 添加或删除客户端网页元素;

全局作用域：

在任何类之外定义，可以在程序中的任何地方使用;

函数/类范围：

在函数或类中定义的变量可以在该范围内的任何地方使用;

局部作用域/代码块：

在局部作用域中定义的变量可以在该块中的任何地方使用;

TypeScript 内置数据类型

数字类型：

用于表示数字类型的值，TypeScript 中的所有数字都存储为浮点值;

let decLiteral: number = 6; // 十进制 
let hexLiteral: number = 0xf00d; // 十六进制 
let binaryLiteral: number = 0b1010; // 二进制 
let octalLiteral: number = 0o744; // 八进制 

布尔类型：

一个逻辑二进制开关，只能包含 true 或 false;

let isTrue:boolean = true; 

字符串类型：

可以用单引号(')和双引号(")来表示字符串类型，除此之外还支持使用模板字符串反引号(`)来定义多行文本和内嵌表达式，使用 ${ expr } 的形式嵌入变量或表达式;

let name:string = 'Tom'; 
let city:string = 'Beijing'; 
let content:string = `他叫 ${ name } 生活在 ${ city }`; 

数组类型：

TypeScript 数组的操作类似于 JavaScript 中数组的操作，TypeScript 建议最好只为数组元素赋予一种类型的值，定义数组有两种写法;

let arr: number[] = [2,3]; 
let arr: Array<number> = [2,3]; 

对象类型：

object 对象类型可以用于描述一个对象;

const people: object = { 
  name: "Tom", 
  age: 20, 
  city: 'Beijing', 
} 
console.log('他叫 ${people.name} ,他住在${people.city}'); 

symbol类型：

在 ES5 中，如果我们是不可以在对象中添加相同的属性名称的，但是我们也可以通过 symbol 来定义相同的名称，因为 Symbol 函数返回的是不同的值;

const s1 = Symbol("identity"); 
const s2 = Symbol("identity"); 
 
// 一个人多个身份 
const person = { 
  [s1]: "校长", 
  [s2]: "化学老师", 
} 

元祖类型：

元组类型用来表示已知数量和类型的数组，各元素的类型不必相同;

let x : [string,number]; 
x = ['Angular',5]; // 正确 
x = [5,'Angular']; // 报错 

枚举类型：

枚举是一个可被命名的整型常数的集合，枚举类型为集合成员赋予有意义的名称增强可读性;

// 枚举类型默认下标是0 
enum Color { red, yellow, blue }; 
let c: Color = Color.blue; 
console.log(c); // 2 
// 手动设置枚举下标 
enum Color { red = 1, yellow = 2, blue = 3 }; 
let c: Color = Color.blue; 
console.log(c); // 3 

任意值类型：

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型，常用于以下三种;

值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查; 

let x: any = 123456; 
x = 'becomes a string'; 
x = false; 

允许你在编译时可选择地包含或移除类型检查; 

let x: any = 4; 
x.toFixed(); // 正确，并不检查是否存在 

定义储存各种类型数据的数组时; 

let arrarList: any[] = [1,'qwe',true]; 

null 与 undefined 类型：

默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量;

然而，如果启用 -- strictNullChecks，就可以使得 null 和 undefined 只能被赋值给 void 或本身对应的类型; 

let x: number; 
x = 1; 
x = null; // 正确 
 
// 启用 --strictNullChecks 
let y: number; 
y = 1; 
y = null; // 错误 

void 类型：

使用 void 表示没有任何类型，例如一个函数没有返回值，意味着返回void; 

function sayHello(): void{ 
  console.log('I said hello'); 
} 

naver 类型：

never 是其他类型(包括 null 和 undefined )的子类型，代表从不会出现的值，这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中通常表示为抛出异常或无法执行到终止点; 

let x: never; 
let y: number; 
 
x = 123; // 报错 
y = x; // 正确 

编译 TypeScript 文件

编译 TypeScript 文件需要安装 TypeScript 编译器，使用以下指令安装并运行 ts; 

npm install typescript -g 
cd到指定目录下 
tsc typescript_test.ts 

使用 TypeScript 创建变量

由于支持 ES6 语法，创建变量方式有 var、let、const 三种; 

var name:string = 'Tom'; 

var 是严格范围变量的旧风格。你应该尽可能避免使用，var 因为它会在较大的项目中导致问题; 

let num:number = 123; 

let 是在 TypeScript 中声明变量的默认方式。与 var 相比，let 减少了编译时错误的数量并提高了代码的可读性;

const arr:Array<number> = [12,43]; 

const 创建一个其值不能改变的常量(如果创建的是引用类型，则可以改变其内部的值)，它使用相同的范围规则，let并有助于降低整体程序的复杂性;

TypeScript 接口

接口为使用该接口的对象定义契约或结构，接口是用关键字定义的 interface，它可以包含使用函数或箭头函数的属性和方法声明; 

interface staffInfo { 
  staffCode: number; 
  staffName: string; 
  getSalary: (number) => number; 
  getLeaderName(number): string;  
} 

TypeScript 函数重载

要在 TypeScript 重载函数，只需创建两个名称相同但参数/返回类型不同的函数，两个函数必须接受相同数量的参数。这是 TypeScript 中多态性的重要组成部分，例如，你可以创建一个add函数，如果它们是数字，则将两个参数相加，如果它们是字符串，则将它们连接起来，白话意思就是一个方法传不同参数，获取到不同的返回值; 

function add(a:string, b:string):string; 
function add(a:number, b:number): number; 
function add(a: any, b:any): any { 
  return a + b; 
} 
add("Hello ", "Steve"); // Hello Steve 
add(10, 20); // 30 

TypeScript 模块

TypeScript 中的模块是相关变量、函数、类和接口的集合，你可以将模块视为包含执行任务所需的一切的容器，可以导入模块以轻松地在项目之间共享代码; 

module addFun { 
  class Add { 
    export add(x, y) { 
      return x+y; 
    } 
  } 
} 

TypeScript 类

类表示一组相关对象的共享行为、属性和方法，例如，一个学生类 Student。 

class Student {     
  stuNum: number;     
  stuName: string;     
  constructor(num: number, name: string) {     
    this.stuName = name; 
    this.stuNum = num; 
  } 
} 

TypeScript 与 JavaScript 比较

TypeScript 是 JavaScript 的开源语法超集，可编译为 JavaScript，所有原始 JavaScript 库和语法仍然有效，但 TypeScript 增加了 JavaScript 中没有的额外语法选项和编译器功能。TypeScript 还可以与大多数与 JavaScript 相同的技术接口，例如 Vue 和 jQuery。