什么是TypeScript?

TypeScript是一种由微软开发的自由的和开源的编程语言,它是JavaScript的一个超集,扩展了JavaScript的语法。

TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。

TypeScript安装:

  • 通过 Node.js 包管理器 (npm)
  • 通过与 Visual Studio 2012 继承的 MSI. https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.TypeScript10ToolsforVisualStudio201

我是用的第二种安装,微软开发的嘛,windows下就图形界面多爽啊

安装完毕后,随意写了一个ts代码,用tsc xx.ts编译,在同目录下生成了xx.js,截图如下

http://www.runoob.com/manual/gitbook/TypeScript/_book/

坑1: 稍微修改了,想试下数据类型,此时频繁遇到 error TS1005: ' ; ' expected

去知乎搜索了一下,是因为我上述的typeScipt版本太低,才1.0,于是我删除了C:\Program Files (x86)\Microsoft SDKs\TypeScript对应的1.0文件夹,于是我就不能编译啦

哈哈哈哈,^_^

看来我是要第一种方法去安装typeScipt了

查看一下我的npm版本

npm --version

npm下载typeScript

npm install -g typescript

这下成功编译了。^_^

http://www.runoob.com/manual/gitbook/TypeScript/_book/

http://www.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Basic%20Types.html

https://github.com/zhongsp/TypeScript

