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" />