TypeScript 语法

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

最后编辑于：2021.02.01 21:01:43

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,651评论 6赞 501
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,468评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,931评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,218评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,234评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,198评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,084评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,926评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,341评论 1赞 311
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,563评论 2赞 333
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,731评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,430评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,036评论 3赞 326
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,676评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,829评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,743评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,629评论 2赞 354

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 类

推荐阅读更多精彩内容