TypeScript

首页我们需要了解什么是TypeScript 简称TS

typescript是拥有类型的javaScript超集, 它可以编译成普通\干净\完整的js代码 ES3

js所拥有的内容ts都支持, 并且js有es678... ts也都支持这些语法

ts拥有独特的一些数据类型 枚举 元组 void any

vueCli babel=>.ts .vue文件 转换成 普通的html和js和css

TS声明变量

在ts中声明变量 需要使用类型注解的形式

语法 var/let/const 变量名: 数据类型 = 值

let str :string = '100'
consloe.log(str)
//str定义为字符串 

//1.类型注解
//2.number和 Number 区别
var num: number = 100;
// var num2: Number = 100;
let name: string = "100";
const flag: boolean = true;

//什么时候需要添加类型注解
//默认情况下 ts会帮我们将初始赋值的数据类型作为当前变量的类型
//类型推导/类型推断
let name2 = 789;
console.log(name2);


let key: string
key = "123"

TS中的数据类型

TS中的数据类型分为:

number类型  

boolean类型

string类型

null和undefined类型

symbol类型

array类型

object类型

any类型

unknown类型

void类型

never类型

tuple类型

enum类型

number类型

let num: number = 123;
num = 100;
num = 100.0001;
// num = "100";

let decLiteral: number = 6;//10进制
let binaryLiteral: number = 0b1010;//2进制
let hexLiteral: number = 0xf00d;//16进制
let octalLiteral: number = 0o744;//8进制

console.log(decLiteral,
binaryLiteral,
hexLiteral,
octalLiteral)

boolean类型

//布尔类型只有两个值 true和false
let flag: boolean = true;
flag = false;
flag = 1>0;

string类型

let msg: string = "hello world";

let name: string = "你好";
let age: number = 18

msg = `${name}+年龄:${age}`

export {}

null和undefined类型

//js中null和undefined是两个基本数据类型
//在ts中 null和undefined他们是类型 也是值
let n: null = null;
let u: undefined = undefined;

n=null

symbol数据类型

// @ts-ignore
let name1: symbol = Symbol("name");
// @ts-ignore
let name2: symbol = Symbol("name");
const obj = {
    [name1]: "hello world",
    [name2]: "你好世界",
}

array类型

//在数组中应该存放相同类型的数据
let arr: Array<string> = []; //第一种写法 react.jsx <div></div>
let arr2: string[] = []; //第二种写法
let arr3 = ["xxx",18, true];

arr.push("你好世界");
// arr.push(1234);

//在数组中最好放相同数据类型的内容
arr.forEach(item=>{
})

object类型

const obj = {
    name: "你好世界",
    age: 18
}

console.log(obj.name)

any类型

//msg这个数据的数据类型可以是任何的数据(和原来的js就完全一样了)
let msg: any = "1234";
msg = 123;
msg = true;
msg = [];
msg = null;

unknown类型
 

function fn1(){
    return "这是一个字符串"
}
function fn2(){
    return 1234
}

//unknown类型 只能赋值给any和unknown类型的变量
//any类型 可以赋值给任意类型的变量

let flag = true;
let res: unknown;
if(flag){
    res = fn1();
}else {
    res = fn2();
}

let msg:unknown = res;

console.log(res)

void类型

//void 当前方法没有返回值

function fn(num:number, num2:number): number{
    return num+num2
}

function fn2(num:number, num2:number): void{
    console.log(num+num2)
}
let run = fn2(1,2)

never类型

//never表示永远都不会发生值的类型

function fn(): never{
    throw new Error("手动错误")
}
function fn1(): never{
    while (true){
        console.log(1)
    }
}

function checkType(msg: string | number | boolean){
    let str = "";
    switch (typeof msg){
        case "string":
            str = "string"
            break;
        case "number":
            str = "number"
            break;
        case "boolean":
            str = "boolean"
            break;
        default:
            let check: never = msg;
    }
    return msg+","+str
}
checkType("123")
checkType(123)


checkType(true)

tuple类型

//tuple元组: 多种元素的组合

//1.数组
//数组中的数据类型应该保持统一
// let arr: any[] = ["name", 18, true]
// arr[0].length;
// arr[1].length;
//如果不统一,那么应该尝试使用对象替代
/*let obj = {
    name: "name",
    age: 18,
    n: true
}*/


//2.元组 必须要赋值
let arr: [string, num