TS基础知识

1.什么是 ts？
ts 全称是 TypeScript
TypeScript 可以理解为是 JavaScript 的扩展，扩展了 js 的语法，因此我们可以在 ts 中继续写 js 的代码而不回报错

TypeScript 又叫做静态的 JavaScript，不能直接引入到 html 中，不能直接被浏览器识别，需要经过 ts 转换器或者是 babel 转化后才能使用

2.如何理解静态语言和动态语言？
类型系统按照类型检查的时机来分类，分为动态类型和静态类型，动态是在运行时候才检查数据类型，静态是在编译时候检查数据类型

静态语言是在编译期间就会做数据类型的检查，也就是要在写代码的时候就声明变量的数据类型。大部分的后台语言比如 java，php 等以及我们要学的 ts 都是静态的。
动态语言是指在运行期间才会去做类型检查的语言，也就是说动态语言声明的时候不需要指定数据类型。比如 javascript 和 python 都是动态的。

3.什么是强类型和弱类型
强类型和弱类型是类型系统按照 是否允许隐式转换 来分类

强类型的语言 指的是 强制数据类型定义的语言，也就是说如果一个变量被指定了某一个类型，如果不经过强制数据类型转换，他永远都是这个数据类型。强类型好处是 更加严谨更加安全。
弱类型 是 数据类型可以被忽略的语言，与强类型相反，一个变量可以赋不同的数据类型的值。好处是 编写代码速度更快更简单。
4.ts 可以理解为就是静态的 js 语言，TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性，所以它们都是弱类型。

5、TypeScript 开发环境搭建
下载 Node.js

64 位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
32 位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi
安装 Node.js

使用 npm 全局安装 typescript

进入命令行
输入：npm i -g typescript
如果是 yarn 就执行 yarn add -g typescript
输入 tsc -v 查看版本号 检查是否装好
创建一个 ts 文件

使用 tsc 对 ts 文件进行编译

进入命令行

进入 ts 文件所在目录

执行命令：tsc xxx.ts

6.如何自动监视 ts 文件的转化

首先在放 ts 的文件夹下打开终端 执行 tsc --init 命令 会生成一个 tsconfig.json 文件
点击 vscode 终端–>选择运行任务–>输入 tsc 按下回车–>选择 tsc:监视 xxxx 文件夹下的 tsconfig.json 文件
之后再写的 ts 代码就会自动转化为 js
7.在生成的 tsconfig.json 中有一个 target 配置 可以去指定由 ts 转化的 js 代码是 es6 的还是 es5 等等
 

1.数组

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]

2.元组

export default{}
//元组类型
let tup1:[string,boolean,number]
tup1=["关晓彤",true,18]
// tup1=[18,"关晓彤",true]
// tup1=["关晓彤",true,18,"毛晓彤"]
console.log(tup1);

3.定义数据

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;

4.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;

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

6.枚举

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["女"]);

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

8.变量声明与解构

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

9.类型断言

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

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

接口

1.接口的基本使用

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

2.可选属性与只读属性

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;

3.索引签名

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:"甄嬛传"}

4.函数接口

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

5.接口的继承

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

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

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
}