TyoeScript

一.    基本数据类型

1.布尔类型

类型为布尔类型的变量的值只能是 true 或 false，如下：

let flag:boolean;
flag :true;
flag:false;

2 .数值类型

TypeScript 和 JavaScript 一样，所有数字都是浮点数，所以只有一个number类型，而没有int或者float类型

let num :number;
num =11;
// num =0x00;

3. 字符串

字符串类型中你可以使用单引号和双引号包裹内容，但是可能你使用的 tslint 规则会对引号进行检测，使用单引号还是双引号可以在 tslint 规则里配置。你还可以使用 ES6 语法——模板字符串，拼接变量和字符串更为方便。

let beauty:string;
beauty="庞狗"
let msg =`我是${beauty}爸爸`
console.log(msg)

4 .数组

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];
 

5.元组

元组可以看做是数组的拓展，它表示已知元素数量和类型的数组。确切地说，是已知数组中每一个位置上的元素的类型，来看例子：

let tup1:[string,boolean,number]
tup1=["关晓彤",true,18]
// tup1=[18,"关晓彤",true]
// tup1=["关晓彤",true,18,"毛晓彤"]
console.log(tup1);

6.null 和 undefined

null 和 undefined 有一些共同特点，所以我们放在一起讲。说它们有共同特点，是因为在 JavaScript 中，undefined 和 null 是两个基本数据类型。在 TypeScript 中，这两者都有各自的类型即 undefined 和 null，也就是说它们既是实际的值，也是类型，来看实际例子：

 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;

7.定义数据

使用场景一

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;

8.never与object

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

9.枚举

enum类型在 C++这些语言中比较常见，TypeScript 在 ES 原有类型基础上加入枚举类型，使我们在 TypeScript 中也可以给一组数值赋予名字，这样对开发者来说较为友好。比如我们要定义一组角色，每一个角色用一个数字代表，就可以使用枚举类型来定义：

enum Roles {
  SUPER_ADMIN,
  ADMIN,
  USER
}
 

上面定义的枚举类型 Roles 里面有三个值，TypeScript 会为它们每个值分配编号，默认从 0 开始，依次排列，所以它们对应的值是：

enum Roles {
  SUPER_ADMIN = 0,
  ADMIN = 1,
  USER = 2
}
 

当我们使用的时候，就可以使用名字而不需要记数字和名称的对照关系了：

const superAdmin = Roles.SUPER_ADMIN;
console.log(superAdmin); // 0
 

你也可以修改这个数值，比如你想让这个编码从 1 开始而不是 0，可以如下定义：

enum Roles {
  SUPER_ADMIN = 1,
  ADMIN,
  USER
}
 

这样当你访问Roles.ADMIN时，它的值就是 2 了。

你也可以为每个值都赋予不同的、不按顺序排列的值：

enum Roles {
  SUPER_ADMIN = 1,
  ADMIN = 3,
  USER = 7
}
 

通过名字 Roles.SUPER_ADMIN 可以获取到它对应的值 1，同时你也可以通过值获取到它的名字，以上面任意数值这个例子为前提：

console.log(Roles[3]); // 'ADMIN'
 

10.bigint与symbol

let hundered1:bigint=BigInt(100);
let hundered2:bigint=100n;

console.log(hundered1)
console.log(hundered2);


let firstName =Symbol("name");
let seciondName =Symbol("name");

// console.log(firstName);
// console.log(seciondName);

if(firstName===seciondName){
    console.log("我们一样")
}else{
    console.log("我们不一样");
    
}

11.变量声明与解构 

数组解构

let goddess=["王祖贤","关之琳"];
 let [firstName,secondName]=goddess;
 console.log(firstName);
 console.log(secondName);

对象解构

let beauty={
    uname : "杨超越",
    age: 20,
    sex: "女",
}
let {uname,age,sex} = beauty;
console.log(uname);
console.log(age);
console.log(sex);

11.类型断言

// 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,似乎一直相伴但又永远相离")

12.ype别名

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

二.接口

1.接口的基本使用

接口可以继承，这和类(类的相关知识，我们会在后面全面详细的学习)一样，这提高了接口的可复用性。来看一个场景：

我们定义一个Vegetables接口，它会对color属性进行限制。再定义两个接口，一个为Tomato，一个为Carrot，这两个类都需要对color进行限制，而各自又有各自独有的属性限制，我们可以这样定义：

interface Vegetables {
  color: string;
}
interface Tomato {
  color: string;
  radius: number;
}
interface Carrot {
  color: string;
  length: number;
}
 

2.可选属性与只读属性

可选属性：当age加上？以后    age的值就变成可选属性   能选择输出

interface IFullName{
firstName : string
lastName: string
age? : number
}
let goddass :IFullName={
firstName :"杨",
lastName:"超越",
// age:18
}

只读属性：下面这个案例无法分配name age  因为它们已经定义了

interface IInfo{
readonly name : string
readonly age: number
}

let info:IInfo={
name: "赵丽颖",
age:18
}

// info.name="范冰冰";
// info.age=19;

3.索引签名

解决参数可多可少的问题

方案一:使用可选参数

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;

4.函数接口

定义函数接口

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

5.接口的继承

单继承

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

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

相同点:

// 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]

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
}