一、简介
1、TypeScript是什么
TypeScript是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，由 Microsoft开发，可以编译成纯 JavaScript。
2、安装TypeScript
命令行安装方法：npm install -g typescript
编译：tsc hello.ts
二、基础
1、原始数据类型
JavaScript的类型分为两种：原始数据类型和对象类型。
原始数据类型包括：boolean、number、string、null、undefined和 Symbol。
JavaScript没有空值（void）的概念，在 TypeScript中，可以用void表示没有任何返回值的函数。
例：
//布尔
let isDone:boolean=false;
//数值
let decLiteral:number=6;
//字符串
let myName:string='Tom';
//空值
function alertName():void{
alert('my name is Tom');
}
//null
let n:null=null;
//undefined
let u:undefined=undefined;
2、任意值（Any）
任意值用来表示允许赋值为任意类型，如果是一个普通类型，在赋值过程中改变类型是不被允许的。
例：
let myFavoriteNumber:any='seven';
myFavoriteNumbe=7;
3、类型推论
如果没有明确的指定类型，TypeScript会依照类型推论的规则推断出一个类型。
例：
let myFavoriteNumber='seven'; //等价于：let myFavoriteNumber: string = 'seven';
myFavoriteNumber=7; //error
4、联合类型
联合类型表示取值可以为多种类型中的一种，联合类型使用 |分隔每个类型。
例：
let myFavoriteNumber:string | number;
myFavoriteNumber='seven';
myFavoriteNumber=7;
5、对象的类型——接口
在TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。
接口是对行为的抽象，具体如何行动需要由类（classes）去实现（implement）。
赋值的时候，变量的形状必须和接口的形状保持一致（不可多，不可少）。
不允许添加未定义的属性。
例：
interface Person{
name:string;
age:number;
}
let tom:Person={
name:'Tom',
age:19
}
（1）可选属性
不完全匹配一个形状，可以用可选属性。
例：
interface Person{
name:string;
age?:number; //age可有可无
}
let tom:Person={
name:'Tom'
}
（2）只读属性
可以用readonly定义只读属性。注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。
例：
interface Person{
readonly id:number;
name:string;
age?:number;
[propName:string]:any
}
let tom:Person={
id:89757,
name:'Tom',
gender:'male'
}
tom.id=9527; //error
6、数组类型
在 TypeScript中，数组类型有多种定义方式，比较灵活。
（1）类型+方括号表示法
let fibonacci:number[]=[1,1,2,3,5];
数组项不允许出现其它类型：
let fibonacci:number[]=[1,'1',2,3,5];
（2）数组泛型
可以使用数组泛型 Array<elemType> 来表示数组。
let fibonacci:Array<number>=[1,1,2,3,5];
(3)用接口表示数组
//NumberArray 表示：只要索引的类型是数字时，那么值的类型必须是数字。
interface NumberArray{
[index:number]:number;
}
let fibonacci:NumberArray=[1,1,2,3,5];
（4）类数组
类数组不是数组类型， 比如arguments。
function sum(){
let args:number[]=arguments;
}
（5）any在数组中的使用
用 any表示数组中允许出现任意类型。
let list:any[]=['Tom',19,{website:'http://www.baidu.com'}];
7、函数的类型
（1）函数声明
注意，输入多余的或者少于要求的参数，是不被允许的
funciton sum(x:number,y:number):number{
return x+y;
}
（2）函数表达式
let mySum=function(x:number,y:number):number{
return x+y;
}
给mySum添加类型：
let mySum:(x:number,y:number)=>number=function(x:number,y:number):number{
return x+y;
}
注意不要混淆了 TypeScript中的=>和ES6 中的 =>。
在TypeScript的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
（3）用接口定义函数的形状
interface SearchFunc{
(source:string,subString:string):boolean;
}
let mySearch:SearchFunc;
mySearch=function(source:string,subString:string){
return source.search(subString)!==-1;
}
（4）可选参数
需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了。
function buildName(firstName:string,lastName?:string){
if(lastName){
return firstName+' '+lastName;
}else{
return firstName;
}
}
let tomcat=buildName('Tom','Cat');
let tom=buildName('Tom');
（5）参数默认值
function buildName(firstName:string,lastName:string='Cat'){
return firstName+' '+lastName;
}
let tomcat=buildName('Tom','Cat');
let tom=buildName('Tom');
（6）剩余参数
items是一个数组。所以我们可以用数组的类型来定义它。
function push(array:any[],...items:any[]){
items.forEach(function(item)){
array.push(item);
}
}
let a=[];
push(a,1,2,3);
注意，rest参数只能是最后一个参数。
（7）重载
重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。
function reverse(x:number):number;
function reverse(y:string):string;
function reverse(x:number|string):number|string{
if(typeof x==='number'){
return Number(x.toString().split('').reverse().join(''));
}else if(typeof x==='string'){
return x.split('').reverse().join('');
}
}
注意，TypeScript会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。
8、类型断言
类型断言可以用来手动指定一个值的类型。
语法：<类型> 值 或 值 as 类型
function getLength(something:string | number):number{
if((<string>something).length){
return (<string>something).length;
}else{
return something.toString().length;
}
}
网友评论