TypeScript使用

TS（TypeScript）学习笔记

ts-变量的定义类型别名类 ----- calss修饰符类实现接口 安装

npm install -g typescript

编译

在命令行上，运行TypeScript编译器： tsc 文件名.ts

ts-变量的定义

与js相比对变量做了一些类型限制

布尔类型 let flag:boolean = false; 数值类型 let num:number = 15; 字符串类型 let str:string = '眼小博'; 任意类型 var all:any = 123; 联合类型 var unite：number | string = 123 / '123' // unite可以为number和string这两种类型 数组类型 定义： 类型+[] let arr:number[] = [1,2,3]; let arr1:string[] = ['1','2','3']; var arr2:any[] = [1,'1', true]; // arr2可以为任意类型 对象类型 使用接口-- interface interface Person { firstName: string; lastName?: string; // 表示不是必须参数， 如果不加？ 必须传入lastName 否则报错 [propName:string]:any; // 任意属性 } function greeter(para: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = { firstName: "Jane", lastName: "User" }; document.body.innerHTML = greeter(user); 函数的类型 输入类型 输出类型 function sum(x:number,y:number):number { // 第三个number指定的输出类型 return x+y } sum(2,3) // 可以为参数传入默认值 function(x:number=1, y:number=1) {}

类型别名

类型别名 type // 类型别名 type function fn(i: number): number { return i } // ==> 等价于 type n = number function fn1(i: n): n { return i } // 联合类型别名 type a = string | number[] var x1: a = [2] var x2: a = 'aaa'

类 ----- calss

类(class)：定义了一件事物的抽象特点，包括它的属性和方法

之前ES5 中的写法 function Person(name, age) { this.name = name this.age = age } Person.prototype.toString = function () { return this.name } var p = new Person('小明', 18) console.log(p.name) // 小明 p.toString() ES6 中 用类的写法 class Person1 { name1: any // 提前定义值类型 age1: number constructor(name1, age1) { this.name1 = name1 this.age1 = age1 } toString() { return this.name1 } } var p2 = new Person1('小王', 18) 类的继承（extends）

super 关键字 子类继承父类中构造函数的属性和方法

class A { a: String constructor() { this.a = 'aa' } } class B extends A { b: number constructor() { super() this.b = 222 } } var a = new A() var b = new B() console.log(b.a) // aa

修饰符

static

静态方法 修饰符 不需要实例化 可以直接通过类来调用

class Animal2 { static animalName: string = '狗' static eat() { // 添加修饰符 return '吃肉' } } Animal2.eat() // 吃肉 // 不需要实例化(不需要new Animal2()) Animal2.animalName public ------ private ------ protected

public 修饰的属性或者方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public private 修饰的属性和方法是私有的，不能在声明它的类的外部访问 protected 修饰的属性或者方法是受保护的，它和private 类似， 区别是它在子类中也是允许被访问的

// private class A3 { private eat() { // 无法访问 return '吃肉' } public eat1() { return '吃火烧肉' } } var p3 = new A3() // p3.eat() // 访问报错 但部影响正常编译 p3.eat1() // 正常访问 } // protected class A4 { protected eat() { return '吃羊肉' } public eat1() { return '吃猪肉' } private eat2() { return '吃驴肉' } } class D1 extends A4{ constructor() { super() } fun() { return this.eat() // 可以在内部访问到 } fun1() { // return this.eat2() // 不能访问 } } var d4 = new D1(); d4.eat1(); // 可以访问 // 吃猪肉 // d4.eat() // 无法访问 因为protected

类实现接口

// 接口 interface Obj { name: string; action(): string; } // 类实现接口 implements实现 class A8 implements Obj { name: string; constructor() { this.name = name } action() { return '字符串' } // action() { // 报错 返回值必须是string // return 1111 // } }