TypeScript

最新推荐文章于 2024-02-07 15:22:21 发布

锅絮不是我

最新推荐文章于 2024-02-07 15:22:21 发布

阅读量368

点赞数

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/myx20220713/article/details/126755026

版权

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

typescript式Javascript的超集，遵循了最新的ES6、ES5的规范，typescript扩展了JavaScript的语法

这个语言添加了可选的静态类型和基于类的面向对象的编码，通俗的理解就是js的一个特殊版本，适用于大型的项目开发

最新的vue和react也集成了ts

nodejs框架中的next.js midway也用了

JavaScript 与 TypeScript的区别

TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。

TS基础数据类型

1. 基本类型

// 基础数据类型
let stn:string
stn="请问"
// stn=100
console.log(stn)
 
let sun:number
sun=100
// sun="请问"
console.log(sun)
 
let br:boolean
br=true
console.log(br)

2. 数组

// 数组
let str:string[]
str=["请问","阿斯顿","自行车"]
// str=["请问","阿斯顿","自行车",100,true]
console.log(str)
 
//方法二
let sun:Array<number>
sun=[1,2,3,4]
// sun=[1,2,3,4,"自行车",true]
console.log(sun)
 
//方法三  联合类型
let union:(number|string)[]
union=[100,"请问"]
 
//方法四  任意类型
let test:any[]
test=["请问","阿斯顿","自行车",20,true]

3.元组

let tup:[string,number,boolean]
tup=["自行车",100,true]
// tup=[100,"自行车",true]  //报错 按顺序来
// tup=["自行车",100,true,10] //报错  超出
console.log(tup);

4. any与void

    //变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查
    let temp: any;
    temp = "刘亦菲";
    temp = 18;
    temp = true;
    // 使用场景二
    //改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
    let x: any = 4;
    // x.IfitExists();
    console.log(x.toFixed())

    //使用场景三
    //定义存储各种类型数据的数组时
    let arr: any[] = ["刘亦菲", 18, true];
    console.log(arr[0]);
    //void类型
    //某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。
    //当一个函数没有返回值时，你通常会见到其返回值类型是void
    //在TS中只有null和lundefined可以赋值给void类型
    function test(): void {
        console.log("往后余生, 风雪是你，平淡是你, 敲每一行代码想的都是你。");
        console.log("你是cSs, 我是DIV, 就算我的布局再好, 没了你也就没了色彩。");
    }
    test();


    let test1: void;
    // test1="刘亦菲";
    // test1=18;
    // test1=true;
    //严格模式下会null报错(在json文件内改strict": true)
    test1 = null;
    test1 = undefined;

5. null与undefined

let x:undefined=undefined
let y:null=null;
 
let money:number=100;
// money=null;
// money=undefined;

6. never与object

export default {}
//Never类型
//never类型表示的是那些永不存在的值的类型
//例如:never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型<
//变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
//返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
// error("挂掉了~~~")
//推断的返回值类型为never
function fail() {
    return error("GG了~~")
}
// fail()
//返回never的函数必须存在无法达到的终点
function loop(): never {
    while (true) {
        // ...
    }
}
 
 
 
// Object类型表示一个对象
//定义了一个只能保存对象的变量
let goddess: object;
// goddess=true;
// goddess = "刘亦菲";
// goddess = 18;
goddess = { name: "刘亦菲", age: 18 };
console.log(goddess);

7.枚举

enum类型是对javaScript标准数据类型的一个补充。像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

枚举用于表示固定的几个取值

例如:人的性别只能是男或者女

注意点:TS中的枚举底层实现的本质其实就是数值类型，所以赋值一个数值不会报错

注意点:TS中的枚举类型的取值，默认是从上至下从0开始递增的

虽然默认是从0开始递增的，但是我们也可以手动的指定枚举的取值的值

注意点:如果手动指定了前面枚举值的取值，那么后面枚举值的取值会根据前面的值来递增

注意点:如果手动指定了后面枚举值的取值，那么前面枚举值的取值不会受到影响

