TypeScript初探
TypeScript初探
TypeScript什么?
官方给的定义:TypeScript是一种由微软开发的自由和开源的编程语言,它是JavaScript类型的超集,可以编译成纯JavaScript,本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。当前TypeScript 2.6 已发布。
TypeScript能做什么?
背景
框架应用
更直观的表现在,当前的前端主流框架:1. React,2. Angular :Angular团队建议在所有的Angular项目中使用TypeScript。3. Vue.js 等
特性
TypeScript 是一种给 JavaScript 添加特性的语言扩展。
● 类型批注和编译时类型检查
Boolean
在JavaScript和TypeScript中也具有最基本的逻辑断言值true/false,采用’boolean’类型。
var isDone: boolean = false;
Number
如JavaScript,TypeScript所有的数值类型采用浮点型计数,其类型为‘number’。
var height: number = 6;
String
在webpages的JavaScript或者服务端的应用程序最基本的功能就是处理文本数据。在其他语言中大多使用’string’去代表文本数据类型。TypeScript和JavaScript一样也是用双引号(“)或者单引号包裹文本数据。
var name: string = "bob";
name = 'smith';
Array
在TypeScript中如JavaScript一样允许我们操结合操作。数组类型可以使用下边两种方式之一。
第一种方式,你可以在数据类型之后带上’[]‘:
var list:number[] = [1, 2, 3];
第二种方式,也可以采用泛型的数组类型:
var list:Array<number> = [1, 2, 3];
Enum
TypeScript为JavaScript新增了枚举这种标准的集合数据类型。和在c#中一样,枚举是为一组数值类型一组更友好的名称:
enum Color {Red, Green, Blue};
var c: Color = Color.Green;
Any
有时我们需要描述一些我们不知道的什么写进应用的动态数据类型,这可能来自第三方用户或者lib。在这里我们希望该数据不要加入TypeScript的类型检查,是的此值通过编译时检查。为此我们可以采用‘any’类型标注:
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
var list:any[] = [1, true, "free"]; list[1] = 100;
Void
和‘any’相对的数据类型则是’Void‘,它代表没有任何数据类型。我们常用的一个方法没有任何返回值:
function warnUser(): void {
alert("This is my warning message");
}
●类
TypeScript 支持集成了可选的类型批注支持的 ECMAScript6 的类。比如支持基于类的面向对象编程。比如创建一个Student
类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作,程序员可以自行决定抽象的级别。还要注意的是,在构造函数的参数上使用public
等同于创建了同名的成员变量。
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
} interface Person {
firstName: string;
lastName: string;
} function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
} let user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);
●接口
firstName
和lastName
字段的对象。 在TypeScript里,只在两个类型内部的结构兼容那么这两个类型就是兼容的。 这就允许我们在实现接口时候只要保证包含了接口要求的结构就可以,而不必明确地使用 implements
语句。interface Person {
firstName: string;
lastName: string;
} function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
} let user = { firstName: "Jane", lastName: "User" }; document.body.innerHTML = greeter(user);
●模块
module:模块是自声明的;两个模块之间的关系是通过在文件级别上使用imports和exports建立的。
项目配置:tsconfig.json
概述:
如果一个目录下存在一个tsconfig.json
文件,那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json
文件中指定了用来编译这个项目的根文件和编译选项。
始于JavaScript,归于JavaScript
TypeScript提供最新的和不断发展的JavaScript特性,包括那些来自2015年的ECMAScript和未来的提案中的特性,比如异步功能和Decorators,以帮助建立健壮的组件。这些特性为高可信应用程序开发时是可用的,但是会被编译成简洁的ECMAScript3(或更新版本)的JavaScript。
TypeScript初探的更多相关文章
- TypeScript之interface初探
TypeScript的核心原则之一是对值所具有的结构进行类型检查,在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. function printLabel(la ...
- 初探typescript
学习任何知识都不是一蹴而就的.typescript也是如此.今天我们来初步的了解一下typescript的安装与编译.以及基础的语法知识. 第一步:安装ts 第二步:在安装好的文件夹里面,写上ts文件 ...
- 转载:《TypeScript 中文入门教程》 3、接口
版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript的核心原则之一是对值所具有的shape进行类型检查. 它有时 ...
- 从 JavaScript 到 TypeScript
本文首发在我的个人博客:http://muyunyun.cn/posts/66a54fc2/ 文中的案例代码已经上传到 TypeScript TypeScript 并不是一个完全新的语言, 它是 Ja ...
- 在Vue 中使用Typescript
Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类 ...
- Vue 中使用 typescript
Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类 ...
- 初探webpack之编写plugin
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 初探webpack之编写loader
初探webpack之编写loader loader加载器是webpack的核心之一,其用于将不同类型的文件转换为webpack可识别的模块,即用于把模块原内容按照需求转换成新内容,用以加载非js模块, ...
随机推荐
- P5290 [十二省联考2019]春节十二响
题目地址:P5290 [十二省联考2019]春节十二响 骗分方法 如果你实在一点思路也没有,暴力都不会打,那么请考虑一下骗分. 方法一 输出所有 \(M\) 的和. 期望得分:0分. 实际还有5分 方 ...
- Lua中字符串库中的几个重点函数
[前言] 在<Lua中的一些库(1)>中也说到了,要对string库的模式匹配进行单独的讲解.对于字符串的处理,对于任何语言的学习来说,都是一个难点,而且也是一个必会的知识点.给你一个字符 ...
- Python知识目录
目录 一.计算机基础 二.Python基础 三.函数 四.常用模块 五.模块和包 六.面向对象 七.网络编程socket 八.数据库 九.前端 十.Python Web框架 十一.版本控制--GIT ...
- 02-Django基础知识
一.内容回顾 1.web应用程序 2.HTTP协议 a.http协议特性 b.http请求格式 c.http响应格式 3.wsgiref模块 4.Django下载与简单应用 a.Django简介(MT ...
- NOIP2018普及初赛解析
2018年第二十四届全国青少年信息学奥林匹克联赛初赛普及组真题解析 一.单项选择题 1. 以下哪一种设备属于输出设备:(D) A.扫描仪 _B.键盘C. 鼠标 _D. 打印机 解析:送分题,前三个都是 ...
- Linux 目录结构和常用命令
Linux目录结构 目录 说明 bin 存放二进制可执行文件(ls,cat,mkdir等) boot 存放用于系统引导时使用的各种文件 dev 用于存放设备文件 etc 存放系统配置文件 home 存 ...
- python 单行写法
if not any([_ in fingers for _ in finger_ids])
- [Web]Restful风格的适用场景
最近一直在兜兜转转Restful的相关内容,准备在原先的项目上构建restful的API. 实践过程很别扭,直到看到这篇文章[A Brief Introduction to REST], 我才终于断定 ...
- [是男人就过8题——Pony.ai]Perfect N-P Arrays
[是男人就过8题--Pony.ai]Perfect N-P Arrays 题目大意: 一棵\(n(\sum n\le5\times10^6)\)个结点的树,每个结点都有一个括号.求树上一个合法的括号序 ...
- Flex核心属性整理
main axis和cross axis的位置不一定是水平和垂直的,以flex-direction的值即为主轴方向 justify-content:主轴对齐方式 space-between:将多余空间 ...