TypeScript-CSDN博客

本文链接：https://blog.csdn.net/bus_lupe/article/details/85219038

安装、编译

安装

npm install typescript -g

编译

会生成一个与.ts文件同名的.js文件

tsc name.ts

在编译器中实时编译ts文件

vscode实时编译
在工程目录下执行tsc --init生成tsconfig.json

tsc --init

修改tsconfig.json的ouDdi
修改前

// "outDir": "./",

修改后

"outDir": "./",

在vscode编译器工具栏选择Terminal,执行Run task…,选择tsc: watch - tsconfig.json

数据类型

typescript中为了使编写的代码更规范，更有利于维护，增加了类型校验，写ts代码必须指定类型。

布尔类型(boolean)

let flag:boolean = true
// flag = 123 // 报错
flag = false // 正确
console.log(flag) // false

数字类型(number)

var age:number = 21
age = 19
console.log(age) // 19

字符串类型(string)

let str:string = 'Hello Peppa Pig.'
str = 'No hello.'

数组类型(array)

定义一个全部由数字组成的数组

let arr:number[] = [11, 22, 33 ,44]
console.log(arr)
// [11, 22, 33, 44]

let arr:Array<number> = [11, 22 ,33 , 44]
console.log(arr)

由任意数据类型组成的数组

let arr:any[] = [911, 'abc', true]
console.log(arr)
// [911, "abc", true]

元组类型(tuple)

给数组的每个元素指定数据类型

let tup:[number, string] = [11, 'This is ts.']
console.log(tup)
// [11, "This is ts."]

枚举类型(enum)

enum Err {undefined = -1, null = -2, success = 1}
let err:Err = Err.undefined
console.log(err)
// -1

如果枚举没有指定值，返回对应索引

enum color {red, blue = 3, yellow}
let color_red:color = color.red 
console.log(color_red)
// 0
let color_blue:color = color.blue 
console.log(color_blue)
// 3
let color_yellow:color = color.yellow 
console.log(color_yellow)
// 4

任意类型(any)

let val:any = 123
val = 'Hello girl.'
console.log(val)
// Hello girl.

let aDiv:any = document.getElementById('box')
aDiv.style.color = 'blue'

null和undefined

let num:number | null | undefined;
console.log(num)
// undefined
num = 911
console.log(num)
// 911

void类型

void类型：typescript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。

function test():void {
    console.log('test')
}
test()

function test():number {
    return 911
}
console.log(test())

never类型

never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。

let val:undefined;
val = undefined

let val:null;
val = null;

typescript中的函数

函数声明法

function test():string {
    return 'Are you ok?'
}

匿名函数

let test = function ():number {
    return 911
}

ts中定义方法传参

function person(name:string, age:number):string {
    return `${name}今年都${age}岁了，可是还没女朋友。`
}

let person = function (name:string, age:number):string {
    return `${name}今年都${age}岁了，可是还没女朋友。`
}

没有返回值的方法

function test():void {
    console.log('Hello world!')
}

方法可选参数

ts方法的实参和形参必须一样，如果不一样就需要配置可选参数
在参数名后面加问号(?)表示该参数可传、可不传。
注意：可选参数必须放到最后。

function person(name:string, age?:number) {
    if (age) {
        return `${name}今年都${age}岁了，可是还没女朋友。`
    } else {
        return `${name}不好意思说自己的年龄。`
    }
}
console.log(person('alex'))
console.log(person('alex', 34))

默认参数

es5里面没法设置默认参数，es6和ts中都可以设置默认参数

function getInfo(name:string, age:number = 20) {
    console.log(`${name}${age}`)
}
getInfo('小李')
// 小李20

function getInfo(name:string, age:number = 20) {
    console.log(`${name}${age}`)
}
getInfo('小李', 29)
// 小李29

不定长参

三点运算符实现

function sum (a:number, ...arr:number[]) {
    let sum = a
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
    }
    return sum
}
console.log(sum(1, 2, 3, 4, 5, 6))
// 21

函数重载

java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现重载的情况。
typescript中的重载：通过为同一个函数提供多个函数类型定义来实现多功能的目的。
ts为了兼容es5以及es6重载的写法和java有区别。

function getInfo (name:string):string;
function getInfo (name:string, age:number):string;
function getInfo (name:any, age?:any):string {
    if(age) {
        return `我叫${name}，今年${age}岁。`
    } else {
        return `我叫${name}。`
    }
}
console.log(getInfo('小莲'))
// 我叫小莲。
console.log(getInfo('小莲', 18))
// 我叫小莲，今年18岁。

es5中的类

