微软作为编译器狂魔一直有一个心病,就是改良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. golang 互斥锁和读写锁

    golang 互斥锁和读写锁 golang中sync包实现了两种锁Mutex(互斥锁)和RWMutex(读写锁),其中RWMutex是基于Mutex实现的,只读锁的实现使用类似引用计数器的功能. ty ...

  2. Bond UVA - 11354(LCA应用题)

    Once again, James Bond is on his way to saving the world. Bond's latest mission requires him to trav ...

  3. POI读写Excel-操作包含合并单元格操作

    在上篇博客中写到关于Excel操作解析成相关的类,下面将写入一种Excel对Excel表格读取和写入. 对于Excel表格操作,最重要的是创建workBook.其操作顺序是: 1.获得WorkBook ...

  4. 读取超大Excel(39万行数据)

    有个学长需要处理Excel数据,Excel数据共有39W,将数据读取后处理并导出数据.最开始尝试了 NPOI ,发现NPOI 并不能完成该项任务,随后尝试引用的com组件:Microsoft.Offi ...

  5. PHP之防御sql注入攻击的方式

    长期以来,web的安全性存在着巨大的争议与挑战.其中,sql注入就是一种常见的一种攻击方法,开发人员普遍的做法就是不停的过滤,转义参数,可是我们php大法天生弱类型的机制,总是让黑客有机可乘,绕过防御 ...

  6. 原生js实现简单的全屏滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. canvas动画气球

    canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实 ...

  8. react开发

    webpack.config.js var webpack=require("webpack"); var htmlWebpackPlugin=require('html-webp ...

  9. SpringBoot集成redis的key,value序列化的相关问题

    使用的是maven工程 springBoot集成redis默认使用的是注解,在官方文档中只需要2步; 1.在pom文件中引入即可 <dependency> <groupId>o ...

  10. python基础学习笔记一

    1.变量 为了节省内存,python解释器会对一些简单的字符串以及小整型数,做出一些优化,当要定义的新变量的内容与定义过的内容相同时,会让两者使用同一个内存空间. 例如: 在这个例子里面,'old'是 ...