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

typescript简介的更多相关文章

  1. Learining TypeScript (一) TypeScript 简介

    Learining TypeScript (一) TypeScript 简介 一.TypeScript出现的背景    2 二.TypeScript的架构    2 1.    设计目标    2 2 ...

  2. 转载:TypeScript 简介与《TypeScript 中文入门教程》

    简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...

  3. 1 TypeScript 简介与安装

    简介: TypeScript 是一种由微软开发维护的自由和开源的编程语言,它是JavaScript的一个超集,支持可选的类型检查,扩展了JavaScript的语法,支持JavaScript的所有语法和 ...

  4. 001.TypeScript简介.md

    TypeScript是一门开源的,由微软开发维护的,发布于2012年10月的静态类型的语言: 他是ECMAScript的超集,支持JavaScript的所有语法和语义,并且在此基础之上提供了更多额外的 ...

  5. 从 JavaScript 到 TypeScript

    本文首发在我的个人博客:http://muyunyun.cn/posts/66a54fc2/ 文中的案例代码已经上传到 TypeScript TypeScript 并不是一个完全新的语言, 它是 Ja ...

  6. 【原】无脑操作:TypeScript环境搭建

    概述:本文描述TypeScript环境搭建,以及基于VSCode的自动编译设置和调试设置.网络上很多相应文章的方式过时了或者无法试验成功. ------------------------------ ...

  7. 第一章 Typescript 介绍

    Typescript 介绍 一.Typescript 简介 Typescript 是微软开发的 Javascript 的超集,Typescript 兼容 Javascript,可以载入 Javascr ...

  8. TypeScript学习笔记—函数

    函数定义 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression): // 函数声明(Fu ...

  9. TypeScript学习笔记—数据类型

    TypeScript 数据类型 Boolean 类型 let isDone: boolean = false; // tsc => var isDone = false; Number 类型 l ...

随机推荐

  1. 禁ping以及清理系统多余账号说明

    查出多余的:grep -v “nologin$“ /etc/passwd

  2. linux开机启动流程及需要开机启动服务讲解和修改及防火墙

    linux系统从开机到登陆的启动流程. 1.开机BIOS自检 2.MBR引导 3.grub引导菜单 4.加载内核kernel 5.启动init进程 6.读取inittab文件,执行rc.sysinit ...

  3. 画一个DIV并给它的四个角变成圆形,且加上阴影

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  4. java web(转)

    装载:http://www.oschina.net/question/12_52027 OSCHINA 软件库有一个分类——Web框架,该分类中包含多种编程语言的将近500个项目. Web框架是开发者 ...

  5. 大数据Hadoop与Spark学习经验谈

    昨晚听了下Hulu大数据基础架构组负责人–董西成的关于大数据学习方法的直播,挺有收获的,下面截取一些PPT的关键内容,希望对正在学习大数据的人有帮助. 现状是目前存在的问题,比如找百度.查书这种学习方 ...

  6. 常见排序算法及Java实现

    先上个总图↓: ①.直接插入排序 插入排序(Insertion Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并 ...

  7. AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比----转载

    1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...

  8. VLOOKUP函数常用套路大全

    今天和大家来说说VLOOKUP的那些事儿,深入了解一下VLOOKUP函数的各种用法,看看这位大众情人还藏着多少不为人知的秘密.函数的语法为:VLOOKUP(要找谁,在哪儿找,返回第几列的内容,精确找还 ...

  9. font awesome矢量图标框架

    一.font awesome简介 目前图标总数共有519个; 不依赖Javascript 矢量图形,无限缩放 免费,可用于商业 CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果 支持re ...

  10. Filecoin官方更新: Q4工作进展和2018年工作计划

    ICO过后,Filecoin团队一直没有对外更新过工作计划(很多投资人都等待的不耐烦了).经过漫长的等待,在新年的第一个工作日,我们终于等来了来自于filecoin团队的声音, 这次更新真是出乎小编的 ...