typescript简介
微软作为编译器狂魔一直有一个心病,就是改良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简介的更多相关文章
- Learining TypeScript (一) TypeScript 简介
Learining TypeScript (一) TypeScript 简介 一.TypeScript出现的背景 2 二.TypeScript的架构 2 1. 设计目标 2 2 ...
- 转载:TypeScript 简介与《TypeScript 中文入门教程》
简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...
- 1 TypeScript 简介与安装
简介: TypeScript 是一种由微软开发维护的自由和开源的编程语言,它是JavaScript的一个超集,支持可选的类型检查,扩展了JavaScript的语法,支持JavaScript的所有语法和 ...
- 001.TypeScript简介.md
TypeScript是一门开源的,由微软开发维护的,发布于2012年10月的静态类型的语言: 他是ECMAScript的超集,支持JavaScript的所有语法和语义,并且在此基础之上提供了更多额外的 ...
- 从 JavaScript 到 TypeScript
本文首发在我的个人博客:http://muyunyun.cn/posts/66a54fc2/ 文中的案例代码已经上传到 TypeScript TypeScript 并不是一个完全新的语言, 它是 Ja ...
- 【原】无脑操作:TypeScript环境搭建
概述:本文描述TypeScript环境搭建,以及基于VSCode的自动编译设置和调试设置.网络上很多相应文章的方式过时了或者无法试验成功. ------------------------------ ...
- 第一章 Typescript 介绍
Typescript 介绍 一.Typescript 简介 Typescript 是微软开发的 Javascript 的超集,Typescript 兼容 Javascript,可以载入 Javascr ...
- TypeScript学习笔记—函数
函数定义 在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression): // 函数声明(Fu ...
- TypeScript学习笔记—数据类型
TypeScript 数据类型 Boolean 类型 let isDone: boolean = false; // tsc => var isDone = false; Number 类型 l ...
随机推荐
- 关系型数据库工作原理-数据特征统计分析(翻译自Coding-Geek文章)
本文翻译自Coding-Geek文章:< How does a relational database work>.原文链接:http://coding-geek.com/how-data ...
- 剑指Offer-孩子们的游戏(圆圈中最后剩下的数)
package Other; import java.util.LinkedList; /** * 孩子们的游戏(圆圈中最后剩下的数) * 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友, ...
- 剑指Offer-删除链表中重复的结点
package LinkedList; /** * 删除链表中重复的结点 * 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. * 例如,链表1-> ...
- 零散Linux命令
1. # ps -ef|grep java 查询java进程 2. # kill -9 进程号 关闭指定进程
- 学习JAVA的几大优处
首先:简单:我们都知道Java是目前使用较为广泛的网络编程语言之一.他容易学而且很好用,如果你学习过C++语言,你会觉得C++和 Java很像,因为Java中许多基本语句的语法和C++一样,像常用的循 ...
- Asp.Net Core 2.0 项目实战(9) 日志记录,基于Nlog或Microsoft.Extensions.Logging的实现及调用实例
本文目录 1. Net下日志记录 2. NLog的使用 2.1 添加nuget引用NLog.Web.AspNetCore 2.2 配置文件设置 2.3 依赖配置及调用 ...
- Jmeter4.0----安装教程(2)
1.检查安装环境 1.1 JDK要求 JDK版本:1.6 + 1.2 检查是否安装JDK win + R 快捷键打开运行,输入 cmd 打开面板,在面板中输入 java -version,出现如下信息 ...
- 获取请求主机IP地址,如果通过代理进来,则透过防火墙获取真实IP地址;
package com.utils; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.servlet.htt ...
- Dynamics 365 for CRM: Sitemap站点图的可视化编辑功能
Dynamics 365 for CRM 提供了Sitemap站点图的可视化编辑功能 在之前的所有版本中,我们只能通过从系统中导出站点图的XML进行编辑后再导入(容易出错),或使用第三方的Sitema ...
- easyui控件写法造成的错误
<input id="driver" name="driver" class="easyui-combobox" data-optio ...