// es5中的类
function student (name, teacher) {
    this.name = name
    this.teacher = teacher
    this.speak = function () {
        console.log('我叫' + this.name + '老师是' + teacher)
    }
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
    console.log(this.name + '在操场上' + this.sport)
}
var stu = new student('小虫', '苍井空')
stu.speak()
// 我叫小虫老师是苍井空
stu.run()
// 小虫在操场上跑步

es5中的静态方法

// es5中的类
function student (name, teacher) {
    this.name = name
    this.teacher = teacher
    // 实例方法
    this.speak = function () {
        console.log('我叫' + this.name + '老师是' + teacher)
    }
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
    console.log(this.name + '在操场上' + this.sport)
}
// 静态方法
student.hobby = function () {
    console.log('王者农药')
}
var stu = new student('小虫', '苍井空')
stu.speak()
// 我叫小虫老师是苍井空
stu.run()
// 小虫在操场上跑步
student.hobby()
// 王者农药

es5中的继承

原型链+对象冒充的组合继承模式

// es5中的类
function student (name, teacher) {
    this.name = name
    this.teacher = teacher
    // 实例方法
    this.speak = function () {
        console.log('我叫' + this.name + '老师是' + teacher)
    }
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
    console.log(this.name + '在操场上' + this.sport)
}

// 继承
function juniorStu () {
    // 冒充对象继承
    student.call(this, '黄毛', '苍井空')
}
stu = new juniorStu()
// 冒充对象可以继承构造函数里的属性和方法
stu.speak()
// 我叫黄毛老师是苍井空
// stu.run() 冒充对象不能继承构造函数原型链的方法

原型链继承

// es5中的类
function student (name, teacher) {
    this.name = name
    this.teacher = teacher
    // 实例方法
    this.speak = function () {
        console.log('我叫' + this.name + '老师是' + teacher)
    }
}
// 通过原型链添加方法
student.prototype.sport = '跑步'
student.prototype.run = function () {
    console.log(this.name + '在操场上' + this.sport)
}

// 构造函数+原型链继承
function juniorStu (name, teacher) {
    // 子类可以给父类传参
    student.call(this, name, teacher)
}
juniorStu.prototype = student.prototype
var stu = new juniorStu('黄毛', '苍井空')
stu.speak()
// 我叫黄毛老师是苍井空
stu.run()
// 黄毛在操场上跑步

ts中的类

class Person{
    name:string
    // 构造函数
    constructor (name:string) {
        this.name = name
    }

    run ():void {
        console.log(`${this.name}在跑步`)
    }
}

let p = new Person('张三')
console.log(p.name)
p.run()

上面的代码编译后的运行结果：

张三
张三在跑步

class Person{
    name:string
    // 构造函数
    constructor (name:string) {
        this.name = name
    }

    getName ():string {
        return this.name
    }

    setName (name:string):void {
        this.name = name
    }
}

let p = new Person('张三')
console.log(p.getName())
p.setName('李四')
console.log(p.getName())

上面代码运行结果

张三
李四

ts中类的继承

extends和supper实现继承

class Person{
    name: string
    age: number
    constructor (name:string, age:number) {
        this.name = name
        this.age = age
    }
    speak ():void {
        console.log(`${this.name}今年${this.age}岁`)
    }
}

class Stu extends Person {
    constructor (name:string, age:number) {
        super(name, age)
    }
}

let stu1 = new Stu('黄飞虎', 22)
stu1.speak()

上面代码运行结果：

黄飞虎今年22岁

class Person{
    name: string
    age: number
    constructor (name:string, age:number) {
        this.name = name
        this.age = age
    }
    speak ():void {
        console.log(`${this.name}今年${this.age}岁`)
    }
}

class Stu extends Person {
    constructor (name:string, age:number) {
        super(name, age)
    }
    run ():void {
        console.log(`${this.name}在运动`)
    }

    speak ():void{
        console.log(`${this.name}说这是子类的方法`)
    }
}

let stu1 = new Stu('黄飞虎', 22)
stu1.run()
// 子类方法和父类重名，调用子类方法
stu1.speak()

上面代码运行结果：

黄飞虎在运动
黄飞虎说这是子类的方法

类的修饰符

public	可以在类、子类、类的外部被访问
protected	可以在类、子类内部被访问
private	可以在类内部被访问

class Person{
    public name:string = ''
    constructor (n) {
        this.name = n
    }
    run () {
        console.log(`${this.name}在草场跑步`)
    }
}

class Stu extends Person{
    constructor (n) {
        super(n)
    }
    work () {
        console.log(`${this.name}在夜店上班`)
    }
}
let stu1 = new Stu('alex')
console.log(stu1.name) // 打印结果：alex
stu1.run() // 打印结果：alex在草场跑步
stu1.work() // 打印结果：alex在夜店上班

class Person{
    protected name:string = ''
    constructor (n) {
        this.name = n
    }
    run () {
        console.log(`${this.name}在草场跑步`)
    }
}