注意点:我们还可以同时修改多个枚举值的取值，如果同时修改了多个，那么修改的是什么最后就是什么

我们可以通过枚举值拿到它对应的数字

我们还可以通过它对应的数据拿到它的枚举值

数字枚举

1.数字枚举的取值可以是字面量,也可以是常量,也可以是计算的结果

⒉.如果采用字面量对第一个成员进行赋值，下面的成员会自动递增

3.如果采用常量或计算结果进行赋值，则下面的成员也必须初始化

字符串枚举

1.如果采用字面量对第一个成员进行赋值，下面的成员也必须赋值

⒉采用[index]的形式不能获取到内容,需要传入[key]

3.字符串枚举不能使用常量或者计算结果给枚举值赋值

4.它可以使用内部的其它枚举值来赋值

异构枚举:枚举中既包含数字又包含字符串,我们就称之为异构枚举

如果是字符串枚举,那么无法通过原始值获取到枚举值

8. bigint与symbol

export default {}
//bigint
let hundred1: bigint = BigInt(100);
let hundred2: bigint = 100n;
console.log(hundred1);
console.log(hundred2);
 
 
//Symbol
let firstName = Symbol("name");
let seciondName = Symbol("name");
//console.log(firstName)
//console.log( seciondName);
if (firstName === seciondName) {
    console.log("我们一样")
} else {
    console.log("我们不一样")
}

9. 变量声明与解构

export default{}
 
//数组解构
// let goddess=["王祖贤","关之琳"];
// let [firstName,secondName]=goddess;
// console.log(firstName);
// console.log(secondName);
 
 
// let goddess=["王祖贤","关之琳","张曼玉","利智"];
// let[third,...rest]=goddess;
// console.log(third);
// console.log(rest);
 
// let goddess=["王祖贤","关之琳","张曼玉","利智"];
// let [,forth,,fifth]=goddess;
// console.log(forth);
// console.log(fifth);
 
 
//对象解构
let beauty={
    uname : "杨超越",
    age: 20,
    sex: "女",
}
let {uname,age,sex} = beauty;
console.log(uname);
console.log(age);
console.log(sex);

10. 类型断言

export default {}
 
// let str:any ="世界上最遥远的距离就是,你是if而我是else,似乎一直相伴但又永远相离";
// //方式一
// let len=(<string>str).length 
// //方式二
// let num=(str as string).length
 
// console.log(len);
// console.log(num);
 
function typeAs(x: number | string) {
    let len = (<string>x).length
    //let len=(x as string)
    // console.log(len)
    if (typeof x == "string") {
        console.log(len);
    } else {
        console.log(x);
    }
}
typeAs("世界上最遥远的距离就是,你是if而我是else,似乎一直相伴但又永远相离");
typeAs(30);

11. type别名

export default{}
 
// type beautys="斗战胜佛"|"齐天大圣"|"弼马温"|"孙行者"
 
// let one:beautys;
// // one=1;
// // one=true;
// // one="大师兄"
// one="斗战胜佛"
 
//第二种 定义别名
type myfun = (a:number,b:number) =>number;
//声明具体函数
let fun:myfun = (a:number,b:number) =>a + b;
let result=fun(10,20);
console.log(result);
 
 
type myGoddass={
    name: string,age: number,sex:boolean
}
let yifi:myGoddass={
    name: "刘亦菲",
    age:18,
    //sex:"男"//报错，不符合定义的类型
    sex:true
}

12.接口

接口的基本使用

export default {}
interface IFullName {
    firstName: string
    lastName: string
}
let goddassName: IFullName = {
    firstName: "刘",
    lastName: "亦菲"
}
 
console.log(goddassName.firstName, goddassName.lastName);
 
function say({ firstName, lastName }: IFullName): void {
    console.log(`我的女神是${firstName}${lastName}`)
}
say(goddassName);
// say({ name: "杨幂" })

13. 可选属性与只读属性

