typescript 项目介绍

TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比

TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。

使用ts

命令行方式

npm install -g typescript
tsc --init
tsc -w
tsc demo.ts
node demo

基础语法

TypeScript的数据类型分为Boolean、Number、String、Array、Enum、Any、Void这七种类型。

let flag: boolean = false
let use: boolean = true

let age: number = 1
let float: number = 21.2
let res: number = -1

let username: string = "admin"
let name1 = "zhangsan" // 自动推断

let arr1: string[] = ["1", "2"]
let arr2: Array<string> = ["1", "2"]
let arr3: Array<number> = [1, 2]


enum Color {Red, Blue, Black}

let c: Color = Color.Black


let s: any = 4
s = "234"

let anyArr: any = [1, "233"]

function a(): void {
    
}

联合类型

let timer:number|null = null
timer = setTimeout(()=>{})

类型别名

type code = number

let errCode :code = 1001

也可以应用在对象上

type Info = {
    name: string
    getName(): string
    setName(name: string): void
}

let userInfo: Info = {
    name: "张三",
    getName(): string {
        return this.name
    },
    setName(name: string) {
        console.log(name)
        this.name = name
    }
}

console.log(userInfo)
console.log(userInfo.getName())
userInfo.setName("王五")
console.log(userInfo.getName())

函数

// 声明式实际写法:
function add(num1: number, num2: number): number {
  return num1 + num2
}

const add2 = (a: number =100, b: number = 100): number =>{
  return a + b
}

统一定义函数格式

const add2 = (a: number =100, b: number = 100): number => {
    return a + b
  }

function add1 (a:number = 100 , b: number = 200): number {
    return a + b
  }
// 这里的 add1 和 add2 的参数类型和返回值一致，
// 那么就可以统一定义一个函数类型
type Fn = (n1:number,n2:number) => number 
const add3 : Fn = (a,b)=>{return a+b }
// 这样书写起来就简单多啦

void类型

如果函数没有返回值，那应该使用void类型

function greet(name: string): void {  console.log('Hello', name)  //}

可选参数

function slice (a?: number, b?: number) {}

slice()
slice(1)
slice(1,2)

可选和默认值不要一起用

function getUserName(a: string = "hhh"): string {
    return a
}
function getUserName1(a?: string): string {
    return "xxx"
}

// 错误
// function getUserName2(a?: string="哈哈哈"): string {
//     return "xxx"
// }

接口

interface UserInfo {
    name: string
    age: number
    addr: null | string
}

interface Response {
    code: Number
    data: UserInfo
    msg: string
}

function getName(request: Response) {
    console.log(request.data.addr)
    console.log(request.data.name)
}

接口和类型的区别 interface（接口）和 type（类型别名）的对比：

相同点：都可以给对象指定类型不同点: 接口，只能为对象指定类型。它可以继承。类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名先有的 interface，后有的 type，推荐使用 type

类型断言

TypeScript中的类型断言是一种将变量或表达式的类型强制转换为开发者指定的类型的方式。

可以使用尖括号（<>）语法或者as语法进行类型断言。

// let image: HTMLElement = document.getElementById("image")
// console.log(image.src)  // 拿不到image的src的属性
let image: any = document.getElementById("image")
console.log((image as HTMLImageElement).src)
console.log((<HTMLImageElement>image).src)

创建ts的vue3项目

npm init vue@latest


√ Project name: ... ts_vue3
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in D:\IT\node_project\ts_vue3...