TypeScript 基础数据类型与接口

一、数据类型

1.基础数据类型

（1）数值类型

let num: number;
num = 100
console.log(num);

（2）布尔类型

let flag: boolean;

flag = true;

flag = false;

（3） 字符串

let beauty: string;

let msg = "成果"

let dream = `女神是$(beauty)`

（4）数组的基本使用

// 方式一

let beautyArr: string[];

beautyArr = ["刘亦菲", "刘诗诗", "安以轩"]

// beautyArr=["刘亦菲","刘诗诗","安以轩",100] 不可以传number



// 方式二

let numArr: Array<number>;

numArr = [1, 2, 3, 4, 5,];

// numArr=[1,2,3,4,5,"刘亦菲"]; 不可传string



// 联合类型

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



myBeauty=["刘亦菲","刘诗诗","安以轩",100]

myBeauty=["刘亦菲","刘诗诗","安以轩",100,true]

（5）元组

let tup1:[string,number,boolean];
tup1=["关晓彤",25,true]
// tup1=[123,25,true]
// tup1=["关晓彤","关晓彤",true]

console.log(tup1);

2、any和void

(1)any类型

any表示任意类型，当我们不清楚某个值的具体类型的时候我们就可以使用any//在Ts中任何数据类型的值都可以负责给any类型

//使用场景一
//变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查

let temp: any;
temp = "刘亦菲";
temp = 18;
temp = true;

//使用场景二
//改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查
let x: any = 4;
x.IfitExists();
console.log(x.toFixed());

//使用场景三
// 定义存储各种类型数据的数组时
let arr: any[] = [1, false, 'fine'];
arr[1] = 100;

(2)void型

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。l/当一个函数没有返回值时，你通常会见到其返回值类型是void
在TS中只有nu71和undefined可以赋值给void类型

function makeMoney(): void {
    console.log("I want to make much money and marry a wife! ! ! ");
}
makeMoney()

let test1: void;
// test1 ="刘亦菲";
// test1 =12;
// test1 =true;

// 严格模式下null不会报错
test1 =null;
test1 = undefined;

3、null与undefined 

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

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

let x: undefined = undefined;

let y: null = null;
//  x="刘亦菲";
//  x=28;
//  y="刘亦菲";
//  y=28;

let money: number = 100;

// 非严格模式下，可以把nu11和undefined赋值给number类型的变量。
money = null;
money = undefined;

4、never与object

（1）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)
        {
        //...
        }
    }

 

（2）object类型

表示一个对象

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

let goddess:object;
// goddess=true;
// goddess="刘亦菲";
// goddess=18;

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

console. log(goddess);

5、枚举

（1）枚举

enum Gender {
    male,//男
    female//女

}

let gender: Gender;
gender = Gender.male;
gender = Gender.female;

gender = "666";
gender = true;
gender = 10;// 枚举本身是一个数字

console.log(gender);


注意点:TS中的枚举类型的取值，默认是从上至下从o开始递增的·
虽然默认是从0开始递增的，但是我们也可以手动的指定枚举的取值的值
enum Gender {
    male,//男
    female//女
}
console.log(Gender.male);
console.log(Gender.female);


注意点:如果手动指定了前面枚举值的取值，那么后面枚举值的取值会根据前面的值来递增
enum Gender {
    male,//男
    female=5//女
}

console.log(Gender.male);//0
console.log(Gender.female);//5

enum Gender {
    male=100,//男
    female=200//女
}

console.log(Gender.male);//100
console.log(Gender.female);//200


enum Gender {
    male,//男
    female//女
}

console.log(Gender.male);//0
console.log(Gender[0]);// ?

const getNum=()=>200

let gender:Gender;
gender=Gender.female;
gender=100;
gender=getNum();

（2）字符枚举

enum Direction{
    up="UP",
    down="DOWN"
}
console.log(Direction.up);//UP
console.log(Direction.down);//DOWN
console.log(Direction[0]);//undefined
console.log(Direction["up"]);//UP

let x:Direction;
x=Direction.down;
x="左"; 不可以

const getDirection=()=>"右"
x=getDirection();  不可以

 （3）异构枚举

//枚举中既包含数字又包含字符串，我们就称之为异构枚举
//注意点:"如果是字符串枚举，那么无法通过原始值获取到枚举值
enum Gender {
    male = 1,
    female = "女"
}

console.log(Gender.male);
console.log(Gender.female);
console.log(Gender[1]);
console.log(Gender['女']);

6、bigint与symbol

（1）bigint类型:表示非常大的数

// BigInt类型
let hunder1: bigint = BigInt(100);
let hunder2: bigint = 100n;

console.log(hunder1);
console.log(hunder2);

（2）symbo1类型:表示全局唯一引用

// Symbol类型
let firstName = Symbol("name");
let secondName = Symbol("name");

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

if (firstName === secondName) {
    console.log("ok");
} else {
    console.log("not ok");
}

7、变量声名与解构

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 [, fourth, , fifth,] = goddess;
console.log(fourth);
console.log(fifth);

// 对象解构
let beauty ={
    name:'杨超越',
    age:18,
    sex:'女'
} 

let {name, age, sex} =beauty;
console.log(name);
console.log(age);
console.log(sex);

8、类型断言

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

9、type别名

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

二、接口

1、接口的基本使用

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

2、可选属性与只读属性

（1）可选属性

interface IFullName {

    firstName: string

    lastName: string

    age?: number

}

let goddass: IFullName = {

    firstName: "杨",

    lastName: "超越",

    // age:18

}

（2）只读属性

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;


//索引签名
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: "甄嬛传" }

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、接口的继承

（1）单继承

interface IPerson {
    age: number
}
interface IName extends IPerson {
    name: string
}
let person: IName = {
    name: "王思聪", age: 18
}

（2）多继承

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]

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