首页我们需要了解什么是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