TypeScript入门知识

一、简介

1、TypeScript是什么

TypeScriptJavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,由 Microsoft开发,可以编译成纯 JavaScript

2、安装TypeScript

命令行安装方法:npm install -g typescript

编译:tsc hello.ts

二、基础

1、原始数据类型

JavaScript的类型分为两种:原始数据类型和对象类型。
原始数据类型包括:boolean、number、string、null、undefinedSymbol
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 来表示数组。

let fibonacci:Array=[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((something).length){
        return (something).length;
    }else{
        return something.toString().length;
    }
}

TypeScript 入门教程

你可能感兴趣的:(TypeScript入门知识)