TS和vue3.0学习笔记

TypeScript

安装ts: npm install typescript -g
执行：
1、需要先转成js文件：tsc demo01.ts生成一个js文件；然后再执行js文件：node demo01.js
2、安装npm install -g ts-node，可直接用 ts-node demo01.ts 进行编译

基础静态类型和对象静态类型

// 定义数据类型变量
let bookNum : number = 12

// interface进行自定义静态类型
interface SpecialtyFood {
    name: String,
    price: number,
    describe: String
}

// 定义字符串数组；其中不能包含其他类型
let books : string[] = ['简爱', '悲惨世界']
// 定义对象
let bookInfo : {
    name: string,
    author: string,
    type: string
} = {
    name: '三体',
    author: '刘慈欣',
    type: '科幻'
}

let hotPot : SpecialtyFood = {
    name: '火锅',
    price: 100,
    describe: '古称“古董羹”，因食物投入沸水时发出的“咕咚”声而得名。'
}
// 声明一个类
class Person{}
let Food : Person = new Person()

// 声明一个函数,返回必须是字符串
let person : () => string = () => { return '康康'}

console.log(bookNum, books, bookInfo.name, hotPot.describe, person())

函数参数和返回类型的注解

// 函数参数和返回类型的注解
function count1(a : number, b : number) : number {
    return a + b
}
function count2(a : number, b : string) : string {
    return a + b
}
// 当传入参数是对象时，确定对象中参数的类型需要不能像count2那样声明了
function count3({a, b} : {a:number, b:number}) : number{
    return a + b
}
// 没有返回值对函数的注解为void，意为无；如果写了返回值会报错
function count4(a : number, b : number) : void {
    console.log(a + b)
}
let total1 = count1(1, 34)
let total2 = count2(1, '34')
let total3 = count3({a:1, b:2})

console.log(total1, total2,total3)
count4(1, 35)

/*
    如果函数永远执行不完：例：有死循环的函数、抛出异常的函数；箭头函数表达式的返回值类型需要用never
    never类型表示的是那些永不存在的值的类型
    never可以赋值给任意类型，但任意类型不能赋值给never类型
*/
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

数组类型注解

let bookArr: string = ['朝花夕拾', '彷徨']
let arr : (string|number)[] = ['a', 12]

如果数组中含有对象这种比较复杂的类型可以使用类型别名

type Books = {
    name: string,
    bookType: string,
    grade: number
} 

// 使用interface也是可以的
interface Books  {
    name: string;
    bookType: string;
    grade: number;
} 

// class声明也行
// class Books {
//     name: string;
//     bookType: string;
//     grade: number;
// }
let threeBody : Books[] = [
    {name: '三体1', bookType: '科幻', grade: 9.1},
    {name: '三体2', bookType: '科幻', grade: 9.2},
    {name: '三体3', bookType: '科幻', grade: 9.3},
]
console.log(threeBody[0].name)

注：这里的类型别名和接口interface看似一样；其实有部分区别；
type Books = string 可以只传递一个字符串；而interface却必须是上面的形式，比较严谨

元组(数组的加强版)

-----ing-----