alert('hello world in TypeScript!');
//我们使用let关键字来代替大家所熟悉的JavaScript关键字var。 let关键字是JavaScript的一个新概念,TypeScript实现了它
let isDone: boolean = false;
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744; let a : boolean = true;
let b : number = 1;
let c : string = 'Tommy';
//模版字符串
let d : string = `Hello ${c}`;
let e : number[] = [2, 3, 4];
//泛型定义数组
let f : Array<number> = [1, 2, 3]; //元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 let array : [number, string] = [1, 'Tommy'];
array = [2, 'Jerry']; //OK
// array = ['2', 'Jerry']; Error
//当访问一个已知索引的元素,会得到正确的类型:
console.log(array[1].substring(0, 1));
//当访问一个越界的元素,会使用联合类型替代:
array[2] = 'male'; //OK
array[3] = 30; //OK
// array[4] = true; // Error, 布尔不是(string | number)类型 //基础数据类型—枚举
enum Gender{Male, Female, Unknown} let tommy = {
id : 1,
name : 'Tommy',
gender : Gender.Male
}; let lucy = {
id : 2,
name : 'Lucy',
gender : Gender[1]
}; //基础数据类型—任意值
let obj : any = 'Tommy';
obj = 1; //OK
obj = false;//OK
let str : string = 'Tommy';
// str = 1; //Error //基础数据类型—空值
//某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void:
//声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null:
//TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null
//默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。
//然而,当你指定了--strictNullChecks标记,null和undefined只能赋值给void和它们各自。 //基础数据类型—空值
//基础数据类型—断言
//类型断言有两种形式。 其一是“尖括号”语法:
let str222: any = "this is a string";
let strLength: number = (<string>str222).length;
let strLength2: number = (str222 as string).length; //生命变量
//let和const是JavaScript里相对较新的变量声明方式
//var声明可以在包含它的函数,模块,命名空间或全局作用域内部任何位置被访问
//当用let声明一个变量,它使用的是词法作用域或块作用域。
//不同于使用 var声明的变量那样可以在包含它们的函数外访问,块作用域变量在包含它们的块或for循环之外是不能访问的。
//let不能在1个作用域里多次声明同名变量
//const拥有与 let相同的作用域规则,但是不能对它们重新赋值。 //接口
//TypeScript的核心原则之一是对值所具有的shape进行类型检查。
//它有时被称做“鸭式辨型法”或“结构性子类型化”。
//在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约 interface IUser {
readonly id ?: number;
name : string;
} function addUser(user:IUser) : IUser{
return user;
} let tommyiuser = {id:1, name:""};
let _tommy = addUser(tommyiuser);
addUser({name:"Jack"});
let _tommy2 =addUser({name:"Jack"});
// _tommy.id = 3;
// addUser({id:2});
// addUser({id:2, name:3}); //接口能够描述JavaScript中对象拥有的各种各样的外形。
//除了描述带有属性的普通对象外,接口也可以描述函数类型。
interface PrintFunc{
(message:string):string;
} let consolePrintFunc : PrintFunc = function(message:string) : string {
console.log('console print ' + message);
return "console log ok";
} let log4jPrintFunc : PrintFunc = function(message:string): string {
console.log('log4j print ' + message);
return "log4j log ok";
} interface StringMap {
[key : string] : string;
} let map : StringMap = {name:'1'};
// let map2 : StringMap = {name : 1}; interface StringArray {
[index : number] : string;
} let array3 : StringArray = ['hello', 'world']; interface IUserService {
addUser(user: IUser): IUser;
updateUser(user: IUser): IUser;
deleteUser(userId: number): boolean;
} class UserService implements IUserService { addUser(user: IUser): IUser {
return user;
} updateUser(user: IUser): IUser {
return user;
} deleteUser(userId: number): boolean {
return true;
}
} interface IName {
name : string;
} interface IId {
id : number;
} interface INameId extends IName, IId{} let tony : INameId = {id : 1, name : 'tony'}; interface Counter {
(start: number): string;
interval: number;
reset(): void;
} function getCounter(): Counter {
let counter = <Counter>function (start: number) { };
counter.interval = 123;
counter.reset = function () { };
return counter;
} let cc = getCounter();
cc(10);
cc.reset();
cc.interval = 5.0; class User {
private id : number;
name : string; constructor(id, name) {
this.id = id;
this.name = name;
} getId() {
return this.id;
} setId(id:number) {
this.id = id;
}
} let tom : User = new User(1, 'Tommy');
tom.name = 'Tom';
tom.setId(2);
// tom.id = 2;
//类 – 作用域
//在TypeScript里,成员都默认为 public。
//当成员被标记成private时,它就不能在声明它的类的外部访问
//protected修饰符与private修饰符的行为很相似,但有一点不同,protected成员在派生类中仍然可以访问
//你可以使用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。
//使用 static定义静态属性 class LoginUser {
protected id : number;
public name : string;
private password : string; constructor(id:number, name:string, password:string) {
this.id = id;
this.name = name;
this.password = password;
} getId() {
return this.id;
} getPassword() {
return this.password;
}
} class SSOLoginUser extends LoginUser { login() {
console.log(this.id);
// console.log(this.password);
}
} let luser = new LoginUser(1, 'tommy', '123456');
console.log(luser.name);
console.log(luser.getPassword());
// console.log(luser.id);
// console.log(luser.password); //抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。
//不同于接口,抽象类可以包含成员的实现细节。
//abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。 abstract class AUser { abstract addUser(name:string):IUser;
} class AcxiomUser implements AUser {
addUser(name:string):IUser {
let user = <IUser>{};
user.name = name;
return user;
}
} function plus(a: number, b: number): number {
return a + b;
} let sum = plus(1, 2);
// let _sum = plus(1); //在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。可选参数必须跟在必须参数后面。  
function printa(message?: string) {
console.log(message);
} printa('hello world');
printa(); function deleteUsers(...id:number[]) {
if (id && id.length) {
id.forEach(_id => console.log('delete user id = ' + _id))
}
}

 编译后的js

