typescript编程指南

资料参考来源 O’reilly(Typescript编程Programming Typescript)BorisCherny著安道译

第一章导言

第二章 Typescript概述

2.1编译器

编译器原理
代码->解析成AST（AST是去掉了空白，注释和缩进的数据结构）->AST转换成字节码->运行
Typescript的特殊之处在于，他不直接编译成字节码，而是编译成JavaScript代码，然后在js解释环境中执行（浏览器，nodejs）

Typescript编译器生成AST之后，真正运行代码之前，Typescript会对代码做类型检查。

TS
1. Typescript源码->Typescript AST
2. 类型检查器检查AST
3. Typescript AST->JavaScript源码
JS
1. JavaScript源码->javascript AST
2. AST->字节码
3. 运行时计算字节码

2.2类型系统

2.3代码编辑器设置

mkdir chapter-2
cd chapter-2
npm init
pnpm install -D typescript tslint @types/node

第三章类型

boolean类型包含所有的布尔值，以及可以对布尔值执行的操作（例如||，&&和！）
number类型包含所有的数字，以及对数字可以执行的操作（±*/）以及可以在数字上调用的方法

Unknown
- Any
  - Undefined
  - Void
  - Null
  - Any
    - Number
      - Number Enum
        Never
    - BigInt
      - Never
    - Boolean
      - Never
    - String
      - StringEnum
        Never
    - Symbol
      - UniqueSymbol
        Never
    - Object
      - Array
        Tuple
        Never
      - Function
        Never
      - Constructor
        Never

3.1类型术语

3.2类型浅谈

3.2.1 any

所有类型的父亲。不设置数据类型默认为any

3.2.2 unknown

不要使用any，而使用unknown，可以比较，=，||，&&，？，！

let a:unknown = 30
let b = a === 130
let c = a + 10 //'a' is of type 'unknown'
if(typeof a == "number"){
    // unknown需要证明
     let d = a +10 // number
 }
console.log(c);

3.2.3 boolean

true和false

let a = true
var b = false
const c = true
let d:boolean = true
// 类型字面量
let e:true = true
let f:true = false// Type 'false' is not assignable to type 'true'.

类型字面量
仅仅表示一个值的类型

3.2.4 number

包括所有数字，整数，浮点数，正数，负数，Infinity,NaN等

3.2.5 bigInt

javascript和Ts新引入的类型，处理较大的整数，不用担心舍入误差

3.2.6 string

包含所有字符串

3.2.7 symbol

JavaScript中一个比较新的类型，表示唯一

const e = Symbol("e")
const f:unique symbol = Symbol("f")

3.2.8 对象

ts对象类型表示对象的结构
通过对象类型无法区分不同的简单对象**{}或复杂的对象new Obj**
这是一种设计选择，JavaScript一般采用结构化类型。

第一种：

let a:object = {
    b:'x'
}
let a:object = {
    b:'x'
}
a.b // Property 'b' does not exist on type 'object'.

object仅比any的范围窄了一些，差不了多少。object只能表示这是一个对象（而不是null）

第二种:

let a = {
    b:'x'
}
a.b

let b:{c:number} = {
    c:12
}

告诉ts某个属性是可选的

let a:{
    b:number,
    c?:string,
    [key:number]:boolean
}

索引签名

[key:T]:U用这种方式，告诉ts指定的对象可能有更多的键。

只读属性

let isOk:{
    readonly firstName:string
} = {
    firstName:"red"
}

3.2.9 类型别名，并集，交集

//类型别名
type Age = number
type Person = {
    name:string,
    age:Age
}
let driver:Person = {
    name:"red",
    age:23
}

type Cat = {
    name: string
    purrs: boolean
}
type Dog = {
    name: string
    barks: boolean
    wags: boolean
}
type CatOrDogOrBoth = Cat | Dog
type CatAndDog = Cat & Dog
// 并集 abc
// cat
let a:CatOrDogOrBoth = {
    name:"ddd",
    purrs:true
}
// dog
let b:CatOrDogOrBoth = {
    name:'bbb',
    barks:true,
    wags:true
}
// both
let c:CatOrDogOrBoth = {
    name:'cc',
    barks:true,
    purrs:true,
    wags:true
}

// 交集 d
let d:CatAndDog = {
    name:'ddd',
    purrs:true,
    barks:true,
    wags:true
}

type red = string
type run = number

let test:red|run = 12
let test1:red&run = [];// 永远不满足never

3.2.10 数组

let a = [1,2,3]
var b = ['a','b']
let c:string[] = ['a']
let d = [1,'a']
const e = [2,'b']

3.2.11 元组

元组是array的子类型

let a:[number] = [1]
let b:[string,string,number]= ['a','b',1]
let c:[string,string?][] = [
    ["s"],
    ["s","s"]
]
// 剩余参数
// let a:[string,...number[]] = ["ss",1,2,3]
// 只读
let a:readonly number[] = [1,23,3]
let b:readonly [number,string] = [1,"s"]

3.2.12 null,undefined,void,never

3.2.13 枚举

// 不安全
enum Language {
     English=0,
     Chinese=1
 }
// 相对安全,t通过数组下表，获取没有的值会报错
const enum Language{
     English,Chinese,Spanish
}

《Vue3+Typescript》一个简单的日历组件实现