typescript：基础知识

强类型和弱类型

注：业界没有明确的定义

强类型语言：不允许任意的隐式类型转换
弱类型语言：允许任意的数据隐式类型转换（形参、实参的数据类型允许不一致）

// 弱类型
function sum(a, b) {
	if(typeof(a) !== number || typeof(b) !== number) {
		throw new TypeError('参数类型错误')
	}
	return a + b
}

// 强类型：不需要参数类型判断，因为类型不符合的参数不会传过来
function sum(a, b) {
	return a + b
}

强类型语言：

• 错误更早暴露
• 代码更智能，编码更准确
• 重构更牢靠
• 减少不必要的类型判断

Flow

// 类型注解
function sum(a: number, b: number) {
	return a + b
}
// 调用
sum(5, 2) // 正确
sum('5', 2) // 报错

typescript

1、原始数据类型

const a: string = 'string'
const b: number = 100 // 也可以存放：NaN或者Infinity（无穷）
const c: boolean = true
// string、number、boolean类型变量值允许为空，可以为null、undefined
const d: void = undefined // 空类型，取值为null、undefined，一般用来标记不带返回之的函数的返回之类型
const e: null = null
const f: undefined = undefined
const h: symbol = Symbol()

2、作用域

分隔作用域：

• 立即执行函数
• 模块

// 使用立即执行函数
(function() {
	const a = 100
})()

// 使用导出（模块）
const a = 100
export {}

3、object类型

取值可以为：数组、对象、函数（原始类型之外的类型），并不能是普通对象类型

const foo: object = []
const foo: object = {}
const foo: object = function() {}

普通对象类型的定义：

// 对象类型限制（更专业的方式是使用接口）
const obj: {a: number, b: string} = {a: 100, b: 'string'}

4、数组

// 纯数字组成的数组定义方式
const arr1: Array<number> = [1, 2, 3]
const arr2: number[] = [1, 2 3]

5、元组类型

const tuple: [number, string] = [20, 'zc']

// 获取元组成员：下标方式
const age = tuple[0]
const name = tuple[1]

// 获取元组成员：数组解构方式
const [age, name] = tuple

6、枚举类型

JavaScript中没有枚举类型，使用对象模拟实现

const enumData = {
	key: value // key：枚举成员名
}
// value也可以是字符串，但是此时不能进行自增长，需要手动给每个成员赋值

7、函数类型

函数声明的限制

export {} // 确保跟其他示例没有成员冲突


// 带类型约束的函数（通过类型注解）：调用时参数个数要一致
function fun1(a: number, b: number): string { // number：参数类型；string：函数返回值类型
	return '返回值'
}


// 添加可选参数
// 方式1：添加？
function fun2(a: number, b?: number): string {}
// 方式2：添加默认值
function fun2(a: number, b: number = 10): string {}


// 接收任意个数参数：rest操作符
function fun2(a: number, b: number, ...rest: number[]): string {}

函数表达式的限制

export {} // 确保跟其他示例没有成员冲突

const fun: (a: number, b: number) => string = function(a: number, b: number): string{
	return '返回值'
}

8、任意类型

export {} // 确保跟其他示例没有成员冲突

let a: any = 100
any = 'string'

9、隐式类型推断

定义变量时既不指定数据类型也不进行赋值，则该变量类型为any，之后对其进行随意赋值都不会引起语法错误

export {} // 确保跟其他示例没有成员冲突

let a
a = 10
a = 'string'

但是建议为每个变量添加明确的数据类型

10、类型断言

断言：告诉typescript某个变量是某个数据类型的

export {} // 确保跟其他示例没有成员冲突

// 方式1
const n = r as number // r是number类型
// 方式2
const n = <number>r // 在JSX下不能使用（会和其中的标签冲突）

11、接口

接口：用来约束对象的结构（对有结构的数据做类型约束）

• 可选成员
• 只读成员
• 动态成员

export {} // 确保跟其他示例没有成员冲突

interface Post{
	title: string; // 成员: 类型
	content: string;
	subTitle?: string; // 可选成员
	readonly summary: string; // 只读成员
}

function printPost(post: Post) { // post类型限制为Post接口类型
	console.log(post.title);
	console.log(post.content);
}

printPost({
	title: 'Hello TypeScript', // 参数
	content: 'A javascript superset',
	summary: 'superset' // 只读成员，初始化完成之后不允许被修改
})

动态成员：

export {}

interface Cache{
	[prop: string]: string
}

const cache: Cache = {}