var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
alert('hello world in TypeScript!');
//我们使用let关键字来代替大家所熟悉的JavaScript关键字var。 let关键字是JavaScript的一个新概念,TypeScript实现了它
var isDone = false;
var decLiteral = 6;
var hexLiteral = 0xf00d;
var binaryLiteral = 10;
var octalLiteral = 484;
var a = true;
var b = 1;
var c = 'Tommy';
//模版字符串
var d = "Hello " + c;
var e = [2, 3, 4];
//泛型定义数组
var f = [1, 2, 3];
//元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。
var array = [1, 'Tommy'];
array = [2, 'Jerry']; //OK
// array = ['2', 'Jerry']; Error
//当访问一个已知索引的元素,会得到正确的类型:
console.log(array[1].substring(0, 1));
//当访问一个越界的元素,会使用联合类型替代:
array[2] = 'male'; //OK
array[3] = 30; //OK
// array[4] = true; // Error, 布尔不是(string | number)类型
//基础数据类型—枚举
var Gender;
(function (Gender) {
Gender[Gender["Male"] = 0] = "Male";
Gender[Gender["Female"] = 1] = "Female";
Gender[Gender["Unknown"] = 2] = "Unknown";
})(Gender || (Gender = {}));
var tommy = {
id: 1,
name: 'Tommy',
gender: Gender.Male
};
var lucy = {
id: 2,
name: 'Lucy',
gender: Gender[1]
};
//基础数据类型—任意值
var obj = 'Tommy';
obj = 1; //OK
obj = false; //OK
var str = 'Tommy';
// str = 1; //Error
//基础数据类型—空值
//某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void:
//声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null:
//TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null
//默认情况下null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number类型的变量。
//然而,当你指定了--strictNullChecks标记,null和undefined只能赋值给void和它们各自。
//基础数据类型—空值
//基础数据类型—断言
//类型断言有两种形式。 其一是“尖括号”语法:
var str222 = "this is a string";
var strLength = str222.length;
var strLength2 = str222.length;
function addUser(user) {
return user;
}
var tommyiuser = { id: 1, name: "" };
var _tommy = addUser(tommyiuser);
addUser({ name: "Jack" });
var _tommy2 = addUser({ name: "Jack" });
var consolePrintFunc = function (message) {
console.log('console print ' + message);
return "console log ok";
};
var log4jPrintFunc = function (message) {
console.log('log4j print ' + message);
return "log4j log ok";
};
var map = { name: '1' };
var array3 = ['hello', 'world'];
var UserService = /** @class */ (function () {
function UserService() {
}
UserService.prototype.addUser = function (user) {
return user;
};
UserService.prototype.updateUser = function (user) {
return user;
};
UserService.prototype.deleteUser = function (userId) {
return true;
};
return UserService;
}());
var tony = { id: 1, name: 'tony' };
function getCounter() {
var counter = function (start) { };
counter.interval = 123;
counter.reset = function () { };
return counter;
}
var cc = getCounter();
cc(10);
cc.reset();
cc.interval = 5.0;
var User = /** @class */ (function () {
function User(id, name) {
this.id = id;
this.name = name;
}
User.prototype.getId = function () {
return this.id;
};
User.prototype.setId = function (id) {
this.id = id;
};
return User;
}());
var tom = new User(1, 'Tommy');
tom.name = 'Tom';
tom.setId(2);
// tom.id = 2;
//类 – 作用域
//在TypeScript里,成员都默认为 public。
//当成员被标记成private时,它就不能在声明它的类的外部访问
//protected修饰符与private修饰符的行为很相似,但有一点不同,protected成员在派生类中仍然可以访问
//你可以使用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。
//使用 static定义静态属性
var LoginUser = /** @class */ (function () {
function LoginUser(id, name, password) {
this.id = id;
this.name = name;
this.password = password;
}
LoginUser.prototype.getId = function () {
return this.id;
};
LoginUser.prototype.getPassword = function () {
return this.password;
};
return LoginUser;
}());
var SSOLoginUser = /** @class */ (function (_super) {
__extends(SSOLoginUser, _super);
function SSOLoginUser() {
return _super !== null && _super.apply(this, arguments) || this;
}
SSOLoginUser.prototype.login = function () {
console.log(this.id);
// console.log(this.password);
};
return SSOLoginUser;
}(LoginUser));
var luser = new LoginUser(1, 'tommy', '123456');
console.log(luser.name);
console.log(luser.getPassword());
// console.log(luser.id);
// console.log(luser.password);
//抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。
//不同于接口,抽象类可以包含成员的实现细节。
//abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。
var AUser = /** @class */ (function () {
function AUser() {
}
return AUser;
}());
var AcxiomUser = /** @class */ (function () {
function AcxiomUser() {
}
AcxiomUser.prototype.addUser = function (name) {
var user = {};
user.name = name;
return user;
};
return AcxiomUser;
}());
function plus(a, b) {
return a + b;
}
var sum = plus(1, 2);
// let _sum = plus(1);
//在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。可选参数必须跟在必须参数后面。  
function printa(message) {
console.log(message);
}
printa('hello world');
printa();
function deleteUsers() {
var id = [];
for (var _i = 0; _i < arguments.length; _i++) {
id[_i] = arguments[_i];
}
if (id && id.length) {
id.forEach(function (_id) { return console.log('delete user id = ' + _id); });
}
}

  自己编写一个html,然后在console中自己慢慢体会

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learning TypeScript</title>
</head>
<body>
<script src="hello.js"></script>

