TypeScript 笔记 01

TypeScript 是 JavaScript的超集，针对JS对类型的不足进行了增强，在中大型项目中采用TS能有效减少因类型错误导致的BUG，且使项目更加易读好维护。

JS、TS中有哪些数据类型？

JS:

null undefined
number string boolean bigint symbol 
object

TS 包含JS已有的类型，同时额外增加了以下几类:

void never enum unknown any
自定义类型：type、interface

type关键字也可用作类型别名之用

---

TS中描述对象的数据类型

1. class、constructor
2. type、interface

Object 一般不做使用，囊括的范围太大了

不用Object, 使用 索引签名 或 Record泛型 来描述普通对象

普通对象 Object
    数组对象 Array
    函数对象 Function
    正则对象 RegExp
    日期对象 Date

如下三种类型描述是等价的

type A = {
 [KEY : string] : number // KEY 可以用任意字面量替代描述, 一个合适的描述可以提升代码的可读性
}

type A = {
 [string] : number
}

type A = Record<string, number>

---

数组 对象描述

const arr: Array<number> = [1,2,3]

type A = string[]
const a:A = ['h', 'i']

type A = Array<string>

type B = number[]
const b:B = [42, 0.8]

type B = Array<number>

type D = [string, string, string]
const noError: D = ['我', '爱', '你']
const error: D = ['h', 'i']

type E = [string, number]
const e:E = ['小明', 100]

type F = [string[], number[]]
const f: F = [['柴','米','油','盐'], [1,2,3]]

type E = [1,2,3]

const e:E = [1,2,3]

---

函数 对象描述

type FnA = (a: number, b:number) => number
const a: FnA = (x:number)=>{
 return 123;
}

type FnReturnVoid = () => void
type FnReturnUndefined = () => undefined

const f1: FnReturnVoid = () =>{
}

建议： 实践中返回值不推荐写 null或undefined， 推荐用void

使用this的函数

type Person = {
 name:string
 age:number
 sayHi:FnWithThis

}
type FnWithThis = (this:Person, name: string) => void
// 注意：这里类型声明用了类似箭头函数的形式

// 使用this的函数必须是function的形式。
const sayHi: FnWithThis = function(){
 console.log('hi' + this.name);
}

const x:Person = {
 name: 'frank',
 age:18,
 sayHi:sayHi
}
x.sayHi('Jack');
sayHi.call(x, 'Jack');

TS开发者一般使用箭头函数的形式来描述函数

---

其它 对象描述

使用class

const d: Date = new Date()
const r: RegExp = /ab+c/
const r2: RegExp = new RegExp('ab+c');
const m: Map<string, number> = new Map()

m.set('xxx', 2)

const wm: WeakMap<{name:string}, number> = new WeakMap()

type A = object
const a: A =  {} // [] // ()=>void //
console.log(a)

const s:Set<number> = new Set()
const ws: WeakSet<string[]> = new WeakSet()