TypeScript入门笔记

安装TypeScript

https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html
官方文档

TypeScript无法直接在浏览器中运行
Typing强类型，代码编译阶段就能及时发现错误

#需要先安装nodejs
npm install -g typescript
tsc -v

#初始项目
npm init

#lite-server轻量级服务器，-D相当于--save-dev，仅在开发环境有效
npm i -D lite-server  

#在package.json中的scripts中加入一行：
"start": "lite-server"

#启动lite-server
npm start

---

变量声明

var number1 = 1
let number2 = 2
const number3 = 3

function doSomething() {
    for (var i = 0; i< 5; i++) {
        console.log(i)
    }
    console.log("finally i = " + i)
}

doSomething()

可以使用node直接执行简单的ts

node main.ts

#复杂的ts文件，需要先编译再执行
tsc main.ts
node main.js

---

TypeScript的变量类型

boolean string number
array
null undefined
object
tuple(元组)
enum
void
never
any

高级类型
union 组合类型
Nullable 可空类型
Literal 预定义类型

---

常用变量类型

var number1 = 1
let number2 = 2
const number3 = 3

function add (n1: number, n2: number) {
    return n1 + n2
}

console.log(number1 + number2)

数组

let list1: number[] = [1,2,3,4]
let list2: Array = [1,2,3,4]
let list3 = [1,2,3,4]

let list4 = [1, "abc"]
let list5: any[] = [1, "abc", true]

元组是一个特殊的数组，固定类型、长度；在声明时就要指明类型、长度

let person1: [number, string] = [1, "zhang"]
person1[0] = 10
person1[1] = "wang"

联合类型：可以有多个类型

let union: string | number
union = 2
union = "hello"

let union2: string | number | boolean | string[]

function merge(n1: number | string, n2: number | string) {
    if (typeof n1 === 'string' || typeof n2 === 'string') {
        return n1.toString() + n2.toString()
    } else {
        return n1 + n2
    }
}

let mergeNumber = merge(1, 2)
let mergeString = merge("hello", "world")
// console.log(mergeNumber, mergeString)

字面量：从指定的几个值里面取一个特定的值

let union3: 0 | 1 | 2
union3 = 2

let literal: 1 | "2" | true | [1,2,3,4]
function merge2(n1: number | string, n2: number | string, resultType: "as-number" | "as-string") {
    if (resultType === 'as-string') {
        return n1.toString() + n2.toString()
    } else if (typeof n1 === 'string' || typeof n2 === 'string') {
        return n1.toString() + n2.toString()
    } else {
        return n1 + n2
    }
}

let mergeString2 = merge2("hello", "world", "as-string")
let mergeString3 = merge2(1, 5, "as-number")
console.log(mergeString2, mergeString3)

枚举类型

enum Color {
    red,
    green,
    blue
}

let color = Color.blue
# 输出枚举的索引位置
console.log(color)

#指定索引的值
enum Color2 {
    red = 5,
    green = 10,
    blue = 1
}

#索引值可以是字符串
enum Color3 {
    red = "red",
    green = "green",
    blue = 1
}

console.log(Color3.green, Color3.blue)

any：任意类型

let randomValue: any = 666
randomValue = true
randomValue = "abc"
randomValue = {}
//在IDE编译前不会报错，但tsc编译时会提示不是一个function
randomValue()
randomValue.toUpperCase()

unknown

let randomValue1: unknown = 666
randomValue1 = true
randomValue1 = "abc"
randomValue1 = {}
// unknown不保证类型，但保证类型安全
if (typeof randomValue1 === 'function') {
    randomValue1()
}
if (typeof randomValue1 === 'string') {
    randomValue1.toUpperCase()
}

void：没有返回值

function printResult() {
    console.log(234)
}
// 输出undefined，在原生javascript中是没有void的
console.log(printResult())

undefined：没有初化的变量

function printResult2(): undefined {
    console.log(123)
    // 必须加入return
    return
}
console.log(printResult2())

never：一个函数执行不完，如循环体，可以用于处理异常逻辑

function throwError(message: string, errorCode: number) {
    throw {
        message,
        errorCode
    }
}

throwError("not found", 404)

function whileLoop(): never {
    while(true) {
        console.log("123")
    }
}

---

复杂类型

类型适配：Type Assertions

let message: any
message = "abc"
// 上一步指定了string类型的值，但编译器还是认为变量的类型是any
message.endsWith("c")

// 告诉编译器变量的类型：2种语法效果相同
let ddd = (message).endsWith("c")
let ddd2 = (message as string).endsWith("c")

