我一直认为学习是知识的累加,而前端技术也是进步的.所以学习的重点就是,'它有什么不同,它好在哪里'.这要求我们必须结合之前的经验和知识去学习一门新技术,而不是无情的复制粘贴机器. 首先,ts的官方定义是 TypeScript 是一个编译到纯 JS 的有类型定义的 JS 超集. 这里有几个关键词,'编译'.'JS'.'类型定义'.'超集'.单独看下来似乎都明白,结合起来也就模糊了.但是很明显,它是js的衍生.所以,我们要结合js去学习. 我在学习它的语法之前特意去找了'为啥要学ts',搞明白了这个…

什么是typescript? typescript是微软开发的一个脚本语言.他是JavaScript的超级,他遵循es6语法规范,他扩展了JavaScript的语法. 理解es5,es6,javascript,typescript的概念和关系? es是JavaScript脚本规范,我们常用的es5,es6是这个规范的两个不同版本.因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现 我们为什么要学习typescript语言? 1.因为typesc…

JavaScript 是一门动态弱类型语言,对变量的类型非常宽容,而且不会在这些变量和它们的调用者之间建立结构化的契约. Angular 已经使用 TypeScript 重构了代码,另一大前端框架 Vue 的新版本也将使用 TypeScript 进行重构.在可预见的未来,TypeScript 将成为前端开发者必须掌握的开发语言之一. 从 TypeScript 的基础语法开始讲起,为你详细解读 TypeScript 的每个特性以及它与 JavaScript 的区别,并通过工程篇和实战篇的讲解,让你…