</body>
</html>

TypeScript基础学习的更多相关文章

  1. salesforce 零基础学习(五十二)Trigger使用篇(二)

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

  2. 如何从零基础学习VR

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...

  3. IOS基础学习-2: UIButton

    IOS基础学习-2: UIButton   UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...

  4. HTML5零基础学习Web前端需要知道哪些?

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  5. python入门到精通[三]:基础学习(2)

    摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...

  6. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  7. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  8. Yaf零基础学习总结5-Yaf类的自动加载

    Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...

  9. Yaf零基础学习总结4-Yaf的配置文件

    在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...

随机推荐

  1. python中安装requests后又提示错误

    刚刚我们是安装成功了的,新建一个项目又提示红色的波浪线了,,郁闷了 解决方法:点击pycharm菜单:File-Settings,键入Project Interpreter,我电脑python安装路径 ...

  2. [LeetCode] 721. Accounts Merge_Medium tag: DFS recursive

    Given a list accounts, each element accounts[i] is a list of strings, where the first element accoun ...

  3. FM/FFM原理

    转自https://tech.meituan.com/deep-understanding-of-ffm-principles-and-practices.html 深入FFM原理与实践 del2z, ...

  4. TFS修改映射路径办法

    如果你之前配置好了TFS项目的映射路径.然后每次下载项目都会在你配置的路径,但我们可以修改 方法一:我们可以在 "工作区" 中修改路径

  5. ambari集成impala

    1.查看hdp版本,可在ambari-agent节点上查看 VERSION=`hdp-select status hadoop-client | sed 's/hadoop-client - \([0 ...

  6. ios 透过上层视图点击相应下方视图的点击事件

    - (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event{ UIView *hitView = [super hitTest:point ...

  7. [转] Oracle学习之创建数据库(新建实例)

    由于项目需求,在本机中开发,需要新建oracle数据库实例,亲测可以. 出处:http://blog.csdn.NET/luiseradl/article/details/6972217 http:/ ...

  8. Python学习笔记之@classmethod与@staticmethod

    Python面向对象编程中,类中定义的方法可以是 @classmethod 装饰的 类方法 ,也可以是 @staticmethod 装饰的 静态方法 ,用的最多的还是不带装饰器的 实例方法 ,如果把这 ...

  9. UVA12995 Farey Sequence

    UVA12995 Farey Sequence 欧拉函数 同仪仗队那题几乎相同,本质都是求欧拉函数的和 #include<cstdio> #define N 1000000 ],i,j,t ...

  10. 20145312《网络对抗》MSF基础

    20145312<网络对抗>MSF基础 实验要求 1.掌握metasploit的基本应用方式 2.掌握常用的三种攻击方式的思路 实验问答 用自己的话解释什么是exploit.payload ...