TypeScript Note

越来越像 c++ 了

它是 JavaScript 的一个超集。

经过编译后变成 JavaScript 才可以在浏览器中运行。

基础

自动识别类型

let num = 1
num = 'err' // error

变量一经赋值，它的类型也就确定下来了，直接修改会报错。

类型指定

定义时我们便可以定义它的类型。

let num: number
num = 1
let numArr: number[]
let Arr: Array<number>
// equal

类型断言

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2) as number
result * 5

如果不加断言 as number 会导致错误，因为可能返回的值是 undefined，而 undefined 是不能进行数学运算的，如果我们确定它的值类型一定，便可以添加断言，这样就不会导致报错。

在 JavaScript 中，undefined 则会被当作 NaN 进行数学运算。

基础类型

• string
• number
• boolean
• null
• undefined
• void
  • 值只有undefined，函数的类型

联合类型

如果一个值可能有多个类型，定义时使用 | 隔开即可。

let v: string | null = null

null 值默认可以分配给任意类型，开启严格配置后，只可以分配给 null 类型，所以需要通过这种方式声明一下。

也可以用它来限制取值，如：

let v: 1 | 2 | 3

这样它就只能取这三个值。

元组

let t: [number, string, number?] = [1, 'a', 2]

类似于数组，预定类型。

如果该值可选，加个问号即可。

枚举类型

enum My {
	A,
	B,
	C
}
console.log(My.A)
console.log(My[0])

接口

interface Obj {
	name: string
	age: number
} 
const obj: Obj = {
	name: 'a',
	age: 10
}

类型别名

type Mytype = string | number
let a: Mytype

泛型函数

function fn<T>(a: T, b: T): T[] {
	return [a, b]
}
fn<number>(1, 2)
fn(1, 2)
fn('a', 'b')

进阶

函数重载

function hello (name: string): string
function hello (age: number): string
function helllo(value: string | number): string {
	return 'a' + value
}

其实只保留最后一行函数定义也没问题，这样的好处是 vsc 会提示你函数结构。

接口继承

interface Parent {
	prop1: string
	prop2: number
}
interface Child extends Parent {
	prop3: string
}

类构造函数

class Article {
	title: string
	content: string
	constructor (title: string, content: string) {
		this.title = title
		this.content = content
	}
}

存取器

class User {
	private _password: string
	get password(): string {
		return "*******"
	}
	set password(newPass: string) {
		this._password = newPass
	}
}
const u = new User()
console.log(u.password)
u.password = "123456"

抽象类

可能不会被实例化，只是作为基类给其它类规范格式的。

abstract class Animal {
	abstract name: string
	abstract color: string
	haha?: number
}

class Cat extends Animal {
	name: string = 'cat'
	color: 'orange'
}

抽象类中可以有抽象属性，这样被子类继承时子类必须实现抽象属性，而非抽象属性子类可以正常继承使用。

接口实现

interface Animal {
	name: string
	get sound(): string
	makeSound(): void
}

class Dog implements Animal {
	name: string ='dog'
	get sound() {
		return ' '
	}
	makeSound() {
		return;
	}
}

可以继承多个接口，逗号隔开即可，但不能继承多个类。

泛型类

class MyClass<T> {
	value: T
	constructor (value: T) {
		this.value = value
	}

	do (input: T): T {
		console.log(this.value)
		return input
	}
}
const My = new MyClass<string>('hello')

与泛型函数类似。