开发环境搭配

数值类型

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]

元组

export default{}

//元组类型

let tup1:[string,boolean,number]

tup1=["关晓彤",true,18]

// tup1=[18,"关晓彤",true]

// tup1=["关晓彤",true,18,"毛晓彤"]

console.log(tup1);

定义数据

export default{}

// 使用场景一

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

export default{}

// TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null

//和void相似，它们的本身的类型用处不是很大

let x:undefined=undefined;

let y:null=null;

// x="刘亦菲";

// x=18;

// y="刘亦菲";

// y=19;

let money : number=100;

money=null;

money=undefined;

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了~~")

}

//返回never的函数必须存在无法达到的终点

function loop():never {

while(true)

{

//...

}

}

//object类型

//表示一个对象

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

let goddess:object;

//goddess=true;

// goddess="刘亦菲";

// goddess=18;

goddess={name: "刘亦菲",age: 18};

console. log(goddess);

枚举

export default{}

// enum Gender{

// Male,//男

// Female //女

// }

// let sex;

// sex=1;//男

// sex=2;//女

// let gender:Gender;

// gender=Gender.Male;

// gender=Gender.Female;

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

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

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

// enum Gender{

// Male=1,//男

// Female//女

// }

// console.log(Gender.Male) //1

// console.log(Gender.Female) //2

// enum Gender{

// Male=100,//男

// Female=200//女

// }

// console.log(Gender.Male)//100

// console.log(Gender.Female) //200

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

// enum Gender{

// Male,//男

// Female=5//女

// }

// console.log(Gender.Male)//0

// console.log(Gender.Female)//5

// enum Gender{

// Male,Female

// }

// console.log(Gender.Male)//0

// console.log(Gender[0]);//Male

// enum Gender{

// Male,Female

// }

// const getNum=()=>200

// let gender:Gender;

// gender=Gender.Female;

// gender=100;

// gender=getNum();

//字符串枚举

// enum Direction{

// up="Up",

// Down="Down"

// }

// console.log(Direction.up);

// console.log (Direction.Down);

// console.log(Direction[0]);

// console.log(Direction["up"]);

// let x:Direction;

// x=Direction.Down;

// x="左";

// const getDirection=()=>"右";

// x=getDirection();

//异构枚举

// enum Gender{

// Male=1,

// Female="女"

// }

// console.log(Gender.Male);

// console.log(Gender.Female);

// console.log(Gender[1]);

// console.log(Gender["女"]);

bigint

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("我们不一样")

}

变量声明与结构

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

类型断言

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)

}

typeAs("世界上最遥远的距离就是,你是if而我是else,似乎一直相伴但又永远相离")

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

}

console.log(yifi.name);

接口的基本使用

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:"杨幂"})

可选属性与只读属性

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;

索引签名

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 godass4:IFullName=({firstName:"杨",lastName:"幂" ,age:18,song:"爱的供养" ,tv:"仙剑奇侠传三"}) as IFullName;

//索引签名

interface IBeauty{

[ props:string]: string

}

let goddass5={name1:"刘亦菲", name2: "刘诗诗" , name3: "赵丽颖"};

interface IAge{

[ props:string] : number

}

let ages={age1: 10,age2: 20,age3: 30}

interface IMyFullName{

firstName : string

lastName: string

[props :string]: string

}

let goddass6:IMyFullName={firstName: "刘",lastName:"亦菲" ,sex:"女"}

let goddass7: IMyFullName={firstName: "刘", lastName: "亦菲",tv:"甄嬛传"}

函数接口

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

接口的继承

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}`)

接口与类型别名

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}`)