什么是TypeScript?
- Typescript是JavaScript的一个超集，支持ECMAScript 6标准。
- TypeScript 由微软开发的自由和开源的编程语言。
- TypeScript 设计目标是开发大型应用，它可以编译成纯Javascript，编译出来的JavaScript 可以运行在任何浏览器上
- TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
JavaScript 与 TypeScript的区别
- TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
- TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript 代码进行编译。
TS优势
- 更早的发现错误
- 任何位置都有代码提示，增加开发效率
- 类型系统提升了代码的可维护性，重构更客易
- 使用最新的ECMAScript语法，最新
- TS类型推断机制，降低成本
开发环境搭建
- 安装vsCode
- 安装Node.js:使用命令node -v来检查nodejs版本
- 安装TypeScript编译器: npm i typescript -g
- tsc --init #生成配置文忤
- 使用tsc命令来转换TS成JS:例如tsc hel1o.ts
- 自动编译tsc --watch
初次使用tsc命令可能会出现如下错误;
解决方案:https://blog.csdn.net/virusss/article/details/122940140
TS中的数据类型
数组的基本类型
- number类型:双精度64位浮点值。它可以用来表示整数和分数。
- boolean类型:表示逻辑值:true和false。
- string类型:一个字符系列，使用单引号()或双引号(")来表示字符串类型。反引号（^）来定义多行文本和内嵌表达式
export default {}
// 数组的基本类型
let text: string[]; //字符串类型
text = ["www", "www"]
// text=[123,432]
let numArray: Array<number>; // 数字类型
numArray = [1, 2, 3, 4]
// numArray =["sss"]
let num: (number | string | boolean)[]; // 柱状 （联合数据类型）
num = [22, 4, 3, 534, "dsdsd", false]
// 任意类型 (不建议用 )
let ren: any[]
ren = ["www", "www", true, 3, 4, 5]
元组
- 元组类型Tuple
- TS中的元组类型其实就是数组类型的扩展
- 元组类型用来表示一直元素数量和类型的数组，各元素的类型不必相同，对应的位置的类型需要相同
export default {}
// 元组类型
let tup1: [string, boolean, number]
tup1 = ["sss", true, 23]
// tup1=["sss",23,true]
作用： 元组用于保存定长定数据类型
any的场景
any:表示任意类型,当我们不清楚某个值的具体类型的时候我们就可以使用any
export default {}
// 场景一
let temp: any; //变量的值会动态改变时，比如来自用户的输出，任意值类型可以让这些变量跳过阶段的类型检查
temp = "字符串";
temp = true;
temp = 123;
// // 场景二
let x: any = 4;
console.log(x.toFixed())
// // 场景三
let arr: any[] = ["张三", 12, true];
console.log(arr[2]);
void类型
void:当一个函数没有返回值时，你通常会见到其返回值类型是void
let test1: void;
// test1="张三";
// test1=23;
// test1=true;
test1 = null; //修改 "target": "es2020 "strict": false, "
test1 = undefined;
null与undefined
undefined与null两者各自有自己的类型分别叫做undefined 和null 与void相似，他们本身的类型不是很大
非严格模式下可以把null和undefined赋值给nullber类型的变量
export default {}
// 类型 值
let x: undefined = undefined;
let y: null = null;
// x="刘亦菲"
// x=20
let money: number = 20;
money = null
money = undefined
Never类型
表示的是那些永不存在的伯的类型;
never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;变量也可能是never类型，当它们被永不为真的类型保护所约束
Object类型
object表示非原始类型，也就是除.number ,string, boolean，symbo1，nu11或undefined之外的类型定义了一个只能保存对象的变量
我们后面更常用的是(接口与类型别名。
never类型表示的是那些用不存在的值的类型；
列如：never类型是那些总是会抛出异常或根本不会有返回值的函数表达式或箭头函数表达式的返回值类型
变量也可能是never类型，当他们被永不为真的类型保护所约束时
返回never的函数必须存在无法达到的终点
// export default {}
// function error(message: string) {
// throw new Error(message)
// }
// error("挂掉了~~~~")
// function fail() {
// return error("GGG了~~~~")
// }
// fail()
// object类型
let goddess: object;
goddess = { name: '张三', age: 34 };
console.log(goddess);
枚举
enum类型是对javaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
第一种：
enum Gender {
Male,
Female
}
let gender: Gender;
// gender = Gender.Male
gender = Gender.Female
// console.log(gender); //0
console.log(gender); //1
第二种 赋值（给第一个赋值第二个就会以此类推 下标）
enum Gender {
Male = 1,
Female
}
console.log(Gender.Male) //1
console.log(Gender.Female)//2
第三种 （给第二个赋值，第一个就会为0 下标）
enum Gender {
Male,
Female = 9
}
console.log(Gender.Male) //0
console.log(Gender.Female)//9
第四种 （给两个赋值 效果如下！！！）
enum Gender {
Male = 100,
Female = 99
}
console.log(Gender.Male) //100
console.log(Gender.Female)//99
第五种 （直接输出字面量 或者 下标 ）
enum Gender {
Male, //字面量
Female
}
console.log(Gender.Male) //0
console.log(Gender[0])//Male
第六种 （调用函数）
enum Gender {
Male,
Female
}
let getNum = () => 200
let gender: Gender;
// gender = Gender.Female;
// gender = "100"; //不可写字符串
gender = getNum();
console.log(gender) //200
第七种 （字符串枚举）
enum Direction {
Upp = "Up",
Downn = "Down"
}
console.log(Direction.Upp);
console.log(Direction.Downn);
// console.log(Direction[0]); //undefined
第八种 （异步枚举）枚举中既包含字符串也包含数字
注意点：如果是字符串枚举，那么无法通过原始值获取到枚举值
// 3。异构枚举
enum Gender {
Male = 1,
Female = "女"
}
console.log(Gender.Male); //1
console.log(Gender.Female);//女
console.log(Gender[1]); //Male
// console.log(Gender['女']); //undefined
bigint与symbol
"target": "es2020" 可用
bigint( )类型表示非常大的数
export default {}
let num1: bigint = BigInt(100);
let num2: bigint = 100n
console.log(num1); //100n
console.log(num2); //100n
symbol 表示全局唯一引用
export default {}
let num1: bigint = BigInt(100);
let num2: bigint = (100n)
console.log(num1); //100n
console.log(num2); //100n
let firstName = Symbol("name");
let seciondName = Symbol("name");
if (firstName === seciondName) {
console.log("ok");
} else {
console.log("no");
}
变量声明与解构
数组解构
export default {}
let get = ["张三", "赵四"];
let [zhangsan, zhas] = get
console.log(zhangsan)
console.log(zhas);
let get1 = ["张三", "赵四", "王五", "赵六"]
let [wangwu, ...zhaoliu1] = get1
console.log(wangwu)
console.log(zhaoliu1);
let get2 = ["张三", "赵四", "王五", "赵六"]
let [, zhaosi, , zhaoliu] = get2
console.log(zhaosi)
console.log(zhaoliu)
对象解构
export default {}
// 对象解构
let get3 = {
name: "张三",
age: 18,
sex: "女"
}
let { name, age, sex } = get3;
console.log(name);
console.log(age);
console.log(sex);
类型断言
语法格式 1. <类型> 值 2. 值 as 类型
// 类型断言
export default {}
// // 语法格式 <数据类型>值 值as 数据类型
let str = "世界上最遥远的距离就是,你是if而我是else，似乎一直相伴但又永远相离"
let len = (<string>str).length;
console.log(len);
let sum = (str as string).length
console.log(sum);
// 函数
function fn(x: string | number) {
let str = (x as string).length
console.log(str);
}
fn("世界上最遥远的距离就是,你是if而我是else，似乎一直相伴但又永远相离")
案例 判断是否为 string 或 number 类型
function fn(x: string | true) {
if (typeof x == "string") {
let str = (x as string).length;
console.log(str);
} else {
console.log(x);
}
}
fn(20)
type别名
类型别名就是给一个类型起个新名字，但是他们都代表同一个类型
export default {}
type beautys = "张三" | "赵四" | "王五" | "老六";
let one: beautys;
// console.log(one); undefined
one = "张三";
// one= "sss"; //报错
// one="六七" //报错
export default {}
// 定义别名
type myFun = (a: number, b: number) => number
// 声明具体函数
let num: myFun = (a: number, b: number) => a + b
// console.log(num);
// 调用
num(10, 20);