ts学习小记

169 阅读4分钟

安装: npm install -g typescript

安装之后检测版本 : tsc-v

TypeScript 转换为 JavaScript 代码 : tsc XX.ts

实时编译:通过tsc --init 生成tsconfig.json配置文件,修改json中的"outDir": "./编译后的文件名",IDE设置:

vsCode:点击任务-运行任务-选择typescript-选择watch监听 webstorm:www.cnblogs.com/pangchunlei…

console.log('hello ts!')
//ts数据类型
语法:let a:类型 = 值

//数值
let num:number = 0
console.log(num);

//字符串
let str:string = 'tcc'
console.log(str);

//布尔
let flag:boolean = true

//数组
let arr:Array<number> = [1,2,3] //way1:数组为数值
let arr1:string[] = ['a','b'] //way2:数组为字符串
let arr3:any[] = ['a',1,true,{'b':1}]
console.log(arr, arr1,arr3);


//元组
let arr2:[string,number,boolean] = ['a',1,true]
console.log(arr2);

//枚举enum
enum PayWay {
    wechat,
    allipay,
    card,
    cash
} //不设置值则默认为索引
let way1:PayWay = PayWay.wechat
console.log(way1);

enum Flag {
    success = 1,
    fail = -1
} //赋值则为值

let flags:Flag = Flag.success
console.log(flags);

enum Color {
    red,
    blue = 2,
    yellow
} //不赋值则为索引,前一个赋值了则以前一个为基准+1

let colors:Color = Color.yellow
console.log(colors);

//any
let tcc:any = 'girl'
console.log(tcc);

//void 表示方法没有返回值
function f():void{
    console.log(123);
}
f()

//有返回值,为数值//返回值需与定义类型一致 //函数声明
function n():number{
    return 222
}
n()

//匿名函数
let func = function():number{
    return 2223
}
func()

//传参 和可选参? 可选参写在最后,age参数放在前面会警告,可以设置默认参数
function funcs(name:string,sexy:string = 'girl',age?:number):string{
    return 'aaa'
}
funcs('tcc')

//重载
function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(sexy:string,flag:boolean):string
function getInfo(str:any,flag?:any):any{
    if(flag){
        console.log('flag存在');
    }else {
        if(typeof str === 'string'){
            console.log('name');
            return str
        }else {
            console.log('age');
            return str
        }
    }
}
getInfo('tcc',true)

//class特征:
//1.继承
//public 父类、子类、外部都可以访问
//protected 父类、子类可以访问
//private 父类私有
class Person{
   protected name:string;
    constructor(n:string) {
        this.name = n
    };
    like():void{
        console.log(this.name)
    }
}


class PP extends Person{
    constructor(name:string){
        super (name)
    }
    // like():void{
    //     console.log(this.name + 'like eat pineapple');
    // }
    hate():void{
        console.log(this.name + 'hate cheat');
    }
}
let person = new PP('tanchuchu')

person.like()
person.hate()

//实例方法、静态方法
class Per{
    public name: string;
    static nn:string = 'xiaohong';
    constructor(nnn:string) {
        this.name = nnn
    }
    like():void{
        console.log(this.name + 'like ZJM');
    }
    static work():void{
        console.log(this.nn + 'is working');
    }
}
let pers = new Per('xiaoming')
Per.work()
 
//不管是静态方法还是静态成员,都是类级别存在的

也就是说随着类的加载而加载,优先于对象的存在

而非静态成员和方法是对象级别的存在

所以在静态方法中调用非静态的成员或方法(此时还不存在对象),是不可能的,但是反过来是可以的:非静态中调用静态。于是也就有静态方法中不能使用thissuper关键字



//2.多态 多态也是一种继承
class Animal{
    public name:string
    constructor(name:string) {
        this.name = name
    }
    eat():void{
        console.log('吃什么呢');
    }
}

class Dog extends Animal{
    constructor(name:string) {
        super(name);
    }
    eat() {
        console.log(this.name + '' + 'eat bone');
    }
}

class Cat extends Animal{
    constructor(name:string) {
        super(name);
    }
    eat() {
        console.log(this.name + '' + 'eat maoliang');
    }
}


//抽象类abstract 该类是一种标准 继承该类就必须实现其抽象方法

abstract class Plant {
    public name:string;
    constructor(name:string) {
        this.name = name
    }
    abstract charater(): any; //抽象类方法不包含具体实现方法且必须在派生的子类中实现
    need():void{
        console.log('非抽象方法可以不实现');
    }
}

// let plant = new Plant()  //错误写法 抽象类不能被直接实例化

class Flower extends Plant{
    constructor(name:string) {
        super(name);
    }
    charater(): void { //继承抽象类必须就必须包含抽象类里面的抽象方法
        console.log('this.name:' + this.name);
    }
}

class Tree extends Plant{
    constructor(name:string) {
        super(name);
    }
    charater(): void {
        console.log('this.name:' + this.name);
    }
}

let res = new Flower('小花')
res.charater()

//3.封装 体现在上面两点特征中



//ts中的接口的用途
//1、属性类接口 关键词interface
interface FullName{
    firstname:string,
    lastname:string
}

function getName(name:FullName){

}

// way1:
getName({firstname:'tan',lastname:'chuchu'}) //只接受约束的参数名,不允许其他参数加入

//way2:
let obj = {
    firstname:'tan',
    lastname:'chuchu',
    age:18
}
getName(obj) //这种方式接受其他参数存在 同时必须包含约束的参数


//2、函数类接口


//a.加密的函数类接口
interface encrypt {
    (usename:string,password:number):string
}

let md5:encrypt = function (usename:string,password:number):string{
    return usename+password
}

console.log(md5('tanchuchu', 954110));

let sha1:encrypt = function(name:string,password:number):string{
    return name+password
}

console.log(sha1('tanchuchu', 954110));


//b.可索引接口 对象、数组使用  (不常用)
//b.1 可索引接口对数组的约束
interface userArr {
    [index:number]:string
}

let arrr:userArr = ['aa','bb']
console.log(arrr[0]);

//b.2可索引接口对对象的约束
interface userObj {
    [index:string]:string
}

let userobj:userObj = {name:'张三'}
console.log(userobj);

//3.类类型接口 关键词----实现扩展接口:implements  类似抽象类
interface Animals{
    name:string,
    like(like:string):void //必须包含这些属性或方法 ,参数可以不传,但方法必须实现
}

class Pigs implements Animals {
    name:string
    constructor(name:string){
        this.name = name
    }
    like(like:string){
        console.log(this.name+like);
    }
}

let pig = new Pigs('zjm')
pig.like('grace')


//接口扩展 接口可以继承接口

interface animal{
    eat():void
}//定义基础约束接口

interface People extends animal{
    work():void
}//继承基础约束接口=拥有eat和work两个约束方法

class Man implements People{ //扩展接口
    name:string
    constructor(name:string) {
        this.name = name
    }
    eat() {
        console.log(this.name + 'eat');
    }
    work(){
        console.log(this.name + 'coding');
    }
}

let m = new Man('xiaoming')
m.eat()
m.work()