先来认识一下Babylonjs,由于基于webgl来开发,所以先介绍一下基础知识. Webgl是一个html标准,他要在canvas元素上初始化. Html页面上的准备 所以我们先从html页面开始看起 我们设置一个canvas,提供给babylon渲染用 然后因为我们用typescript,你可以看到引入的脚本叫app.js,但是在我么的项目里只有app.ts 生成的时候app.ts 会被编译为app.js TypeScript代码 看,熟悉的class,比js的prototype看着舒服吧,…

一个开源的Webgl3D引擎,javascript or typescript http://www.babylonjs.com 啥是WebGL WebGL 网页图形库,简称WebGL,是一个JS库,设计来为任何兼容它的浏览器显示实时3D或者2D图像,是w3c标准,无需插件. 啥是JS 我不想谈这个问题 啥是TypeScript TypeScript是C#首席设计师Andrew设计的新语言,特性非常克制,克制的原因是要保证他可以零代价转换为javaScript,是目前最高效的js类型增强手段.J…

中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescript 学习笔记二:数据类型 Typescript 学习笔记三:函数 Typescript 学习笔记四:回忆Es5 中的类 Typescript 学习笔记五:类 Typescript 学习笔记六:接口 Typescript 学习笔记七:泛型 泛型的定义 泛型:软件工程中,我们不仅要创建一致的定义良好的…

中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescript 学习笔记二:数据类型 Typescript 学习笔记三:函数 Typescript 学习笔记四:回忆Es5 中的类 Typescript 学习笔记五:类 Typescript 学习笔记六:接口 Typescript 学习笔记七:泛型 Typescript 中的接口 接口的作用:在面向对象的编程中…

