TypeScript 语法

2021-02-01 本文已影响0人 kevin5979

typeScript 数据类型

1. 布尔类型（boolean）

  let flag:boolean = true
  flag = 123  // 错误
  flag = false  //正确

2. 数字类型（number）

  let num:number = 123
  num = "str"      // 错误
  num = 111        // 正确

3. 字符串类型（string）

let str:string = 'this is ts'
str = 123       // 错误
str = "123"     // 正确

4. 数组类型（array）

 // ts 中定义数组有三种方式
  // 1.第一种方式: 数组中的所有数据都是 number 类型
  let arr:number[] = [11,22,33]
 // 2.第二种方式: 数组中的所有数据都是 number 类型
  let arr:Array<number> = [11,22,33]
 // 3.第三种方式: 数组中的所有数据任意类型
  let arr:any[] = ['11',22,undefined,true]

5. 元组类型（tuple）

 // 元组类型属于数组的一种
let arr:[number,string] = [123,"123"]

6. 枚举类型（enum）

enum Flag {success = 1,error = 2}
let s:Flag = Flag.success
let f:Flag = Flag.error
console.log(s,f)    // 1 0

enum Color {blue,red = 3,'orange'}
let c:Color = Color.blue
console.log(c)  // 0   如果标识符没有赋值 它的值就是下标
let d:Color = Color.orange
console.log(d)  // 4

7. 任意类型（any）

let num:any = 123
num = "str"
console.log(num)    // str
let oBox:any = document.getElementById('box')
oBox.style.color = 'red'

8. null 和 undefined

 // null 和 undefined 是其他类型（never类型）的子类型
let num1:number
console.log(num1)  // undefined 报错
let num2:undefined
console.log(num2)  // undefined 正确
let num3: number | null | undefined
console.log(num3)  // undefined 正确

9. void 类型

  // 表示没有任何类型,一般用于定义方法的时候没有返回值
function run():void{
console.log('run')
}
  run() 
function run():number{
  return 123
}
  run()

10. never 类型

// never类型: 是其它类型（包括 null 和 undefined）的子类型,代表从不会出现的值
// 这意味着声明 never 的变量只能被 never 类型所赋值
let a:undefined
 a = undefined  // √
 a = null  // ×

typeScript 函数

函数声明法

function run():string{
    return 'run'
}

匿名函数法

const run = function():number{
    return 123
}

定义方法传参


function getInfo(name:string,age:number):string{
    return `${name} --- ${age}`
}
const getInfo = (name:string,age:number):string=>{
    return `${name} --- ${age}`
}

没有返回值

const run = (name:string):void=>{
    console.log(name)
}

可选参数 >>> 注意: 可选参数必须写到最后面

function getInfo(name:string,age?:number):string{
    if(age){
        return `${name} --- ${age}`
    }else{
        return `${name} --- 年龄保密`
    }
}
console.log(getInfo('zhangsan'))
console.log(getInfo('zhangsan',123))

默认参数

function getInfo(name:string,age:number = 20):string{
    if(age){
        return `${name} --- ${age}`
    }else{
        return `${name} --- 年龄保密`
    }
}
console.log("张三")
console.log("张三",30)

剩余参数

function sum(...result:number[]):number{
    let sum = 0
    for(let i = 0; i < result.length; i++){
        sum += result[i]
    }
    return sum
}
alert(sum(1,2,3,4,5))

重载

// java: 重载指的是两个或两个以上同名函数,但它们的参数不一样,这时会出现函数重载的情况
// ts: 通过为同一个函数提供多个函数类型定义来实现多种功能的目的
function css(config:string):string
function css(config:string,value:number):string

function css(config:string,value?:number):string{
    if(value){
        console.log(config,value)
    }else{
        console.log(config)
    }
}

typeScript 类

es5 里面的类

function Person(){
    this.name = '张三'
    this.age = 20
    this.run = function(){  // 实例方法
        console.log(this.name + "在run")
    }
}

Person.getInfo = function(){
    alert('我是静态方法')
}

Person.prototype.sex = "男"
Person.prototype.word = function(){
    console.log(this.name + "在word")
}

let p = new Person()
alert(p.name)
p.word()
Person.getInfo()

// Web类 继承Person 类      原型链 + 对象冒充的组合继承模式
function Web(){
    Person.call(this)
}

let w = new Web()
w.run()     // 对象冒充可以继承构造函数里面的属性和方法
w.word()    // 对象冒充不可以继承原型链里面的属性和方法

Web.prototype = new Person()    // 原型链实现继承      // 缺点: 不能传参
let w = new Web()
w.run()     // 原型链实现继承可以继承构造函数里面的属性和方法
w.word()    // 原型链实现继承可以继承原型链里面的属性和方法


let w = new Web('张三',20)    // 实例化子类的时候没法给父类传参
w.run()         // undefined

原型链 + 构造函数的组合继承模式

function Person(name,age){
    this.name = name
    this.age = age
    this.run = function(){
        alert(this.name + "在 run")
    }
}
Person.prototype.sex = "男"
Person.prototype.word = function(){
    alert(this.name + "在 word")
}

function Web(name,age){
    Person.call(this,name,age)  // 对象冒充继承  实例化子类可以给父类传参
}

Web.prototype = Person.prototype
let w = new Web('张三',28)
w.run()
w.word()

ts 中类的定义

class Person{
    name:string;    // 属性,前面省略了 public 关键词
    constructor(name:string){   // 构造函数 实例化类的时候触发的方法
        this.name = name
    }
    run():void{
        alert(this.name + "在 run")
    }
    getName():string{
        return this.name
    }
    setName(name:string):void{
        this.name = name
    }
}
let p = new Person('张三')
p.run()
alert(p.getName())

