TypeScript

了解TS

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TS的数据类型

3种数据类型  Number   String    Boolean

export default{}

// 数值类型

let num:number;

num=100

// num="刘亦菲"

num=3.14

console.log(num);

// 布尔类型

let flag:boolean;

flag=true

flag=false

// 字符串类型

let string:string

string="haha"

// string=17

let mag=`我的是${string}`

console.log(string);

console.log(mag);

 

//联合类型

let myBeauty:(number|boolean|string)[]

myBeauty=[12,true,"haha"]

// 任意类型

let test:any[]

test=["刘","刘1","刘2",18]

test=["刘","刘1","刘2",18,true]

TS定义数据

// 使用场景一
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报错
test1=null;
test1=undefined;

Null和undefined的区别

// TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null
//和void相似，它们的本身的类型用处不是很大

 let x:undefined=undefined;

 let y:null=null;

let money : number=100;

money=null;
 money=undefined;

never与object

// Never类型

// never类型表示的是那些永不存在的值的类型

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型变量也可能是

never类型，当它们被永不为真的类型保护所约束时。

//object类型

//表示一个对象

//定义了一个只能保存对象的变量

TS中枚举

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

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

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

bigint

bigint 是一种基本数据类型（primitive data type）。

JavaScript 中可以用 Number 表示的最大整数,它可以表示任意大的整数。

let hundred1:bigint=BigInt(100);

let hundred2:bigint=100n;

解构

数组解构

let goddess=["王","关"];

let [firstName,secondName]=goddess;

console.log(firstName);

console.log(secondName);

对象解构

let beauty={

    uname : "杨",

    age: 20,

    sex: "女",

}

let {uname,age,sex} = beauty;

类型断言

方式一

let len=(<string>str).length

方式二

let num=(str as string).length

Type别名

语法： 声明基本类型 type 类型别名 = 类型 | 类型 |类型 ... 声明对象 type 类型别名 = { 属性:类型 }

对象声明

type myGoddass={

    name: string,age: number,sex:boolean

}

let yifi:myGoddass={

    name: "刘",

    age:18,

    //sex:"男"//报错，不符合定义的类型

    sex:true

}

console.log(yifi.name);

接口的基本使用

interface对象

interface IFullName{

firstName:string

lastName : string

}

let goddassName : IFullName={

firstName:"刘",

lastName:"六"

}

可选属性

// 可选属性

interface IFullName{

firstName : string

lastName: string

age? : number

}

let goddass :IFullName={

firstName :"杨",

lastName:"菜",

// age:20

}

只读属性

readonly 用于标记一个属性是只读的，也就是不可修改的

interface IInfo{

readonly name : string

readonly age: number

}

let info:IInfo={

name: "赵",

age:18

}

定义函数接口

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);

接口的继承

关键字 extends

单继承

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

}

接口和类型的异同

interface 不需要等号

type 需要等号

相同点

都可以描述属性或方法

都允许拓展

不同点

type可以声明基本数据类型，联合类型，数组等

interface只能声明变量

当出现使用type和interface声明同名的数据时

type会直接报错