cache.a = 'a' // 动态添加成员
cache.b = 'b'

12、类

类：描述一类具体对象的抽象成员

ES6之前：函数+原型，模拟实现类
ES6：有了class

12.1 类的属性、构造函数、函数

export {}

class Person{
	// 类属性/成员
	name: string = 'init name' // 初始值
	age: number
	// 构造函数constructor
	constructor(name: string, age: number) {
		this.name = name
	}
	// 函数
	sayHi(msg: string): void {
		console.log(`I am ${this.name},${msg}`)
	}
}

12.2 类的访问修饰符

public: 共享
private: 私有
protected: 允许子类中访问

12.3 构造函数的修饰符

• public
• private：该类不允许被实例化、不允许被继承，只能在内部实例化

export {}

class Person{
	name: string = 'init name'
	age: number
	gender: string
	constructor(name: string, age: number) {
		this.name = name
		this.age = age
		this.gender = gender
	}
	sayHi(msg: string): void {
		console.log(`I am ${this.name},${msg}`)
	}
}

class Student extends Person{
	// 构造函数设置private修饰符，则Student类不允许在其外部被new创建（不允许被实例化），也不允许被继承
	private constructor(name: string, age: number){
		super(name, age)
		console.log(this.gender)
	}

	static create(name: string, age: number){
		return new Student(name. age) // 在内部允许被new（允许被实例化）
	}
}

const jack = Student('jack', 18)

12.4 类的只读属性

readonly修饰的属性

readonly的使用时，要放到修饰符的后面
只读属性的初始化在声明的时候进行或者在构造函数中进行

12.5 类和接口

不同的类实现相同的接口

类实现接口

export{}

interface EatAndRun{
	eat(food: string): void  // 成员
	run(distance: number): void
}

class Person implements EatAndRun{ // 实现接口EatAndRun（注意：要实现该接口内就必须包含所有成员）
	eat(food: strign): void{
		console.log(`优雅进餐：${food}`)
	}
	run(distance: number): void{
		console.log(`直立行走：${distance}`)
	}
}

class Animal implements EatAndRun{
	eat(food: strign): void{
		console.log(`呼噜呼噜地吃：${food}`)
	}
	run(distance: number): void{
		console.log(`爬行：${distance}`)
	}
}

一个类同时实现多个接口

export{}

interface Eat{
	eat(food: string): void  // 成员
}
interface Run{
	run(distance: number): void
}

class Person implements Eat, Run{ // 实现接口EatAndRun（注意：要实现该接口内就必须包含所有成员）
	eat(food: strign): void{
		console.log(`优雅进餐：${food}`)
	}
	run(distance: number): void{
		console.log(`直立行走：${distance}`)
	}
}

class Animal implements Eat, Run{
	eat(food: strign): void{
		console.log(`呼噜呼噜地吃：${food}`)
	}
	run(distance: number): void{
		console.log(`爬行：${distance}`)
	}
}

12.6 抽象类

抽象类：可以包含具体的实现
接口：只能是成员的抽象，不包含具体的实现

抽象类只能被继承，不能被实例化

抽象方法不需要方法体；抽象方法在子类中实现

export {}

// 抽象类
abstract class Animal{
	eat(food: string): void{
		console.log(`呼噜呼噜的吃：${food}`)
	}
	// 抽象方法
	abstract run(distance: number): void
}
class Dog extends Animal{
	run(distance: number): void{
		console.log(`四脚爬行`, distance)
	}
}

const d = new Dog()
d.eat('狗粮')
d.run(100)

13、泛型

在定义函数、接口、类的时候不指定数据类型，当使用的时候再指定

使用泛型，有利于代码复用

13.1 有冗余的创建

export {}

// 创建number类型数组
function createNumberArray(length: number, value: number): number[]{
	const arr = Array<number>(length).fill(value) // 通过<number>指定创建数组的类型为number类型数组
	// Array(length)：创建一个长度为length的数组，默认为any类型
	// fill()方法用于填充数据
	return arr
}
const res = createNumberArray(3, 100)
// 结果：res → [100, 100, 100]

// 创建string类型数组
function createStringArray(length: number, value: string): string[]{
	const arr = Array<string>(length).fill(value)
	return arr
}

13.2 无冗余的创建：使用泛型

export{}

// T：泛型参数名称
function createArray<T>(length: number, value: T): T[]{
	const arr = Array<T>(length).fill(value)
	return arr
}
// string：泛型参数
const res = createArray<number>(3, 100)