ts 实现继承 extends + super

class Person{
    name:string
    constructor(name:string){
        this.name = name
    }
    run():void{
        alert(this.name + "在 run")
    }
    getName():string{
        return this.name
    }
    setName(name:string):void{
        this.name = name
    }
}

let p = new Person('李四')
p.run()
alert(p.getName())

class Web extends Person{
    constructor(name:string){
        super(name)
    }
    word(){
        alert(this.name + "在 word")
    }
    run():void{
        alert(this.name + "在 run ---> 子类")
    }
}

let w = new Web('王五')
w.run()
w.word()

范围	public（公有的）	protected（保护类型）	private（私有）
当前类里面	√		√
子类	√	√	×
类外面的实例	√	×	×

ts 类里面的修饰符

function Person(){
    this.run = function(){
        // 实例方法
    }
}
Person.run = function(){
    // 静态方法
}

class Person{
    public name:string
    static age:number
    constructor(name:string){
        this.name = name
    }
    run(){
        // 实例方法
        alert(this.name + "在 run")
    }
    static work(){
        // 静态方法
        alert(this.name + "在 work") //  ×
        // 静态方法随着类的加载而加载
        // 对象是在类存在后才能创建
        // 所以静态方法优先于对象存在
        // 不能再静态方法里访问成员变量
        alert(Person.age + "666")   //  √
    }
}
let p = new Person("张三")
p.run
Person.work()

ts 中的多态

// 父类定义一个方法不去实现,让继承它的子类去实现,每个子类有不同的表现
// 多态属于继承
class Animal{
    name:string
    constructor(name:string){
        this.name = name
    }
    eat(){
        console.log("eat")
    }
}

class Dog extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        console.log("Dog eat")
    }
}

class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        console.log("Cat eat")
    }
}

ts 中的抽象类

// ts 中的抽象类: 它是提供其他继承的基类,不能直接被实例化
// 用 abstract 关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
abstract class Animal{
    public name:string
    constructor(name:string){
        this.name = name
    }
    abstract eat():any
    run(){
        console.log("其他方法可以不实现")
    }
}

class Dog extends Animal{
    // 抽象类的子类必须实现抽象类里的方法
    constructor(name:string){
        super(name)
    }
    eat(){
        console.log(this.name + " eat")
    }
}
let d = new Dog("66")
d.eat()

ts 中的属性接口

// 接口: 起到一种限制和规范的作用
// 对方法传入的参数进行约束
function printLabel(labelInfo:{label:string}):void{
    console.log('printLabel')
}

printLabel({name:"张三"})     // ×
printLabel({label:"张三"})    // √

// 对批量方法传入参数进行约束
interface FullName{
    fName:string
    sName:string
}


function printName(name:FullName){
    // 必须传入对象 fName sName
    colnsole.log(name.fName,name.sName)
}

printName('123')    // ×

printName({         // ×
    age:20,
    fName:"张",
    sName:"三"
})

let obj = {
    age:20,
    fName:"张",
    sName:"三"
}

printName(obj)      // √

ts 中的属性接口

// 接口: 可选属性
interface FullName{
    fName:string
    sName?:string
}

function printName(name:FullName){
    colnsole.log(name.fName,name.sName)
}

printName({
    fName:"张"
})

// 例子
interface Config{
    type:string
    url:string
    data?:string
    dataType:string
}

function ajax(config:Config){
    let xhr = new XMLHttpRequest()
    xhr.open(config.type,config.url,true)
    xhr.send(config.data)
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 $$ xhr.status == 200){
            console.log('成功')
            if(config.dataType === 'json'){
                console.log(JSON.parse(xhr.responseText))
            }else{
                console.log(xhr.responseText)
            }
        }
    }
}

ajax({
    type:'get',
    url:'http://a.itying.com/api/productlist',
    dataType:'json'
})

ts 中的函数类型接口

// 对方法传入的参数 以及返回值进行约束
// 加密的函数类型接口
interface encrypt{
    (key:string,value:string):string
}
let md5:encrypt = function(key:string,value:string):string{
    // 模拟操作
    return key + value
}

console.log(md5('name',"zhangsan"))

ts 中的可索引接口

// 对数组的约束
interface UserArr{
    [index:number]:string
}
let arr:UserArr = ['aaa','bbb']
console.log(arr[0])

// 对对象的约束
interface UserObj{
    [index:string]:string
}
let arr:UserObj = [name:'zhangsan']
console.log(arr['name'])

ts 中的类类型接口

// 4. 类类型接口和抽象类 相似
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 + 'Dog eat')
    }
}

ts 接口扩展

// 接口可以继承接口
interface Animal{
    eat():void
}
interface Person extends Animal{
    work():void
}
class Programmer{
    public name:string
    constructor(name:string){
        this.name = name
    }
    coding(code:string){
        console.log(this.name + code)
    }
}
    
class Web extends Programmer implements Person{
    constructor(name:string){
        super(name)
    }
    eat(){
     console.log(this.name + "eat")
    }
    work(){
        console.log(this.name + "work")
    }
}
let w = Web("小李")
w.eat()
w.work()
w.coding("ts")

END

TypeScript 语法

typeScript 数据类型

1. 布尔类型（boolean）

2. 数字类型（number）

3. 字符串类型（string）

4. 数组类型（array）

5. 元组类型（tuple）

6. 枚举类型（enum）

7. 任意类型（any）

8. null 和 undefined

9. void 类型

10. never 类型

typeScript 函数

typeScript 类

猜你喜欢

热点阅读