TypeScript与JS对比

TypeScript 是一种给 JavaScript 添加特性的语言扩展。

一、安装：

npm install -g typescript（验证ts是否安装完成tsc -v）

执行ts文件：tsc index.ts

ts文件最终还是会被解析js，因此跟js也是相通的

二、语法基础

1、基础类型

ts声明变量时需要声明种类，eg：声明一个数字类型的变量：let money:number=3

ts的基础类型与js相同的有数字类型（number），字符串类型（string），布尔类型（boolean），null和underfined

与js不同的

任意类型：any（声明为any的变量可以赋予任意类型的值），如果声明变量时不设置类型该变量即为任意类型

数组类型：有两种情况，整个数组元素类型一样() let arr:number[]=[1,2]，

如果整个数组内部类型不定时：let arr: Array<number>=[1,2]

元组：用来表示已知元素数量和类型的数组，各个元素的类型不必相同，但是对应位置的类型必须相同

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob

枚举：用于定义数值集合(enum)【类似于js的对象】

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
//另一种情况：A 的值是被计算出来的。注意注释部分，如果某个属性的值是计算出来的，那么它后面一位的成员必须要初始化值
const getValue = () => {
  return 0
}

enum List {
  A = getValue(),
  B = 2,  // 此处必须要初始化值，不然编译不通过
  C
}
console.log(List.A) // 0
console.log(List.B) // 2
console.log(List.C) // 3

void：用于标识方法返回值类型，表示该方法没有返回值

function hello(): void {
    alert("Hello Runoob");
}

never ：是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。给never类型的变量赋值会引起报错

2、运算符、条件语句、循环和函数都与js是一致的

3、接口（类比于JavaScript的对象）

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

//创建一个接口，在里面规定各个属性的类型
interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 //声明一个符合该接口类型的对象
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

4、声明文件

TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。

假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：

$('#foo');
// 或
jQuery('#foo');

但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：

jQuery('#foo');

// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.

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

declare var jQuery: (selector: string) => any;

jQuery('#foo');

declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

上例的编译结果是：

jQuery('#foo');

声明文件以 .d.ts 为后缀，例如：runoob.d.ts

声明文件或模块的语法格式如下：

declare module Module_Name {
}

TypeScript 引入声明文件语法格式：

/// <reference path = " runoob.d.ts" />

猜你喜欢