• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript简介

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微软作为编译器狂魔一直有一个心病,就是改良JavaScript这种语法超级烂又很多人用的编程语言,于是TypeScript诞生了

先做个对比吧:

  TS JS
语法严谨性 严谨 宽松
静态性 静态 动态
适合开发规模 大型 小型
支持类型 基本类型、泛型、implements 都不支持

下面来把ts的特点逐一介绍:

1.类型

常见的ts类型:string、number、boolean、undefined、null、void、any、enum、Array、object、Never

ts引入了类型的限制

java在声明一个变量的时候大概是这样的:

int num;

而为了更贴近js,ts声明变量的写法变成:

let num:number;

如果不加冒号声明就自动判定为any类型

2.枚举类型

enum枚举类型,是一种自己定义的类型:

enum Gender {
    male=1,
    female=2
}

let gender:Gender;

//如果想定义为male
gender = Gender.male //或者直接为 1

3.泛型

<T>泛型,其实就是制定内部东西的类型

let arr1:Array<number|string>;
let arr2:Array<number>;

arr1 = [1,2,3,'sadsd'];
arr2 = [2,4,6,8]

ps: 其他数组类型写法

let arr:string[];
let arr2:[string, number, boolean] //元组

arr = ['123', '456']; // 只能是字符串
arr2 = ['123', 123, true] // 一定要按顺序和个数严格对应类型声明

 

4.预定义属性的类

enum Gender{male=1,female=2}

class Person {
    age:number;
    gender:Gender;
    constructor(age:number,gender:Gender) {
        this.age = age;
        this.gender = gender
    }
    eat(str) {
        console.log('我吃' + str)
    } 
}

Person的属性需要在constructor外先做定义,而且定义了之后不允许像js那种装饰者模式那样再添加新的属性:

let person = new Person(18, 1)

person.height = 180 //编译报错,说person没有height这个类型

至于extends和es6没什么区别,接下来要说的是implements

5.接口/实现

implements接口(实现)是强制一个class必须要implements的所有属性和方法

enum Gender{male=1,female=2}

class Person {
    constructor(age:number,gender:Gender) {
        this.age = age;
        this.gender = gender
    }
    age:number;
    gender:Gender;
    eat(str) {
        console.log('我吃' + str)
    } 
}
//Adult继承字Person
class Adult extends Person {
    constructor(age:number, gender:Gender) {
        super(age,gender)
        this.age = 1
    }
    earnMoney(){
        console.log('我赚钱')
    }
}
//Hero实现Adult,就必须手动加齐Adult自己新加的属性和方法和Adult继承自Person的属性和方法
class Hero implements Adult {
    age:number;
    gender:Gender;
    constructor() {
        this.age = Infinity
        this.gender = Gender.male
    }
    earnMoney() {
        console.log('我超级赚钱')
    }
    eat(){
        console.log('我超级吃东西')
    }
}

6. 默认参数和可选参数

function test(name: string = '哈哈', age ?:number) {
    if (age) {
        return name
    }
    return name + age;
}

test()

7. 类型断言

let age:any = '555';

(<string>age).substr(0, 2)
(age as string).substr(0, 2)

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
将create-react-app从javascript迁移到typescript发布时间:2022-07-18
下一篇:
TypeScript-自动类型推断发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap