TypeScript 学习-CSDN博客

本文链接：https://blog.csdn.net/qq_56042698/article/details/133697410

视频学习来源 TypeScript从入门到精通视频教程-2020年新版_哔哩哔哩_bilibili、技术胖-胜洪宇关注web前端技术-前端免费视频第一博客

文档可以看阮一峰 TypeScript 的 interface 接口 - TypeScript 教程 - 网道 (wangdoc.com)

为了以后学习 Nest.js 基础

1、安装 npm install typescript -g

2、安装 ts-node npm install -g ts-node 为了直接能执行ts代码

视频课程 p1 - p5 代码总结

/*
 * @Author: 黄磊
 * @Date: 2023-10-09 14:02:24
 * @LastEditTime: 2023-10-09 15:36:15
 * @FilePath: \td-pdac:\Users\12047\Desktop\typedemo\demo1.ts
 */



//冒号后面跟的就是要求 string number     根的是{} 就表示是对象  

let name1 : string = 'haunglei'   //基本静态类型   
let age : number = 18   //基本静态类型

//null undefinde boolean void symbol

const xiaojiejie:{   //对象静态类型
    name:string,
    age:Number
} = {
    name:'大脚',
    age:18
}

const xiaojiejies : string [] = ['谢大脚','刘英']    //这个表示 他是个数组 且 数组元素是 string 类型
const ages : number [] = [18,16,49,55]    //这个表示 他是个数组 且 数组元素是 number 类型

class person{}
const dajiao : person = new person()

const fanhuizhifuchaundehanshu : ()=>string = ()=>{return '需要返回的字符串'}     //表示他是个函数且返回值是string

//对象类型
//对象类型  数组类型 类类型 函数类型



//type annotation 类型注解
//type inference  类型推断

let count :number;
count = 123

let countinference = 132


function gettotal(one : number,two :number) : number{    //这个number 限制的是函数的返回值类型
    return one + two
}
const total : number = gettotal(1,2)


function sayhello() : void{   //没有返回值
    console.log('hello')
}

function errorfun() : never{    //永远执行不完代码
    throw new Error()
    console.log('hello')
}

function getnumber ({one,two} : {one : number ,two : number}){    //形参这里传对象的话 类型注解需要这个格式
    return one + two
}
const total1 = getnumber({one:1,two:2})

视频课程p6-p9 代码总结重点接口 interface

/   p6 数组类型注解

const numarr : number [] = [18,16,49,55]
const strarr : string [] = ['a','b','c']
const undefindearr :undefined[] = [undefined,undefined]
const arr : (string | number)[] = [1,'xx']

const xiaojiejiex: {name: string,age: number}[] = [
    {
        name:'liuying',
        age:18
    },
    {
        name:'xiedajia',
        age:18
    }
]

//type alias 类型别名

type lady = {   
    name:string,
    age:number
}

const xiaojiejiexx: lady[] = [
    {
        name:'liuying',
        age:18
    },
    {
        name:'xiedajia',
        age:18
    }
]

/   p7 元组的使用时类型约束
//和数组很像   简单来说就是 类型约束需要的更加严格 且需要的是按照 顺序 进行约束

const shuzu : (string | number)[] = [1,'xx','dfad']    
const yuanzu : [number,string,string] = [1,'xx','dfad']  //必须是先数字 再字符串 再字符串

//p8  初识interface 接口

interface Girl {
    name:string;
    age:number;
    bust:number
    waistline ?: number;   //代表这个属性不是必须的
    [propname:string] :any; //代表这个key 必须是string  值可以是任何
    say():string;           //方法 say 返回值是string
}

const girl = {
    name:'dajiao',
    age:18,
    bust:98,
    waistline:21,
    sex:'女',
    say(){
        return '欢迎光临'
    },
    teacher(){   //这是为了下面 teacher 继承后调用才添加的
        return 'xxx'
    }
}

const getgirl = (girl:Girl) => {   //代表这个形参格式需要满足Girl这个接口约束
    console.log(girl.name)
    console.log(girl.age)
    console.log(girl.bust)
}

getgirl(girl)



class xiaojiejiecla implements Girl{   //也可以来约束类
    name = 'liuying'
    age = 19
    bust: 54
    say(){
        return 'xxx'
     }

}

interface teacher extends Girl{    //接口的继承 teacher 继承了 Girl 
    teacher() :string
}

function teacherfun (girl:teacher){  //因为需要满足这个teacher 就需要在girl 中创建一个teacher 方法
    console.log(girl.name)
    console.log(girl.age)
    console.log(girl.bust)
}
teacherfun(girl)  //

视频课程p10-p14代码总结重点类 class

//p10 类的概念和使用

class lady {
    content = 'hai shuaige'
    sayhello(){
        return this.content
    }
}

const goddess = new lady()
console.log(goddess.sayhello())

class xx extends lady{   //xx 继承 lady
    saylove(){
        return 'i love you'
    }
}
const xxx = new xx()
console.log(xxx.sayhello())

class yy extends lady{   //yy 继承 lady   且重写了父类的 sayhello
    sayhello(){
        return 'yy'
    }
}

class yyy extends lady{   //yy 继承 lady   super 代表调用的是父类的方法
    sayhello(){
        return super.sayhello + 'yyyy'   
    }
}

p11 类的访问类型

// private      私有的  类的内部使用
// protected    受保护的  类的内部使用  
// pulbic       公共的      类的外部内部都可使用

class Person {
    name : string //其实这样写 等于 pulbic name : string  
    private age :number  //只能在这个类里面使用
    protected bust : number  //可以在子类中使用
    sayage(){
        this.name
        this.age
        this.bust
    }
}

class xx extends Person{
    sayxx(){
        // this.age   报错的 不能使用
        this.bust  
    }
}

const person = new Person()
person.name = 'huanglei'
console.log(person.name)

p12 类的构造函数

class Person {
    public name : string
    constructor(name:string){    //在new 对象的时候自动执行的函数
        this.name = name
    }
    
}

class xx extends Person{   
    public age : number
    constructor(age : number){   
        super('peeson')         //在这个继承子类中 必须调用super 来调用父类的构造函数
    }
}

const person = new Person('huanglei')  //因为构造函数需要参数 所以传
console.log(person.name)


p13 类的getter setter static

class xiaojiejie {
    constructor(private _age :number){  //私有的_age

    }
    get age(){          //为了能在外面看到 age 主要用于在返回时 先处理_age一下 
        return this._age - 8
    }
    set age (age:number){   //为了外面可以改变 赋值 _age
        this._age = age
    }
}

const dajiao = new xiaojiejie(28)   
dajiao.age = 88
console.log(dajiao.age)

class xx {          //静态函数  可以直接调用 不用new一个新对象
    static saylove(){
        return 'xxx'
    }
}
console.log(xx.saylove)


p14 抽象类和只读属性

class Person {
    public readonly _name : string
    constructor(name:string){    //在new 对象的时候自动执行的函数
        this._name = name
    }
}

const person = new Person('huanglei')  //因为构造函数需要参数 所以传
// person._name = 'xxx'    只读属性这样会报错
console.log(person._name)


abstract class Girl {      //abstract 抽象 抽象类中的方法必须是抽象的 也就是没有具体的方法体 只有个名字
    abstract sayhello()
}

class x extends Girl{   //在继承类中 必须实现抽象类 中的抽象方法 sayhello
    sayhello() {
        console.log('hello x');
        
    }
}

class xx extends Girl{
    sayhello() {
        console.log('hello xx');
        
    }
}

视频课程p15-p17代码总结重点配置文件 TypeScript 中文网 (nodejs.cn)

视频课程p18 重点联合类型类型保护类型断言

p18 联合类型和类型保护 

//类型断言  其实有点像类型转换   下面两端代码效果一样   
let accountCode : any = '123';  //刚开始时any 类型
let castedAccountCode = <number>accountCode;    //现在因为自己已经确定了需要的是 number 将之转换

let accountCode : any = '123';
let castedAccountCode = accountCode as number;      //推荐这个写法  jsx 中支持



interface x {
    anjiao:boolean;
    say:() =>{

    }
}

interface xx {
    anjiao:boolean;
    sayy:() =>{
        
    }
}


function fun (animal : x | xx){ //animal 的类型可能是x 或者 xx
    // animal.say()  //直接这样写不行  因为animal 如果是xx 时 没有say 这个方法

    if(animal.anjiao){
        (animal as xx).sayy()    //as 类型断言
    }else{
        (animal as x).say()
    }

    //另一个写法 in
    if('say' in animal){
        animal.say()
    }else{
        animal.sayy()
    }
}
//typeof
function add(first : string | number, second : string | number){
    if(typeof first === 'string' || typeof second === 'string'){
        return `${first}${second}`
    }else{
        return first + second
    }
    // return first + second    //直接写返回不行 string 不能 + 

}

class Numberobj{
    count: number;
}

// instanceof  用于class 
function addobj(first: object | Numberobj, second: object | Numberobj) {
    if (first instanceof Numberobj && second instanceof Numberobj){
        return first.count + second.count;
    }
    return 0;
}

视频课程p19 重点 Enum 枚举类型

//p19 Enum 枚举类型
// Enum 结构比较适合的场景是，成员的值不重要，名字更重要  会自动帮你写值 默认是从0 开始
//可以 Status[1]  Status.SPA   都可以

enum Status {
    MASSAGE,   //默认 MASSAGE = 0    
    SPA,        //默认 SPA = 1
    DABAOJIAN   //默认 DABAOJIAN = 2
}


function getServe (status){
    if (status === Status .MASSAGE) {return "massage";}
    else if (status === Status .SPA) {return"SPA"}
    else if (status === Status .DABAOJIAN) {return "dabaojian"}
} 
const result = getServe(Status.SPA)
console.log(`我要去${result}`);

视频课程p20 - P21重点 TypeScript 中泛型的使用重要*****

//p20 泛型
// 泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

//函数中 泛型使用

function join<T, P>(first: T, second: P) {  //当我不确定这两个参数的类型时 先定义一个泛指的类型 T P
    return`${first}${second}`;
}
join<string , number>("1",2);   //在调用的时候 再确定这两个参数的类型
//泛型中数组的使用

function myFun<T>(params: Array<T>)   //Array<T>  也可以写成 <T>[]
{
    return params;
}
myFun<string>(["123","456"]);



//类中 泛型使用

interface Girl {
    name:string;
}
class SelectGirl<T extends Girl> {  //T 继承了接口Girl 就需要 new 对象的时候 有这个name属性
    constructor(private girls: T[]){}
    getGirl(index: number): string {
        return this.girls[index].name
    }
}
const selectGirl = new SelectGirl([
    {name:'大脚'},
    {name:'刘永'},
    {name:'哈哈'},
])

视频课程p22 - P23 重点 TypeScript 的命名空间 ts文件完整在浏览器运行

namespace

后面的课程实在是不想写代码了可以自己看