作为JavaScript的超集Typescript非常值得大家学习的。
-
类型限定、流程语句的细节、面向对象思想(封装、继承、多态)抽象类方法、接口和实现类、枚举等
-
主要的是面向对象编程思想
下面是Typescript学习笔记:
Typescript学习笔记: 类型限定、流程语句的细节、面向对象思想(封装、继承、多态)抽象类方法、接口和实现类、枚举等示例
// Typescript学习笔记: 类型限定、流程语句的细节、面向对象思想(封装、继承、多态)抽象类方法、接口和实现类、枚举等示例// *** 数据类型的限定
let a: number;
let Y: string;
Y = 'xinyao'
a = 100;
console.log(a)
console.log(Y)let b = 10;
console.log(typeof b)
// 在ts中,浮点数也属于数据类型
let cc = 13.14;
console.log(typeof cc)let d = 'hello typescript'
console.log(typeof d)
// 在 typescript中,我们再设计的时候,可以不设置数据类型,像JavaScript一样,但是,底层的typescript是有区分的,并且我们也可以显示限定数据类型// 显示显示限定类型,例如下
let str: string;
str = '我是一个字符串'
console.log('typeof str')// 可以在限定的时候,同时赋值
let strs:string = '限定赋值';
console.log(strs, typeof strs)// 同样的, 数组的证明方式也是一样的// 1、 数字类型的数组(数字元素只能为数字)
const arr: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {console.log(arr[i])
}
console.log(typeof arr)// 2、 字符串类型的数组(同理,只能存放字符串)
const strarr: string[] = ['a', 'b', 'c'];
for (let i = 0; i < strarr.length; i++) {console.log(strarr[i])
}
console.log(typeof strarr)// 在 JavaScript和typescript中,所有的数组都是Object类型// any类型 (动态类型限定)类型不确定性,进行动态获取(不报错)
let anys: any;
anys = 10;
console.log(anys, typeof anys)
anys = 'typescript';
console.log(anys, typeof anys)// 枚举类型
enum MeiJu {// 类似于对象,键值对采用 : 和 = 赋值链接的区别Liu = 'liu',Jin = 'jin',Tao = 'toa'
}
console.log(MeiJu.Liu)
console.log(MeiJu)
console.log(typeof MeiJu) // object// 遍历可枚举的对象(包括枚举类型)
for (let key in MeiJu) {if (MeiJu.hasOwnProperty(key)) {console.log(MeiJu)}
}let p: boolean = false;
console.log(p)
console.log('------------------------------------------------------------------')// ***if 控制语句
let num:number = 22;let data:any = num;
if (data === 22) {console.log("存在"); // 存在
} else {console.log("不存在");
}
console.log('------------------------------------------------------------------')// *** switch 语句
let ch:number = 2
switch (ch){case 1 :{console.log('等级为1')break}case 2: {console.log('等级为2')break}case 3: {console.log('等级为3')break}default: {console.log('输入有误')break}
}console.log('------------------------------------------------------------------')// ***数组的定义和使用// 定义数组
let names: string[] = ['Jack', 'Rose']// for int 迭代器 ,遍历得到数组角标
for (const i in names) {console.log(i + ':' + names) // 0 Jack 1 Rose
}// for of 迭代器,直接得到元素
for (const name of names) {console.log(name) // Jack Rose
}console.log('------------------------------------------------------------------')// *** 函数的定义和使用// 1、无返回值的带参函数function fn (name: string): void {console.log('你好,' + name + '!') // "你好,LiuJinTao!"
}
// 调用函数
fn('LiuJinTao');// 2、有返回值的带参函数
function fn1 (x:number, y: number): number {return x + y;
}
let result:number = fn1(10, 30); // 这里不限制类型也可以
console.log(result) // 40// 3、箭头函数
let fn3 = (name: string) => {console.log('你好,' + name + '!') // : "你好,LiuJinTao!"
}
fn3('LiuJinTao'); // 和Javascript中的箭头一样,和Java中的Lambda表达式一样// 4、函数的默认参数
function fn4 (num: number = 1314):number {return num
}
let r:number = fn4(520) // 这里看你传不传,传就是你传的值,不传就是默认的1314
console.log(r) // 520
console.log('------------------------------------------------------------------')// *** 面向对象Typescript具备面向对象的基本语法:例如 接口、类、枚举等。也具备继承、多态、封装的特征// 1. 定义枚举
enum Msg {HI = 'hi',HELLO = 'hello typescript'
}// 2. 定义接口,创建抽象方法、接收枚举为参数
interface A {ab(msg: Msg): void
}// 3. 实现接口(实现类)
class B implements A {ab(msg: Msg):void {console.log(msg + '我重写了接口中的抽象方法ab')}
}// 4. 创建实现类对象
let c: A = new B();// 5. 通过对象引用调用抽象方法(重写后的方法)
c.ab(Msg.HELLO); // "hello typescript我重写了接口中的抽象方法ab"console.log('------------------------------------------------------------------')// *** 面向对象的练习// 定义一个矩形类
class Rectangle {// 将成员变量私有化private width: numberprivate height: number// 手写一个带参构造函数constructor(width: number, height: number) {// 通过this 指向本类的实例,也就是可以访问这个类中的所有this.width = widththis.height = height}// 定义一个成员方法public area():number {return this.width * this.height}
}// 定义一个正方形类 (继承 extends(共享父类中所有非私有化的成员))
class Square extends Rectangle {constructor(side: number) {// 调用父类构造器super(side, side)}
}let s:Square = new Square(10) // 构造器创建对象的时候,传值用于初始化数据
console.log('正方形的面积为:' + s.area()) // 100// typescript 模块化开发// 定义一个矩形类,并通过export导出
export class Rectangles {public width: numberpublic length: numberconstructor(width: number, length: number) {this.width = widththis.length = length}
}// 定义一个工具方法,求矩形面积,然后导出
export function areas(rec: Rectangles): number {return rec.width * rec.length
}// 导入 使用定义的模块 语法:import {类名/方法名等成员} from 该所在的路径 (就是导包)
// import {Rectangles, areas} from '../xxx'// let r = new Rectangles(10, 20)
// console.log('面积为:' + area(r))