TypeScript基础指南
ts介绍
TypeScript 是 JavaScript 的一个超集,支持 ES6的标准,它扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查,
安装ts
安装 typescript:
npm install -g typescript
var message:string = "Hello World"
console.log(message)
//Hello World
TS基础语法
类型检查器
ts可以检查语法错误,可以检查逻辑错误,可以判断函数未经声明就调用
在声明变量的时候需要进行类型的生命
const num :number = 1;
//如果赋值和声明的类型不一致,就会报错
面向对象思想
ts沿用了es6的语法,可以使用class定义属性和方法,下面是一个面向对象的实例
class C {
name():void {
console.log("hhhh")
}
}
var obj = new C();
obj.name();
//hhhh
ts中的类型
所有类型几乎都是其类型的小写
但是有几个较为特殊的存在
声明任意类型
let a:any = '1';
//或者let a : any = 1;
使用any声明的变量可以是任意类型,一般用于接收用户的输入或者定义储存任意类型的数组。
声明数组
// 在元素类型后面加上[]
let arr: number[] = [1, 2];
// 或者使用数组泛型
let arr: Array<number> = [1, 2];
声明元组
元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。
let x: [string, number];
x = ['a', 1]; // 运行正常
x = [1, 'a']; // 报错
console.log(x[0]); // 输出 a
声明函数
function function_name():return_type {
// 语句
return value;
}
//如果需要返回值 那么需要判断返回值的类型
function Name(first: string, last: string) {
return first + " " + last;
}
let res1 = buildName("zhangsan"); // 错误,少参数
let res2 = buildName("zhangsan", "ls", "ww"); // 错误,参数多了
let res3 = buildName("zhangsan","lisi") // 正确
声明元组
声明元组的语法:
let tuple_name = [value1,value2,.....valuen]
let tup1 :[number,string,boolean] = [1,'a',true]
//可以声明一个类型 可以在类型后面加一个? 表示是可选的
var a =[10,"Runoob"]
var [b,c] = a
console.log( b )
console.log( c )
TS重要概念
类型断言
类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。
语法格式:
<类型>值
或:
值 as 类型
var str = '1'
var str2:number = <number> <any> str; //str、str2 是 string 类型
console.log(str2)
常用于一些js的项目迁移到ts 类型断言的意义在于告诉编辑器自己更加了解这个类型。
联合类型
var val:string|number
val = 1
console.log("数字为 "+ val);
val = "aa";
console.log("字符串为 " + val);
接口
接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。
//下面是一个接口,以及实现它的类的实例
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Zhang",
lastName:"San",
sayHi: ():string =>{return "Hello"}
}
接口继承
接口继承就是说接口可以通过其他接口来扩展自己,Typescript 允许接口继承多个接口,继承使用关键字 extends
单接口继承语法格式:
Child_interface_name extends super_interface_name
多接口继承语法格式:
Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name
类
TypeScript 是面向对象的 JavaScript,类描述了所创建的对象共同的属性和方法,TypeScript 支持面向对象的所有特性,比如 类、接口等,TypeScript 类定义方式如下:
class Car {
// 字段
engine:string;
// 构造函数
constructor(engine:string) {
this.engine = engine
}
// 方法
show():void {
console.log("显示发动机“ : "+this.engine)
}
}
// 创建一个对象
var obj = new Car("BBA")
// 访问字段
console.log("读取发动机型号 : "+obj.engine)
// 访问方法
obj.show()
类和接口
类可以实现接口,使用关键字 implements,并将 interest 字段作为类的属性使用。
以下实例 AgriLoan 类实现了 ILoan 接口:
interface ILoan {
interest:number
}
class AgriLoan implements ILoan {
interest:number
rebate:number
constructor(interest:number,rebate:number) {
this.interest = interest
this.rebate = rebate
}
}
var obj = new AgriLoan(10,1)
console.log("利润为 : " + obj.interest+",抽成为 : " + obj.rebate )
访问控制符
TypeScript 中,可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。
- public(默认) : 公有,可以在任何地方被访问。
- protected : 受保护,可以被其自身以及其子类访问。
- private : 私有,只能被其定义所在的类访问。
命名空间
命名空间一个最明确的目的就是解决重名问题。
命名空间定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的。这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中。
TypeScript 中命名空间使用 namespace 来定义,语法格式如下:
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { }
export class SomeClassName { }
}