新的项目想使用typescript,因此又对其概念及使用过一遍,本文主要记录下对之前一些概念不太理解的地方. 1.泛型 定义: 在定义函数.接口或者类的时候,不预先指定具体的类型,而是在使用的时候再指定类型.提高可重用性. function createArray<T>(length: number, value: T): Array<T>{ let result: T[] = []; for (let i = 0; i < length; i++){ result[i] =…

/* 1.vscode配置自动编译 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2.第二步 任务 - 运行任务 监视tsconfig.json 2.typeScript中的数据类型 typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型 布尔类型(boolean) 数字类型(number) 字符串类型(string) 数组类型(ar…

本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了ng-conf的组织者. 阐述了TypeScript是JavaScript的超集,并不是另外一种语言. 引用了他的两个朋友最喜欢的TypeScript特性. 由于开场白内容不太重要,所以不再详述.下面开始讲解Dan Wahlin最喜欢的TypeScript的特性. 类型支持(Type Support…

TypeScript: Angular 2 的秘密武器(译)   本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了ng-conf的组织者. 阐述了TypeScript是JavaScript的超集,并不是另外一种语言. 引用了他的两个朋友最喜欢的TypeScript特性. 由于开场白内容不太重要,所以不再详述.下面开始讲解Dan Wahlin最喜欢…

写在前面 作者并没有任何可以作为背书的履历来证明自己写作这份手册的分量. 其内容大都来自于TypeScript官方资料或者搜索引擎获得,期间掺杂少量作者的私见,并会标明. 大部分内容来自于http://www.infoq.com/minibooks/typescript-c-sharp-programmers 你甚至可以认为这就是对这本英文小册子的翻译,实际上80%如此. 写给那些已经有编程基础,尤其是掌握c语言.c#.java这一类型的静态类型语言的同好. 鸣谢 先谢国家,虽然并不知道要谢些什…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 当使用外部JavaScript库或新的宿主API时,你需要一个声明文件(.d.ts)定义程序库的shape. 这个手册包含了写.d.ts文件的高级概念,并带有一些例子,告诉你怎么去写一个声明文件. 指导与说明 流程 最好从程序库的文档开始写.d.ts文件,而不是代码. 这样保证不会被具体实现所干扰,而且相比于JS代码更易读. 下面的例子会假设你正在参照文档写声明文件. 命名空间…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript有一些独特的概念,有的是因为我们需要描述JavaScript顶级对象的类型发生了哪些变化. 这其中之一叫做声明合并. 理解了这个概念,对于你使用TypeScript去操作现有的JavaScript来说是大有帮助的. 同时,也会有助于理解更多高级抽象的概念. 首先,在了解如何进行声明合并之前,让我们先看一下什么叫做声明合并. 在这个手册里,声明合并是指编译器会…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语名已经发生了变化. “内部模块”现在称做“命名空间”. “外部模块”现在则简称为“模块”,这是为了与ECMAScript 2015里的术语保持一致,(也就是说 module X { 相当于现在推荐的写法 namespace X {). 介绍 关于术语的一点说明: 请务必注意一点,TypeScript 1.5里术语…

当使用扩展的JavaScript库或者插件API的时候,将需要使用声明文件(.d.ts)来描述库的类型.本文内容将包括如何编写声明文件相关的一些高级概念,然后用一些例子来展示如何将各式各样的概念与声明文件的描述相匹配. 流程 写.d.ts最好是从库的说明文档开始,而不是代码.从说明文档开始可以保证思维不受实现细节的影响,并且比阅读JS代码容易理解.下面的例子假设是根据说明文档写的,并且提供调用代码. 命名空间 当定义接口(例如"options"对象)的时候,你可以选择是否将这些类型放入…

TypeScript中有一些独特的概念,来自需要描述JavaScript对象类型发生了哪些变化.举个例子,最为独特的概念就是"声明合并".理解了这个概念将会对你在当前JavaScript项目中使用TypeScript开发很有帮助.同时也打开了了解更高级抽象概念的门. 就本文目的而言,声明合并是指编译器执行将两个名称相同的声明合并到一个单独的声明里的工作.合并后的声明具有两种原始声明的特性.当然,声明合并不限于合并两个声明,需要合并的声明数量可任意(注意:他们之间具有相同名称). 基本概…

  <TyptScript语言手册>第1章-介绍<TypeScript语言手册>第2章-基本概念<TypeScript语言手册>第3章-类型<TypeScript语言手册>第4章-表达式<TpyeScript语言手册>第5章-语句<TypeScript语言手册>第6章-函数<TypeScript语言手册>第7章-接口<TypeScript语言手册>第8章-类<TypeScript语言手册>第9章-枚…

概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loading就没法搞了. 因此我使用了webpack2,webpack2自带tree shaking,只要将tsconfig中的module设置成es2015就可以, 虽然效果没rollup好,但支持lazy loading. 另外, angular2目前不支持typescript 2.1.X,所以如果…

原文地址:http://www.moye.me/2015/04/25/using_typescript/ 入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番. 是什么 TypeScript (以下简称TS)是巨硬推出的JavaScript转译语言,这意味着: 它需要编译 TS代码会被编译成JavaScript代码 TS的特点是提供 模块.类.接口等一系列类型概念,协助开发者在编译时就定位出一些传统JavaScript项目的运行时错误,以实现巨硬所谓的”Robust c…

本文概述了TypeScript中如何使用模块以各种方式来组织代码.我们将涵括内部和外部的模块,并且讨论他们在适合在何时使用和怎么使用.我们也会学习一些如何使用外部模块的高级技巧,并且解决一些当我们使用TypeScript的模块时遇到的陷阱. 案例的基础 接下来开始写程序,我们将会在这里写上使用案例.我们来写个小型的简单字符串验证器,在我们检查网页上表单的input用户名或者检查外部数据文件格式的时候可能会用到. 单一的验证器: interface StringValidator { isAcce…

TypeScript官网 TypeScript中文网 TypeScrpit Handbook 中文版 DefinitelyTyped The TypeScript Definition Manager TSD(全称为:TypeScript Definition manager for DefinitelyTyped)- ts包管理工具 使用Visual Studio Code搭建TypeScript开发环境 tsd-提升IDE对JavaScript智能感知的能力 一.概念 *.ts:typesc…

使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是本人的偶像)领衔开发的.(安德斯·海尔斯伯格是Delphi 和 C#之父,Turbo Pascal 编译器的主要作者,.NET 概念发起人之一,同时也是TypeScript开源项目的重要领导人.他于1996年加入微软,目前是 C# 语言的首席架构师和 TypeScript 的核心开发者,获微软卓越工…

原文地址:https://blogs.msdn.microsoft.com/typescript/2016/01/28/announcing-typescript-1-8-beta/ 今天,我们发布了 TypeScript 1.8 Beta,伴随着 1.8 版本带来了大量的变化.欢迎使用并反馈给我们:send us your feedback. 可以从  Visual Studio 2015, NuGet (Compiler 和 MSBuild task), npm, 或者直接从 source …

简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识TypeScript的过程. 注:本文编写时,基于Typescript0.8版本,而且初用,可能过时,具体规范可以参考http://www.typescriptlang.org 命名空间和类 作为面向对象的开发人员思维,第一个想到的是TypeScript如何定…

原文地址:https://angular.io/docs/ts/latest/quickstart.html Angular 2 终于发布了 beta 版.这意味着正式版应该很快就要发布了. 让我们使用 TypeScript 语言从头创建一个超级简单的 Angular 2 应用. 如果不喜欢 Typescript,你也可以使用 JavaScript 来完成这个演练. See It Run! 官方提供了一个在线的演示,地址在这里:live example,不过你可能不能正常访问.还是让我们自己来实…

你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非真正设计用于开发大型 Web 应用,JavaScript 没有提供类和模块等概念,对于一个真正的应用开发,TypeScript 扩展JavaScript 并实现了这些特性.Typ…

/* 其实前面一些都是废话,因为都和C#类似.从模块开始就需要深入的去理解了 文档反复声明了 内部模块现在称做 命令空间 外部模块称为 模块 模块在其自身的作用域里执行,而不是在全局作用域里,也就是说模块内的变量函数类等在模 块外部是不可见的. 模块是自声明的,两个模块之间的关系是通过文件级别上使用 imports exports建立 模块使用模块加载器去导入其它的模块,像CommonJS.Require.JS 作用是执行此模块代码前 去查找并执行这个模块的做有依赖 */ /* 说了这么多,什么…

类 在TypeScript中,类似于C#的结构,即一个文件中可以存在多个类,且文件名可以任意取,我们先看一个简单的类的示例. class Person { private name: string; private age: number; public constructor(name:string, age:number) { this.name = name; this.age = age; } public talk() { alert("Hi, my name is " +…

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销:增加一个完整的类结构,使之更新是传统的面向对象语言. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非设计用于开发大型 Web 应用,JavaScript 没有提供类和模块的概…

上一节,我简单介绍了Typescript,并将Typescript和JavaScript进行了对比,有些网友提出了一些疑问,可能有些网友对于这个Typescript还不是特别的熟悉,这节,我做一些演示. 1.安装Typescript Google Search Typescript,找到Typescript的下载安装包,我这次下载的0.9.0.1版本,安装图片: 安装过程非常迅速,一分钟搞定. 2.测试看是否安装成功,打开命令窗口(win+R),输入cmd ,命令窗口打开,输入tsc,你会看到相…

前言 在介绍Typescript 之前,我需要隆重介绍一个人: 安德斯·海尔斯伯格(Anders Hejlsberg,1960.12~),丹麦人,Turbo Pascal编译器的主要作者,Delphi和C#之父,同时也是·NET创立者.当然现在也是Typescript的创始者.目前是就职微软,是微软技术领域的智囊团之一. 1.简单介绍Typescript http://www.typescriptlang.org/ 这是Typescript的官方网站,在这里,可以找到英文的关于Typescrip…

1.接口奇葩验证 interface Abc { name : string } function abc(obj : Abc) { } let ttc = { name: "adad", age: 12 }; abc(ttc); //no error abc({ name: "adad", age: 12 }); //error 对象字面量会有特别的检查, 所以一个 no error ,一个 error. 2. readonly const data: strin…

TypeScript 5 分钟快速入门 翻译:Angular 2 - TypeScript 5 分钟快速入门 原文地址:https://angular.io/docs/ts/latest/quickstart.html Angular 2 终于发布了 beta 版.这意味着正式版应该很快就要发布了. 让我们使用 TypeScript 语言从头创建一个超级简单的 Angular 2 应用. 如果不喜欢 Typescript,你也可以使用 JavaScript 来完成这个演练. See It Run…