export default {}
//可选属性
interface IFullName {
    firstName: string
    lastName: string
    age?: number //可有可无
}
let goddass: IFullName = {
    firstName: "杨",
    lastName: "超越",
    age: 18
}
 
//只读属性
interface IInfo {
    readonly name: string
    readonly age: number
}
let info: IInfo = {
    name: "赵丽颖",
    age: 18
}
// info.name = "范冰冰";
// info.age = 19;

14.索引签名

export default {}
 
//解决参数可多可少的问题
//方案一:使用可选参数
interface IFullName {
    firstName: string
    lastName: string
    age?: number
}
let goddass1: IFullName = { firstName: "刘", lastName: "亦菲", age: 18 }
let goddass2: IFullName = { firstName: "刘", lastName: "亦菲" }
//方案二:使用变量
let info = { firstName: "杨", lastName: "幂", age: 18, song: "爱的供养" };
let goddass3: IFullName = info;
//方案三:使用类型断言
let goddass4: IFullName = ({ firstName: "t杨", lastName: "幂", age: 18, song: "爱的供养", tv: "仙剑奇侠传三" }) as IFullName;
//索引签名
interface IBeauty {
    [props: string]: string
}
let goddass5: IBeauty = { name1: "刘亦菲", name2: "刘诗诗", name3: "赵丽颖" };
 
// interface IBeauty2 {
//     [props: string]: boolean
// }
// let goddass10: IBeauty2 = { name1: false };
// console.log(goddass10);
 
 
let ages = { age1: 10, age2: 20, age3: 30 }
interface IMyFullName {
    firstName: string
    lastName: string
    [props: string]: string
}
let goddass6: IMyFullName = { firstName: "刘", lastName: "亦菲", sex: "女", sex2: "哈哈", sex3: "哈哈" }

15.函数接口

export default {}
//定义函数接口
interface IMakeMoney {
    (salary: number, reward: number): number
}
let sum: IMakeMoney = function (x: number, y: number): number {
    return x + y;
}
let res = sum(100, 1000);
console.log(res);

16.接口的继承

export default {}
//单继承
interface IPerson {
    age: number
}
interface IName extends IPerson {
    name: string
}
let person: IName = {
    name: "王思聪", age: 18
}
 
//多继承
interface IFatherMoney {
    m1: number
}
interface IMontherMoney {
    m2: number
}
interface ISonMoney extends IFatherMoney, IMontherMoney {
    s1: number
}
let sonMoney: ISonMoney = {
    m1: 1000,
    m2: 10000,
    s1: 1
}
console.log(`儿子共有${sonMoney.m1 + sonMoney.m2 + sonMoney.s1}`)

17.接口与类型别名的异同

export default {}
//相同点:
// 1.都可以描述属性或方法
type womanStar = {
    name: string
    age: number
    show(): void
}
interface IwomanStar {
    name: string
    age: number
    show(): void
}
 
let star1: womanStar = {
    name: "刘亦菲",
    age: 18,
    show() {
        console.log("仙剑奇侠传一")
    }
}
let star2: IwomanStar = {
    name: "杨幂",
    age: 18,
    show() {
        console.log("古剑奇谭")
    }
}
 
//2.都允许拓展
type money = {
    y1: number
}
type money2 = money & {
    y2: number
}
let salary: money2 = {
    y1: 10,
    y2: 20
}
 
 
interface IStar1 {
    name: string
}
interface IStar2 extends IStar1 {
    age: number
}
let star: IStar2 = {
    name: "范冰冰",
    age: 18
}
 
//不同点:
// 1.type可以声明基本数据类型，联合类型，数组等
//interface只能声明变量
 
type t1 = number;
type t2 = number | string;
type t3 = [number | boolean]
 
// interface ITest=number
 
// 2.当出现使用type和interface声明同名的数据时
//type会直接报错
 
 
// type myName = {
//     name: string
// }
// type myName = {
//     name: string
// }
interface IMayName {
    name: string
}
interface IMayName {
    name: string,
    age: number
}
let myName: IMayName = {
    name: "库里",
    age: 30
}