class Stu extends Person{
    constructor (n) {
        super(n)
    }
    work () {
        console.log(`${this.name}在夜店上班`)
    }
}
let stu1 = new Stu('alex')
// Property 'name' is protected and only accessible within class 'Person' and its subclasses.
// console.log(stu1.name)
stu1.run() // 打印结果：alex在草场跑步
stu1.work() // 打印结果：alex在夜店上班

class Person{
    private name:string = ''
    constructor (n) {
        this.name = n
    }
    run () {
        console.log(`${this.name}在草场跑步`)
    }
}

class Stu extends Person{
    constructor (n) {
        super(n)
    }
    work () {
        // Property 'name' is private and only accessible within class 'Person'.
        // console.log(`${this.name}在夜店上班`)
    }
}
let stu1 = new Stu('alex')
// Property 'name' is private and only accessible within class 'Person'.
// console.log(stu1.name)
stu1.run() // 打印结果：alex在草场跑步
stu1.work() // 打印结果：alex在夜店上班

类的静态属性、静态方法

可以类比jq，$(’.box’).css(‘color’, ‘red’)是实例方法，$.get(url, callback())是静态方法。

es5中的静态属性、方法

function $(id) {
    return new base(id)
}

function base (id) {
    let el = document.getElementById(id)
    this.css = function (attr, value) {
        el.style[attr] = value
    }
}
// 静态方法
$.get = function (url, fn) {
    fn()
}
// 静态属性
$.author = 'lupe'
// 实例方法
$('box').css('color', 'red')
// 静态方法
$.get('www.baidu.com', () => {
    console.log('success')
})

ts类的静态属性、静态方法，使用static关键字

class Person{
    public name:string = ''
    // 静态属性只能被类调用
    static sex:number = 0
    constructor (n) {
        this.name = n
    }
    run () {
        // 静态属性只能被Person类调用
        console.log(`${this.name}性别${Person.sex}`)
    }
    // 静态方法只能调用静态属性,切只能被Person类调用
    static work () {
        console.log(`${this.sex}`)
    }
}

let stu = new Person('alex')
stu.run() // 打印结果：alex性别0
// 静态方法只能被Person类调用
Person.work() // 打印结果：0
// 静态属性只能被Person类调用
console.log(Person.sex) // 打印结果：0

抽象类、抽象方法

abstract关键字定义抽象类，不能直接被实例化，为继承子类提供基类
抽象方法必须放在抽象类中，只需要定义，所有子类必须包含eat方法，在子类中实现

// 定义抽象类，不能直接被实例化，为继承子类提供基类
abstract class Animal {
    public name: string

    constructor(name: string) {
        this.name = name
    }

    // 抽象方法必须放在抽象类中，只需要定义，所有子类必须包含eat方法，在子类中实现
    abstract eat(): any
}

class Dog extends Animal{
    constructor (name:string) {
        super(name)
    }
    // 子类必须包含eat方法
    eat () {
        console.log(`${this.name}吃骨头`)
    }
}

class Cat extends Animal{
    constructor(name:string) {
        super(name)
    }
    // 子类必须包含eat方法
    eat () {
        console.log(`${this.name}吃鱼`)
    }
}
// 抽象类不能直接实例化
// let  animal = new Animal('小黑狗')

let dog = new Dog('小黑狗')
let cat = new Cat('小花猫')
dog.eat() // 打印结果：小黑狗吃骨头
cat.eat() // 打印结果：小花猫吃鱼

接口


interface Animal{
    name:string;
    eat(str:string):void;
}

class Dog implements Animal{

    name:string;
    constructor(name:string){

        this.name=name;

    }
    eat(){

        console.log(this.name+'吃粮食')
    }
}


var d=new Dog('小黑');
d.eat();


class Cat implements Animal{
    name:string;
    constructor(name:string){

        this.name=name;

    }
    eat(food:string){

        console.log(this.name+'吃'+food);
    }
}

var c=new Cat('小花');
c.eat('老鼠');

ts接口扩展、接口的继承

接口可以继承接口

interface Animal {
    eat():void
}
// 接口可以继承
interface Person extends Animal{
    work():void
}

class Programme {
    public name:string
    constructor (name:string) {
        this.name = name
    }

    code () {
        console.log(`${this.name}在写ts代码`)
    }
}

class Person extends Programme implements Person{
    constructor (name:string) {
        super(name)
    }

    eat () {
        console.log(`${this.name}吃火锅`)
    }

    work () {
        console.log(`${this.name}写代码`)
    }
}

let programmer = new Person('王强')

programmer.eat()
programmer.work()
programmer.code()
// 王强吃火锅
// 王强写代码
// 王强在写ts代码