vue-ts学习笔记

TypeScript

官方地址

TypeScript

1. 下载

npm install -g typescript

查看是否安装成功

tsc -v Version 3.9.7

基本使用

helloworld.ts

console.log("ts hello world");

编译ts->js

tsc helloworld.ts 即可生成helloworld.js

配置自动编译

初始化tsconfig.json

tsc --init

找到tsconfig的outdir打开注释改成outDir:./js

然后终端--> 运行任务-->typescript-->tsc 监视

2. 基础类型

在编写ts的时候变量如果声明了是什么类型的，是允许修改的！尽管编译是通过的，但是不建议这么操作

2.1 布尔boolean

let isFlag:boolean = false;
console.log(isFlag)

2.2 数字类型number

let count:number = 0;
count++;
for(let i:number=0;i<10;i++){
    console.log(i)
}

2.3 字符串类型

let str:string = '123';
str = 'bob'
console.log(str)

2.4 数组类型

在声明数组的时候就已经限定好数组里面的每一个项的类型了，所以在进行数组的CRUD的时候，都必须要是相同的类型

定义数组的两种方式

let arr:number[] = [123,456]

let arr1:Array = ['aaa','111']

let arr:number[] = [123,456]
let arr1:Array = ['aaa','111']
arr.push(1111)
- 这种是不允许的
arr.push('a')
arr[0] = 45444;
console.log(arr,arr1)

2.5 元组类型

元组就是指定义数组的时候可以指定多种类型，但是指定的类型必须要和数组中的元素一一对应，不允许超出或者缺少

// 允许
let anyArray:[string,number,boolean] = ['1',1,false]

// 不允许
let anyArray:[string,number,boolean] = ['1',1,false,'aaaa']

// 不允许
let anyArray:[string,number,boolean] = ['1',1]

2.6 枚举类型

枚举就是定义一些常量供自己使用 待定

enum Status {
    success = 200,
    serverError = 500,
    noAuth = 403
}

let requestStatus:Status = Status.success;
console.log(requestStatus) // 200

2.7 any类型

定义一个变量为任意类型，你可以重新给他赋任意类型的值

也可以给一个变量指定多种类型

let num:string|boolean|undefined|null;

let a:any ;
a=123;
a=[123]
console.log(a)

let arr4:Array = [1233,'aaa']
let arr5:any[] = ['aaaa',1]

console.log(arr4,arr5)

2.8 void类型

void一般用于函数 标识函数没有返回值

function foo():void{
    console.log('foo')
    // return 123;
}
// 标识函数的返回值是数字类型
function foo():number{
    console.log('foo')
    // return 123;
}
foo();

2.9 null和undefined

定义一个变量类型为null和undefined 其用处并不是很大

let u: undefined = undefined;
let n: null = null;

2.10 never

用来告知编译器某处代码永远不会执行,从而获得编译器提示, 以避免程序员在一个永远不会(或不应该)执行的地方编写代码.

function listen() : never{
    while(true){
        let conn = server.accept()
    }
}

listen()
console.log("!!!")  //Error: Unreachable code detected.ts(7027)

// 这里声明为never函数表示这个函数调用之后下面的代码不会执行 避免别人在下面继续写代码
function throwError(msg: string ) :never {
    throw new Error(msg)
}

throwError("some error")
// 程序报错 代码不会执行到着 所以在这里打印是没有用的
console.log("从这开始代码是不会执行的")  //Error: Unreachable code detected.ts(7027)

2.11 object

定义obj类型可能是用来限定函数传入的参数 待验真

let obj:Object ={a:123};
// obj.a = 456; // error
obj = {a:456}
console.log(obj)


declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

3. 函数

3.1函数的两种定义方式

ts中的函数注意以下两点

• 函数的返回值类型
• 形参的数据类型

function foo1(a:string,b:number):string{
    return 'aaa'
}
const bar2 = function(bar:string):void{
    console.log(bar)
}

函数也可以返回一个Promise对象

   
async getList(payload?: any):Promise