一. 简介
Typescript是一门开源的编程语言，由Microsoft开发维护，首次发布于2012年10月。Typescript是一门静态类型语言，是ECMAScript的超集，支持javascript所有语法，并提供了更多其它特性，下图描述了ts与js之间的关系。
关系图
二. 类型系统
- 强类型，用于规范代码
let a: String = 1; // 报错，1不可转为String
- 类型检查，ts有自己的编译器，采用静态代码分析技术来避免名称错误等问题，避免运行时错误。
let a: String = 1;
a.hehe()；// 报错，a中没有hehe方法
- 天然的api规范
注：规范本身不该是语言限定，而应该是人为限定
2.1 基础数据类型
boolean
string
number
Array
与js中有所区别，强类型下的Array中元素类型声明后，数组中所有类型均一致Tuple
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
-
Enum
枚举类型的作用在于为某些特定的数字提供语义
enum Color {Red, Green, Blue} // 默认从第一个变量开始的值为0,1,2
let c: Color = Color.Green; // 值为1
enum Color {Red = 'red', Green = 'green', Blue = 'blue'} // 显示赋值
let c: Color = Color.Green; // 值为red
Any
void
null
undefined
never
用不上别学了Symbol
Object
2.2 结构化数据类型
- class
- interface
- 明确变量结构，字段名称类型必须满足接口结构
// 接口声明
interface Point2D {
x: number
y: number
}
let xy: Point2D = {
x: 1,
y: 2,
// z: 2 编译不通过，z属性不Point2D接口字段
}
- 希望部分字段严格遵守时可使用可选属性
interface Point2D {
x: number
y?: number
}
let xy: Point2D = {
x: 1,
// y: 2 编译通过，y属性为可选属性
}
- 除了变量的类型可控以外，还可以控制变量的是否可写
interface Point2D {
readonly x: number
}
let xy: Point2D = {
x: 1,
}
xy.x = 2 // x为只读属性，不可赋值
- 类型推导
如果不显示声明类型，编译器会根据变量的值类型来推断出该变量应该属于何种类型.
let num = 6
num = '6' // 编译不通过，num在赋值为6后被推断为number类型，不可赋值字符串
- 类型变量——泛型
// 想要一个值为数字的节点
class Node {
value: number
}
let node1: Node = new Node()
// 又想要一个值为字符串的节点
class Node {
value: string
}
let node2 = new Node()
// 避免各种值类型的节点可能会考虑使用any
class Node {
value: any // 失去了静态类型的优势
}
let node2 = new Node()
// 范型的使用方式
class Node <T> {
value: T
}
let node3 = new Node<string>()
let node4 = new Node<number>()
三. 面向对象
3.1 封装
一切从对象开始，对象内部可通过private protected public(默认值)来限定对象属性的访问权限。
- private：限定仅可在当前类内部使用，不对外暴露
class Person {
name
private age
constructor(name, age) {
this.name = name
this.age = age
}
}
let person = new Person('hehe', 2)
console.log(person.age) // 属性age为私有属性，只能在类'Person'中访问
- protected：限定当前类属性只能在当前类或其子类中使用
class Person {
protected name
private age
constructor(name, age) {
this.name = name
this.age = age
}
}
let person = new Person('hehe', 2)
console.log(person.name) // name属性受保护，只能在类'Persion'及其子类中访问
class Man extends Person {
name
constructor() {
super('1', 2)
console.log(super.name) // 子类中可正常访问
}
}
- public：当前类属性可随意访问
- 特权方法
对于private与protected修饰的属性想要被外界使用时，建议在类内部定义getter与setter方法，通过将方法暴露到外面实现对属性的操作，这种方法叫做特权方法。
class Person {
protected name: string
private age: number
constructor(name, age) {
this.name = name
this.age = age
}
getName() {
return this.name
}
setName(name: string) {
this.name = name
}
}
let person: Person = new Person()
console.log(person.getName())
3.2 继承
- super：子类继承父类后必须使用super实例化父类，达到继承父类属性的目的
- 重写：子类中声明与父类相同方法时可重写父类方法
class Person {
protected name
private age
constructor(name, age) {
this.name = name
this.age = age
}
say(word) { // 父类say方法
console.log('Persion:', word)
}
}
let person: Person = new Person('hehe', 2)
class Man extends Person {
name
constructor() {
super('hehe', 2)
}
say(word) { // 子类重写父类say方法
console.log('Man:', word)
}
}
let man: Person = new Man()
man.say('hahaha') // Man:hahaha
-
父类型可以指向子类型
类似家谱一样，继承的子类型也是父类型
class Person {}
class Man extends Person {}
let man: Person = new Man() // 创建Man类的对象，类型声明为Person
- 实现相同接口的类型可以看作是同一类型
interface DaoService {
add(): number;
}
class DaoServiceImpl1 implements DaoService {
add() {
return 1
}
}
class DaoServiceImpl2 implements DaoService {
add() {
return 2
}
}
let daoService1: DaoService = new DaoServiceImpl1()
let daoService2: DaoService = new DaoServiceImpl1()
console.log(daoService1.add()) // 1
console.log(daoService2.add()) // 2
3.3 多态
3.3.1 概念
- 同一类型的同一属性或方法有不同的表现
- 是强类型下代码更灵活的必要机制
3.3.2 多态的使用条件
- 继承
- 重写
- 父类引用指向子类对象
3.4 被说烂的概念
并不是使用了封装继承的代码就是面向对象
路由模块拆分
路由配置
image.png
路由配置的处理
image.png
路由扩展：添加了一个custom的回调方法用来处理扩展问题。
问题
- 类的划分问题：RouteBase类是为每个路由模块服务的，只有在出现特殊的路由模块时才需要继承重写该类方法，当前业务场景下不太可能出现一整个路由模块都进行统一的处理。
-
主流程中存在多余的逻辑判断：主流程留下了变动的可能性，应将该处变化点封装到其它位置。
主流程
3.4.1 主流程(需要高度抽象)
- 拿到各模块的路由配置数据(获取数据)
配置数据的多样性如何处理？？
路由配置可以抽象为一个类，每个对象拥有自己的数据 - 将配置数据进行处理(处理数据)
配置数据处理方式的多样性如何处理？？
路由配置类通过子类重写来实现配置数据处理的多样性 - 处理后的数据返回(返回数据)
3.4.2 流程中的每一步需要具有一定抽象性
流程步骤中的对象(父类)与方法(接口)都不应该依赖于具体，应该依赖抽象
四. 总结
ts通过强类型与面向对象机制保证了代码即健壮又灵活，其编程思想更能提高我们的视野，为了更好的保护自己优秀的代码，建议大家多多尝试。
推荐视频：angularjs问道前端开发
https://www.imooc.com/learn/556