函数类型

let log = function(message) {
    console.log(message)
}

let log1 = (message) => {
    console.log(message)
}

let log2 = (message: string) => {
    console.log(message)
}

let log3 = (message: string, code: number) => {
    console.log(message, code)
}

// 可选参数：在参数后面加一个?
let log4 = (message: string, code?: number) => {
    console.log(message, code)
}
log4('this is a error')

// 设置默认参数
let log5 = (message: string, code: number = 5) => {
    console.log(message, code)
}
log5("test param")

// 注意：可选参数、默认参数只能放在参数的末尾

对象Object

const person = {
    firstName: "zhang",
    lastName: "san",
    age: 18
}

console.log(person.firstName)

Interface接口

interface Point {
    x: number
    y: number
}

let drawPoint(point: Point) => {
    console.log({x: point.x, y: point.y})
}

drawPoint({x: 101, y: 105})

Interface与class

interface IPoint {
    x: number
    y: number
    drawPoint: () => void
    getDistances: (p: IPoint) => number
}

class Point implements IPoint {
    x: number
    y: number
    constructor(x: number, y: number) {
        this.x = x
        this.y = y
    }

    drawPoint = () => {
        console.log({x: this.x, y: this.y})
    }

    getDistances = (p: IPoint) => {
        return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2)
    }
}

const point = new Point(101, 102)
point.drawPoint()

---

Access Modifier 访问修饰符

interface IPoint {
    x: number
    y: number
    drawPoint: () => void
    getDistances: (p: IPoint) => number
}

class Point implements IPoint {
    // 构造函数中使用public，相当于声明一个成员变量，并给变量赋值
    constructor(public x: number, public y: number) {
    }

    drawPoint = () => {
        console.log({x: this.x, y: this.y})
    }

    getDistances = (p: IPoint) => {
        return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2)
    }
}

const point = new Point(101, 102)
point.drawPoint()

封装私有成员变量，setter、getter访问变量

interface IPoint {
    getX: () => number
    getY: () => number
    setX: (value: number) => void
    setY: (value: number) => void
    drawPoint: () => void
    getDistances: (p: IPoint) => number
}

class Point implements IPoint {
    // 构造函数中使用public，相当于声明一个成员变量，并给变量赋值
    constructor(private x: number, private y: number) {
    }

    drawPoint = () => {
        console.log({x: this.x, y: this.y})
    }

    getDistances = (p: IPoint) => {
        return Math.pow(p.getX() - this.x, 2) + Math.pow(p.getY() - this.y, 2)
    }

    setX = (value) => {
        if (value < 0) {
            throw new Error("value不能小于0")
        }
        this.x = value
    }

    getX = () => {
        return this.x
    }

    setY = (value) => {
        if (value < 0) {
            throw new Error("value不能小于0")
        }
        this.y = value
    }

    getY = () => {
        return this.y
    }
}

const point = new Point(101, 102)
point.drawPoint()

---

Module模块

新建一个文件point.ts，使用export导出类

interface IPoint {
    getX: () => number
    getY: () => number
    setX: (value: number) => void
    setY: (value: number) => void
    drawPoint: () => void
    getDistances: (p: IPoint) => number
}

export class Point implements IPoint {
    // 构造函数中使用public，相当于声明一个成员变量，并给变量赋值
    constructor(private x: number, private y: number) {
    }

    drawPoint = () => {
        console.log({x: this.x, y: this.y})
    }

    getDistances = (p: IPoint) => {
        return Math.pow(p.getX() - this.x, 2) + Math.pow(p.getY() - this.y, 2)
    }

    setX = (value) => {
        if (value < 0) {
            throw new Error("value不能小于0")
        }
        this.x = value
    }

    getX = () => {
        return this.x
    }

    setY = (value) => {
        if (value < 0) {
            throw new Error("value不能小于0")
        }
        this.y = value
    }

    getY = () => {
        return this.y
    }
}

在使用之前导入module

// 导入时不需要指定文件后缀
import { Point } from './point'
const point = new Point(101, 102)
point.drawPoint()

---

泛型

泛型：数据的模板

let list1: number[] = [1, 2, 3, 4]
let list2: Array = [1, 2, 3, 4]

let lastInArray = (arr: Array) => {
    return arr[arr.length - 1]
}

const l1 = lastInArray([1, 2, 3])


let makeTuple = (x: T, y: Y) => [x, y]
const v1 = makeTuple(1, "one")
const v2 = makeTuple(true, 12)