TypeScript基础学习

239 阅读4分钟

TypeScript是强类型

x = 5; //5  
x = x + 'A'; //'5A'

x最开始是一个变量,后来是一个字符串,类型完全由当前值决定,这叫做弱类型

TypeScript属于javascript的超集,支持强类型和ES6 Class,文件后缀为.ts

TypeScript函数

function func_name():return_type {}
return_types是返回值的类型

带参函数

function func_name(param1:[:datatype], param2: [:datatype]){}
function add(x: number, y:number) {}

可选参数

可选参数使用问号?标志
function func_name(firstName:string, lastName?:string){}

默认参数

在TypeScript中,如果定义了这些参数就必须传入,除非设置为可选或加默认值
function func_name(param1:[:type],param2:[:type] = default_value){}

不能同时设置可选和默认,可选参数必须放在最后

剩余参数

当我们不知道要像函数传入多少个参数的时候,就可以定义剩余参数
function func_name(firstName: string, ...restOfName: string[]):void {}

函数还可以使用匿名函数和构造函数(new Function)和Lambda函数(箭头函数)定义

TypeScript Number

Number对象是原始数值的包装对象 var num = new Number(value);

Number 对象属性(部分)

  • Number.MAX_VALUE表示最大的数,最大的负数是-MAX_VALUE
  • Number.MIN_VALUE表示最小的正数,即最接近0的正数
  • Number.NaN表示非数字

Number对象的方法(部分)

  • toFixed(2):把数字转换为字符串,并对小数点指定位置
  • toLocaleString():把数字转换为字符串,可以把数字加上,
  • toPrecision(2):把数字格式化为指定长度
  • valueOf():返回一个Number对象的原始数字值

TypeScript String

String对象用于处理文本
var txt = new String('string');

或直接var txt = 'string';

TypeScript 数组

var array_name[:datatype][]; //声明
var numlist:number[] = [1, 2, 3];

多维数组

var arr_name:datatype[][] = [ [], [] ];
var mulit:number[][] = [ [1, 2, 3], [4, 5, 6] ];

TypeScript 联合类型

联合类型可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值
Type1 | Type2 | Type3

var val:string | number[];
val = [12];
val = 'haha';

TypeScript 接口

接口是一些方法特征的集合。定义如下:(内部是对象)
interface interface_name {}

interface Iperson {  
  firstName: string,  
  lastName: string,  
  sayHi: () => string  
}  
var customer:IPerson = {  
  firstName: 'Tom',  
  lastName: 'Hanks',  
  sayHi: ():string => {return 'Hi here';}  
}  

接口的继承

接口的继承是说通过其他接口来扩展自己,继承使用关键字extends
Child_interface_name extends super_interface_name

多接口继承语法格式:(多接口继承使用逗号,隔开)

Child_interface_name extends super_interface_name, super_interface_name2

创建实例化对象

var object_name = new class_name([arguments]); var obj = new Car('Engine 1'); 访问属性:obj.field_name

类的继承

class child_class_name extends parent_class_name

子类只能继承一个类,TypeScript不支持继承多个类,但支持多重继承

继承类的方法重写

类继承后,子类可以对父类的方法重新定义。
其中,super关键字是对父类的直接引用,该关键字可以引用父类的属性和方法

class PrinterClass {
    doPrint(): void {}
}
class StringPrinter extends PrinterClass {
    doPrint():void {
        super.doPrint() // 调用父类的函数
    }
}

static关键字

static关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用

class StaticMem {
    static num:number
}
StaticMem.num = 12; //初始化静态变量

instanceof运算符

用于判断运算对象是否是指定的类型,如果是返回true,否则返回false

class Person{}
var obj = new Person();
var isPerson = obj instanceof Person; // true

访问控制符

访问使用控制符来保护对类、变量、方法和构造方法的访问。TypeScript支持3种方式的访问权限

  • public(默认):公有,可以在任何地方被访问
  • protected:受保护,可以被其自身以及子类和父类访问
  • private:私有,只能被其定义所在的类访问
class Encapsulate {
    str1:string = 'hello'
    private str2:string = 'world'
}
var obj = new Encapsulate()
console.log(obj.str1)    // 可访问
console.log(obj.str2)    // 编辑错误,str2是私有的

类和接口

类可以实现接口,使用关键字implements,

interface X {a: number}
class Y implements X {
    a: number
    b: number
    constructor(a: number, b: number) {
        this.a = a
        this.b = b
    }
}

TypeScript命名空间

命名空间主要是用于解决重名问题
命名空间定义了标志符的可见范围,一个标志符可在多个名字空间中定义,它们不会发生冲突
TypeScript中的命名空间使用namespace来定义,使用export,则可以在外部调用

namespace SomeNameSpace{
    export interface ISomeInterfaceName {}
    export class SomeClassName{}
}

外部调用方法:SomeNameSpace.SomeClassName

使用命名空间

如果一个命名空间在一个单独的TypeScript文件中,则应该使用三斜杠///引用

/// <reference path="IShape">
namespace Drawing {
    export class Circle implements IShape {
        public draw() {}
    }
}

TypeScript模块

TypeScript的理念就是可以更换的组织代码 // 文件名: SomeInterface.ts export interface SomeInterface {} 另一个文件中引入: import someInterfaceRef = reqiure('./SomeInterface')

TypeScript声明文件

在TypeScript在开发过程中使用第三方库,需要使用declare来声明

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

声明文件以.d.ts结尾,

Calc.d.ts文件代码:

declare module Runoob {
    export class Calc {}
}

声明文件不包含实现,只是声明类型,需要把声明文件加到TypeScript中
CalcTest.ts文件代码:

/// <reference path = 'Calc.d.ts'>
var obj = new Runoob.Calc