简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了 JavaScript 的句法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性. TypeScrip…

缘由 事情是这样的,我想搜索 TypeScript 中文教程,结果在 https://www.baidu.com , https://cn.bing.com ,上都找不到官方的翻译,也没有一个像样的翻译(搜索的时间是2015-12-02),可怜我们无法使用google,所以就想去自己翻译官方的 TypeScript-Handbook. 于是我Fork了官方的库 https://github.com/Microsoft/TypeScript-Handbook , 到我的库中https://gith…

目录 虽然我是转载的,但看在Copy这么多文章也是很幸苦的好吧,我罗列一个目录. 转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015-12-03 11:35) 转载:<TypeScript 中文入门教程> 15.可迭代性 (2015-12-03 11:33) 转载:<TypeScript 中文入门教程> 14.输入.d.ts文件 (20…

转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015-12-03 11:35) 转载:<TypeScript 中文入门教程> 15.可迭代性 (2015-12-03 11:33) 转载:<TypeScript 中文入门教程> 14.输入.d.ts文件 (2015-12-03 11:31) 转载:<TypeScript 中文入门教程&…

前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 Manuallyselec…

1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 Manuallyselectfeatures. 接下来,只需确保选择了 TypeScript和 Babel选项,如下图: 完成此操作后,它会询问你是否要使用 class-style component syntax. 然后配置其余设置,使其看起来如下图所示. Vue CLI工具现在将安装所有依赖项并…

最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --save npm install ts-loader typescript tslint tslint-loader tslint-config-standard -…

ts介绍 TypeScript是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. 与js关系 ts与js区别 TypeScript JavaScript JavaScript 的超集,用于解决大型项目的代码…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 随着TypeScript和ES6里引入了类,现在在一些场景下我们会需要额外的特性来支持注解或修改类和类成员. Decorators提供了一种方式来添加注解和在类的声明和成员上使用元编程语法. Javascript里的Decorators目前处在建议征集的第一阶段,在TypeScript里做为实验性特性已经提供了支持. 注意  Decorators是实验性的特性,在未来的版本中可…

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

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript里的类型兼容性基于结构子类型的. 结构类型是只一种只使用其成员来描述类型的方式. 它正好与名义类型形成对比. 看下面的例子: interface Named { name: string; } class Person { name: string; } var p: Named; // OK, because of structural typing p…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 这节介绍TypeScript里的类型推论.即,类型是在哪里如何被推断的. 基础 TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型.如下面的例子 var x = 3; 变量x的类型被推断为数字. 这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时. 大多数情况下,类型推论是直截了当地. 后面的小节,我们会浏览类型推论时的细微差别. 最佳通…

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

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 除了传统的面向对象继承方式,还流行一种通过可重用组件创建类的方式,就是联合另一个简单类的代码. 你可能在Scala等语言里对mixins及其特性已经很熟悉了,但它在JavaScript中也是很流行的. 混入示例 下面的代码演示了如何在TypeScript里使用混入. 后面我们还会解释这段代码是怎么工作的. // Disposable Mixin class Disposable…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能. 在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据. 这样用户就可以以自己的数据类型来使用组件. 泛型之Hello World 下面来创建第一个使用泛型的例…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 函数是JavaScript应用程序的基础. 它帮助你实现抽象层,模拟类,信息隐藏和模块. 在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方. TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易的使用. 函数 和JavaScript一样,TypeScript函数可以创建有名字的函数和匿名函数. 你可以随意选择…

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

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

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

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但这对于熟悉使用面向对象方式的程序员来说有些棘手,因为他们用的是基于类的继承并且对象是从类构建出来的. 从ECMAScript 2015,也就是ECMAScript 6,JavaScript程序将可以使用这种基于类的面向对象方法. 在TypeScript里,我们允许开发者现在就使用这些特性,并且编译后的J…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript的核心原则之一是对值所具有的shape进行类型检查. 它有时被称做“鸭式辨型法”或“结构性子类型化”. 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 接口初探 下面通过一个简单示例来观察接口是如何工作的: function printLabel(labelledObj: { label: string }) { c…

版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 由于第一章节是我翻译的,而且与他的版本不一致,导致第一章节有枚举这部分,而他的第二章节也有这部分,但内容不同,所以我保留了这部分. 枚举 使用枚举我们可以定义一些有名字的数字常量. 枚举通过使用enum关键字定义. enum Direction { Up = 1, Down, Left, Right } 一个枚举类型可以包含零个或多个枚举成员. 枚举成员具有一个数字值,它们可以是常数…

转载:https://github.com/MyErpSoft/TypeScript-Handbook/blob/master/pages/zh-CHS/Basic%20Types.md 概述 为了让程序更易用,我们兼容几种最基本的数据类型:numbers(数字),strings(字符串),structures(结构),boolean(布尔值)等等.在 TypeScript 中,我们支持和 Javascript 几乎一样多的类型,并且新增了实用的枚举类型. Boolean 布尔值 最基础的数据类…

1.通过npm安装 typescript 进入终端窗口安装typescript: npm install -g  typescript 查看typescript版本号: tsc -v 2.编译代码:tsc XX.ts 3.执行代码:node XX.js…

变量类型的那些事 1.基本注解 类型注解使用:TypeAnnotation 语法.类型声明空间中可用的任何内容都可以用作类型注解. const num: number = 123; function identity(num:number):number{ return num; } 加入注解以后会报错的写法: const num: number = 123; function identity(num: number): number { const num1 = '123' // 返回的不是…

1.TypeScript是什么? TypeScript 是 JavaScript 的一个超集,TypeScript 在 JavaScript 的基础上添加了可选的 静态类型 和基于 类 的面向对象编程. 2.为什么要用 TypeScript ? 针对这个问题我们可以从两个方面来分析: 2.1 用TypeScript的目的是什么 ? TypeScript 最大的目的是让程序员更具创造性,提高生产力,它将极大增强 JavaScript 编写应用的开发和调试环节,让 JavaScript 能够方便于编…

命令行使用tsc 1.安装typescript npm install -g typescript 2.新建一个index.ts 输入export hello class{} 3.编译 tsc index.ts 4.查看编译后的文件 ==================== 在webstorm使用tsc 1.创建typescript文件2.编写tsc代码3.点右上角的配置4.配置自动编译tsc文件即可 https://www.imooc.com/video/13522 =============…

一.字符串 1.多行字符串: (支持换行) ` <div></div> <p></p> ` 2.表达式:${} --> 变量 var a = 'david'; var b = function(){return 'world'}; console.log( `hello ${a}` ) --> hello david console.log( `hello ${b()}` ) --> hello world 3.自动拆分字符串: funct…

Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS: 建议使用 Visual Studio Code 进行开发 vue-cli 3.0 可以直接创建 typescript 项目,不过目前还只有 beta 版,有兴趣的朋友可以尝试一下 一.安装依赖 首先还是用 vue-cli 生成项目 vue init webpack demo 然后安装必要依赖项:…

1. 前言 ES6的普及,大大简化了JavaScript的表达方式 大型项目中,js没有类型检查.表达方式灵活,多人协作代码调试和维护成本高 2. 定义 TypeScript 是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程,可以理解成是 js 的强类型版本 这里的Type:类型(指的就是静态类型检查) 3. 走马观花学一下 npm安装: npm install -g typescript 新建ts.ts文件如下: function hello…