中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescript 学习笔记二:数据类型 Typescript 学习笔记三:函数 Typescript 学习笔记四:回忆Es5 中的类 Typescript 学习笔记五:类 Typescript 学习笔记六:接口 Typescript 学习笔记七:泛型 类的定义 ES5 中定义: function Person (…

中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescript 学习笔记二:数据类型 Typescript 学习笔记三:函数 Typescript 学习笔记四:回忆Es5 中的类 Typescript 学习笔记五:类 Typescript 学习笔记六:接口 Typescript 学习笔记七:泛型 最简单的类 function Person (name, ag…

中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescript 学习笔记二:数据类型 Typescript 学习笔记三:函数 Typescript 学习笔记四:回忆Es5 中的类 Typescript 学习笔记五:类 Typescript 学习笔记六:接口 Typescript 学习笔记七:泛型 前言 typescript中为了使编写的代码更规范,更有利于维…

中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescript 学习笔记二:数据类型 Typescript 学习笔记三:函数 Typescript 学习笔记四:回忆Es5 中的类 Typescript 学习笔记五:类 Typescript 学习笔记六:接口 Typescript 学习笔记七:泛型 函数的定义 ES5 函数定义:函数声明.匿名函数.传参 //…

前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitbook 若是有不对的地方,欢迎留言指出. 众所周知,JavaScript 是弱类型的,而这对开发人员来说,在一定程度上算是一个"痛点".解决这个问题的两个主要库是 Typescript 和 Flow.但 Typescript 似乎更受欢迎,且越来越受到开发人员的喜爱. 中文网:https:…

我之前有写过TS1.5版本之前的“模块”的笔记:TypeScript学习笔记(七):模块 但是TS这里的模块和在ECMAScript 2015里的模块(即JS原生支持了模块的概念)概率出现了混淆,所以在1.5的版本里,为了与ECMAScript 2015里的术语保持一致,“内部模块”现在称做“命名空间”,“外部模块”现在则简称为“模块”. 下面摘录自Egret博客的一段详细解释(连接): 大体意思就是 TS1.5 以后,推荐全面使用namespace关键字代替module.因为JS里本身就有mo…

关于第二章的学习笔记是变量声明. 接口:TypeScript的核心原则之一是对值所具有的结构进行类型检查. 它有时被称做“鸭式辨型法”或“结构性子类型化”. 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 还有一点值得提的是,类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以  可选属性: 接口里的属性不全都是必需的. 有些是只在某些条件下存在,或者根本不存在. 可选属性在应用“option bags”模式时很常用,即给函数传入的参…

作为一个前端开发者,学习新技术跟紧大趋势是必不可少的.随着2019年TS的大火,我打算利用一个月的时间学习这门语言.接下来的几篇文章是我学习TS的学习笔记,其中也会掺杂一些学习心得.话不多说,先从基础变量类型开始吧! 前言 TS与JS的关系是怎样的? “TypeScript 是 JavaScript 的类型超集,可以编译为原生 JavaScript”.所谓“超集”,就是说 TypeScript 扩展了 JavaScript,只是在 JavaScript 的基础上添加了新特性.因此如果你有Java…

JavaScript中的模块 在学习TypeScript的模块之前我们先看看在JavaScript中的模块是如何实现的. 模块的好处 首先我们要了解使用模块的好处都有什么? 模块化.可重用: 封装变量与函数: 下面的示例为使用JavaScript实现的模块: var MyModule = function(name) { //这里定义的都是私有的成员 var myName = name; var age = 25; //这里返回一个对象, 使用 JS 的闭包实现类的效果 return { //这…

使用接口 在前面的笔记中我们知道可以使用Object Type来指定参数的属性,如下: function printLabel(labelledObj: {label: string}) { console.log(labelledObj.label); } var myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); 这种做法也可以通过接口实现: interface LabelledValue { label:…

这篇笔记我们来看看TypeScript中的函数. 函数类型 在JavaScript中存在两种定义函数的方法,如下: //命名函数 function add(x, y) { return x+y; } //匿名函数 var myAdd = function(x, y) { return x+y; }; 在TypeScript中对应的写法如下: function add(x: number, y: number): number { return x+y; } var myAdd = functio…

从今天开始学习typescript了,记录ts学习点滴,最后,使用ts结合nodejs开发后端应用,一起共勉吧: typescript最新版本2.6,所有演示代码均基于此版本 开始之前确定安装了如下npm包: npm i typescript -g // ts全局包 npm i ts-node -g // 使用ts-node可以直接运行ts文件 基础类型 布尔类型 let isDone: boolean = false let isExist: boolean = true console.lo…

为了面向ng2和前端未来,开始搞向ts,ts是微软出的一枚语言,作为es6的超集,他出的一些特性还是蛮好用的(略坑).对于我等纯前端(从开始就接触javascript)的人来说,真想说,这特么什么鬼.部分特性同es6(个人对es6还是蛮有好感的).ts同期的coffeescript,将js python化,ts也把js搞的向其他语言靠拢.. 中文学习,这里是英文学习.如果不想看这些东西,那看我笔记学吧.哈哈. ts的基础类型,布尔值,数字,字符串,数组,元组(Tuple),枚举,任意值,空值.后…

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上. 以上为网上对 Typescript 的一些解释,那我们为什么要学 Typescript? 提到前端我们首先会想到 HTML,CSS,JavaScript 三大家族,我们掌握这三个就可以在前端界获得一…

目录 一.学习TypeScript的缘由 二.学习环境的搭建 1. TypeScript的编译环境 2. vscode自动编译的配置 三.TypeScript中的数据类型 1. 简单变量的定义和初始化 2. 复杂变量的定义和初始化 数组类型 元组类型 枚举类型 3. 其他变量类型 任意类型 undefined类型 void类型 一.学习TypeScript的缘由 当前编写前端的逻辑的主流语言仍是JavaScript,但这个语言由于其弱类型的特性使得它在很多的方面给程序员带来了许多的困扰,例如在使…

认识泛型 TypeScript也实现了类型于C#和Java的泛型以实现类型的参数化,我们先看一个需求: function identity(arg: any): any { return arg; } 我们希望方法identity可以传入任意类型,并且返回传入的类型,这样写可以达到效果但是不能确定返回的类型,使用泛型的写法如下: function identity<T>(arg: T): T { return arg; } var output = identity<string>…

类 在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中的基本数据类型都有哪些. boolean 布尔值,支持true和false. var isDone: boolean = false; 默认为undefined,此时其和true与false判断都为false. var isDone: boolean; function run() { alert(isDone == true);//false alert(isDone == false);//false } run(); 所以在使用boolean类型时…

官网 TypeScript目前还在快速的发展中,当前的版本是1.6,有关TypeScript更多的信息可以在其官网中获取. http://www.typescriptlang.org/ 什么是TypeScript? TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发.TypeScript增加了对为即将到来的ECMAS…

1.为Js原始值创建临时对象,并进行属性引用 var s="text"; s.len=4;//这里Js调用new String(s)的方法创建了一个临时对象,用来属性引用 console.log("s.len属性的值为:"+s.len);//属性引用结束后销毁临时对象,因此s.len的值为undefined 运行结果为: s.len属性的值为:undefined 2.Js原始值的属性不可以修改,而对象的属性可以修改 var o={x:1}; o.x=2;//修改对象…

TypeScript的类,简单地定义如下: class Person { x: number; // 默认为public类型 y: number; constructor(x1: number, y1: number) { // 默认为public类型 this.x = x1; this.y = y1; } } let test = new Person(12, 34) ts中,定义一个类使用class关键字,使用new进行类的实例化,constructor关键字用来定义该类的构造函数. 参数属…

TypeScript的接口,个人理解就是一种约束,包括各种类型的契约或者代码定义上的契约.当然,和java中的用法基本一致,接口可以被继承也可以被实现. 定义一个简单的interface interface LabelledValue { label: string; } function printLabel(labelledValue: LabelledValue) { console.log(labelledValue.label); } let myLabel: LabelledValu…

什么是 TypeScript TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript. 安装 TypeScript 命令行工具安装: npm install -g typescript 编译一个 TypeScript 文件: tsc hello.ts 原始数据类型/ 任意值 为每一个变量提前申明该类型,则该变量取值只能为申明的类型,否则报错 如果一个变量可以任意取值,可以通过any 申明该变量为任意值 原始数据类型包括:布尔值(boolean).数值(…

javascript从es5之前都缺少一种模块机制,无法通过js引入文件,于是requirejs等等的加载器应运而生.这些加载器的使用也并不统一,产生了amd,commonjs,umd等等的规范,各有所长,直到es6的发布,js自身引入的模块机制,将会在以后逐渐被应用起来. Typescrit的模块机制与es6的模块基本类似,也提供了转换为amd,es6,umd,commonjs,system的转换,一会我们通过一个简单的例子来运行一下ts的模块. ts特殊的内联标签. /// <referen…

typescript的类,与c#,java等语言的类类似.也是包含了一大部分的es6的实现.我会用最通俗的语言讲一下对coding有用的地方. class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("w…

装饰器简介 装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式. 需要注意的是:装饰器是一项实验性特性,在未来的版本中可能会发生改变. 若要启用实验性的装饰器特性,你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项: { "compilerOptions": { "target": "ES5", "experimentalDecorators&q…