码迷,mamicode.com
首页 > 其他好文 > 详细

typescript简介

时间:2018-03-17 10:49:41      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:简介   let   添加   cto   order   语言   div   语法   pes   

微软作为编译器狂魔一直有一个心病,就是改良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]

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(‘我超级吃东西‘)
    }
}

 

typescript简介

标签:简介   let   添加   cto   order   语言   div   语法   pes   

原文地址:https://www.cnblogs.com/amiezhang/p/8587338.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!