typeScript常用的12个知识点

469 阅读2分钟

「这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战」。

今天初步学习了解了下TS的语法

1.静态类型 也可以通过 interface 的方式自定义一个类型

let one: String = '1';
interface type1 {
    name:String,
    age:number,
    arr?:a[],
}
 type a ={
     name:string,
     age:number
 }


let two: type1 = {
    name:'haahh',
    age:1,
};

2.基础静态类型 和 对象 数组 静态类型 函数类型

let jingtai: number = 1;
let duixiang :{name :string} = {name:'1'};
let shuzu : string [] =  ['1','2'];
// 表示  数组中的每一项必须是一个string类型
let hanshu :()=>string = ()=>{return '1'};
// 表示  需要一个方法  方法中必须return出一个string类型

3.类型注解 类型判断

any表示任何类型 
function getTotal (one, two ){ return one + two; }

4.函数参数 和 返回类型的注解

function getTotal1 (one:number, two:number ):Number{
    return one + two;                     
    //表示函数的返回类型是 number 
}
const total = getTotal(1,2);

// void表示 没有返回值
// never  死循环  执行不完的返回值
function number1 ({one}:{one:number}){
    return one
}
const number2 = number1({one:1})
// 方法中的对象定义类型  {one}:{one:number};

5.数组类型的注解

let numberArr:number[] = [1,2,3];
let strNumArr:(number | string)[] = [1,'2'];

// type name  类型别名  可以用type来定义一个类型
type Lady = {name:string , age:number};
let objArr:Lady[] = [{name:'小龙',age:20}];

6.元组的使用(不常用)

let yuanzu:[number,string,number] = [1,'2',3] ;

7.接口 interface 的使用

interface leixing {
    name:string,
    age:number,
    sex?:string,   //加个问号表示  sex这个key可有可无
    [propname:string]:any,  //表示我可以添加任意一项  key是string类型  value是任何类型的
}

let leixin1:leixing = {
    name:'小龙',
    age:18,
};

function leixin2(leixin1){
    console.log(`${leixin1.name}今年${leixin1.age}岁了`);
}
// implements属性  用于限制类的类型
class ren implements leixing {
    name = '小龙';
    age = 18;
}
// extends 用于继承某一个类型
interface teacher extends leixing{
    zhiye:string
}

8.类的概念和使用

class nanren {
    name = 'xiaolong';
    say(){
        return `我叫${this.name}`
    }
}
// 类的继承
class nuren extends nanren{
    sex='女'
};
// 类的重写 super关键字
class nuren1 extends nanren{
    name = super.name + '啊'
};

let nanren1 = new nanren();
console.log(nanren1.say())
// 类的访问类型
class Pessom {
    public name:string;  //内外都可以使用
    private age = 18;          //表示私有类只可以在类的里边使用 也不允许继承里边使用的
    protected sex(){           //不可以在类的外部使用  可以在继承的类里边调用
        return 'nan';
    }
}
let Pessom1 = new Pessom();
Pessom1.name = 'xiaolong'     //表示类的外边使用
// 类的构造函数
class ren2{
    // name:string;
    // constructor(name:string){   //constructor表示构造函数  需要在new的时候传个参数
    //     this.name = name;
    // }
    constructor(public name:string){};   //等同于上侧代码
}
let ren2class = new ren2("xiaolong") 
// 子类继承父类里边的构造函数
class teacher1 extends ren2{
    constructor(public age:number){
        super('xiaolong')              //子类继承父类的构造函数需要用  super('name')
    }
}
// 类的Get  Set 类里边定义的私有key可以在外边访问
class renmen{
    constructor(private _age:number){}
    get age(){
        return this._age    //可以在里边进行操作
    }
    set age (age:number){
        this._age = age    //可以在里边进行操作不用return
    }
}
// 类的静态类 static   可以不用new直接在外边输出
class renmen1 {
    static name1:string = 'xiaolong'
}
console.log(renmen1.name1);
//类的只读属性  readonly  表示类里边的属性只可以赋值一次
class renmen2 {
    readonly name:string;
    constructor(name:string){
        this.name = name;
    }
}
let ren5 = new renmen2('小龙');
// ren5.name = 'hahah'    再赋值的时候就会报错
// 抽象类 abstract
abstract class chouxian{
    abstract ren();         
//因为是抽象类所以里边不用写任何方法,但是在子类继承的时候  需要写ren这个方法
}
class zichouxian extends chouxian{
    ren(){
        console.log('你是个人')
    }
}

9.联合类型和类型保护

interface lianhe1{
    sex:string
}
interface lianhe2{
    age:number
}
function lianhe(data:lianhe1 | lianhe2){    //这个便是联合类型
    // 类型保护便是里边的判断方法
}

10.Enum枚举类型 数据中的下标是从0开始的

enum data{ 
    diyibu, //如果想要改变里边的默认下标需要 dayibu = 1,之后的下标依次类推 
    dierbu, 
    disanbu 
}
console.log(data.diyibu) //0

11.泛型 一般用T来表示

function fangfa<fanxing>(one:fanxing , two:fanxing){
    return `${one}${two}`
}
fangfa<number>(1,2);
// 调用的时候  number  === fanxiang
function fanxingArr<T>(params:T[]){
    console.log(params)
};
fanxingArr<string>(['1']);   //调用的时候传string就是数组中的每一项必须是string类型的
// 类中使用泛型  泛型也可以继承
interface one1{
    name:string
}
class leifanxing<T extends one1> {     //泛型T继承于one1所以给girls传值的时候只能传one1类型的参数
    constructor (private girls:T[]){};
    getGirls(index:number):string{
        return this.girls[index].name
    }
}
const girlsArr = new leifanxing([{name:'xiaolong'},{name:'xiaohong'}]);
girlsArr.getGirls(1);

12.ts的命名空间 模块化

namespace home{
    class one{

    }
    class two{

    }
    class three{

    }
    export class big{
        constructor(){
            new one();
            new two();
            new three()
        }
    }
}
// 变成home中私有的类  不会全局污染