TypeScript 基本语法
TypeScript 基本语法
TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。
TypeScript 微软官方网站 http://www.typescriptlang.org/
TypeScript 源码 http://typescript.codeplex.com
1.基本数据类型
Boolean
//Boolean
var isDone:boolean = false;
Number
//Number
var width:number = 100;
String
//String
var name:string = "hello";
Array
//Array
var list:number[] = [1, 2, 3];
var list:Array<number>=[1, 2, 3];
Enum
//Enum
enum Color {Red, Green, Blue}
var c: Color = Color.Red;
alert(c);//默认下标从0开始,alert(0);
//可以手动指定下标
enum Color1 {Red = 1, Green, Blue}
var c1: Color1 = Color1.Green;
alert(c1);//alert(2)
//根据下标查找名称
enum Color2 {Red = 1, Green=2, Blue=4}
var c2: string = Color2[4];
alert(c2);//alert(Blue)
Any
//不确定类型,退出编译检查
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
//不确定数组元素类型
var anylist:any[] = [1, true, "free"];
anylist[1] = 100;
Void
//空白
function warnUser(): void {
alert(123);
}
2.类
基本语法
class Animal {
animalName:string;
constructor(name:string) {
this.animalName = name;
}
sayHello() {
alert(this.animalName + ": Hello");
}
}
var tom = new Animal("Tom");
tom.sayHello();//alert(Tom:Hello)
继承
class Animal {
animalName:string;
constructor(name:string) {
this.animalName = name;
}
sayHello() {
alert(this.animalName + ": Hello");
}
}
class Cat extends Animal {
//重写sayHello方法
sayHello() {
alert(this.animalName + "(Cat):" + "Hello");
}
}
class Mouse extends Animal {
sayHello() {
alert(this.animalName + "(Mouse):" + "Hello");
}
}
var tom:Animal = new Cat("Tom");
tom.sayHello();//alert(Tom(Cat):Hello)
var jerry:Animal = new Mouse("Jerry");
jerry.sayHello();//alert(Jerry(Mouse):Hello)
修饰符
当我们把animalName 改为private
class Animal {
private animalName:string;//默认是public
constructor(name:string) {
this.animalName = name;
}
//...
}
class Cat extends Animal {
//重写sayHello方法
sayHello() {
alert(this.animalName + "(Cat):" + "Hello");//Error 编译不通过
}
}
get,set 访问器
class Animal {
private _animalName:string;//默认是public
get animalName():string {
return this._animalName;
}
set animalName(name:string):string {
this._animalName = name;
}
//...
}
静态属性
//静态属性
class Table {
static width = 100;
static height = 200;
}
var width = Table.width;
alert(width);//alert(100)
3.接口
基本语法
interface ICar {
color:string;
}
class Bus implements ICar {
color:string;
constructor() {
this.color = "Blue";
}
}
var bus = new Bus();
alert(bus.color);
继承接口
//继承接口
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
可选属性
interface ICar {
color:string;
safetyDevice?:any;//实现类无需实现
}
function MoveCar(car:ICar){
if(car.safetyDevice)
{
alert("The car is safe");
}
else
{
alert("The car is not safe");
}
}
4.模块(Modules)
作用:1.防止命名空间冲突;2.将一个功能模块很容易的划分到不同文件中,更容易维护;
基本语法
module MyDemo {
export interface IDemo {
}
export class Demo implements IDemo {
}
}
别名
module Shapes {
export module Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
var sq = new polygons.Square(); // 类似于 'new Shapes.Polygons.Square()'
5.函数(Function)
基本语法
function add(x:number, y:number):number {
return x + y;
}
// or
var myAdd = function (x:number, y:number):number {
return x + y;
};
完整的函数类型
var myAdd:(x:number, y:number)=>number =
function (x:number, y:number):number {
return x + y;
};
为了增强可读性,给参数x、y具有实际的意义,可以这样写
var myAdd:(baseValue:number, increment:number)=>number =
function (x:number, y:number):number {
return x + y;
};
第二部分number 是一个返回类型,如果无需返回类型,请使用 'void'
第三部分的function 参数类型,根据上下文类型进行推断,可以省略
var myAdd:(baseValue:number, increment:number)=>number =
function (x, y) {
return x + y;
};
可选参数
//可选参数
function buildName(firstName:string, lastName?:string) {
if (lastName)
return firstName + " " + lastName;
else return firstName;
}
var result1 = buildName("Bob");
默认参数
//默认参数
function buildNameDefaultValue(firstName: string, lastName = "Smith") {
return firstName + " " + lastName;
}
var result1 = buildNameDefaultValue("Bob");
可变参数
例如在C#中,方法参数定义使用param int[],调用方法时,就可以传递多个int类型的参数
在TypeScript中
function buildNameRest(firstName:string, ...restOfName:string[]) {
return firstName + " " + restOfName.join(" ");
}
var employeeName = buildNameRest("Joseph", "Samuel", "Lucas", "MacKinzie")
Lambads 和this关键字
var people={
name:["张三","李四","王五","赵六"],
getName:function(){
return function(){
var i=Math.floor(Math.random()*4);
return {
n:this.name[i]
}
}
}
}
var pname=people.getName();
alert("名字:"+pname().n);
调用发现getName中的this关键字指向的是getName,访问不到外部的name属性
所以我们修改为:
var people = {
name: ["张三", "李四", "王五", "赵六"],
getName: function () {
return ()=> {
var i = Math.floor(Math.random() * 4);
return {
n: this.name[i]
}
}
}
}
var pname = people.getName();
alert("名字:" + pname().n);
重载
//重载
function student(name:string):string;
function student(age:number):number;
function student(numberorage:any):any {
if (numberorage && typeof (numberorage) == "string")
alert("姓名");
else
alert("年龄");
}
student("Tom");//alert("姓名")
student(15);//alert("年龄")
6.泛型
基本语法
function identity<T>(arg: T): T {
return arg;
}
//数组泛型
function identity<T>(arg: T[]): T[] {
console.log(arg.length);
}
泛型类型(通用的函数类型)
function identity<T>(arg:T):T {
return arg;
}
var myIdentity:<T>(arg:T)=>T = identity;//T也可使用其他字母表示
//也可以这么写
//var myIdentity:{<T>(arg:T): T} = identity;
接口泛型
interface GenericIdentityFn {
<T>(arg:T): T;
}
function identity<T>(arg:T):T {
return arg;
}
var myIdentity:GenericIdentityFn = identity;
泛型类
class GenericNumber<T> {
zeroValue:T;
add:(x:T, y:T) => T;
}
var myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
return x + y;
};
泛型约束
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg:T):T {
console.log(arg.length);
return arg;
}
loggingIdentity(3);//error
loggingIdentity({length: 10, value: 3}); //只要类型包含length属性即可
泛型类约束
class Findable<T>
{
//...
}
function find<T>(n: T, s: Findable<T>) {
// ...
}
7.合并
合并接口
interface Box {
height: number;
width: number;
}
interface Box {
scale: number;
}
var box: Box = {height: 5, width: 6, scale: 10};
合并模块
module Animals {
exportclass Zebra { }
}
module Animals {
exportinterface Legged { numberOfLegs: number; }
exportclass Dog { }
}
//相当于
module Animals {
exportinterface Legged { numberOfLegs: number; }
exportclass Zebra { }
exportclass Dog { }
}
合并模块和类
class Album {
label:Album.AlbumLabel;
}
module Album {
export class AlbumLabel {
}
}
合并模块和函数
function buildLabel(name:string):string {
return buildLabel.prefix + name + buildLabel.suffix;
}
module buildLabel {
export var suffix = "";
export var prefix = "Hello, ";
}
alert(buildLabel("Sam Smith"));
合并模块与枚举
enum Color {
red = 1,
green = 2,
blue = 4
}
module Color {
export function mixColor(colorName:string) {
if (colorName == "yellow") {
return Color.red + Color.green;
}
else if (colorName == "white") {
return Color.red + Color.green + Color.blue;
}
else if (colorName == "magenta") {
return Color.red + Color.blue;
}
else if (colorName == "cyan") {
return Color.green + Color.blue;
}
}
}
不能合并
- 类与类不能合并
- 接口与类不能合并
- 变量与类不能合并
转载请注明出处:http://www.cnblogs.com/xcong/p/4570235.html
文中代码引用自Ts官网和极客学院
TS文件下载 http://files.cnblogs.com/files/xcong/TsDemo.zip
TypeScript 基本语法的更多相关文章
- typescript基础语法--变量/函数/指令/类
博客地址 :https://www.cnblogs.com/sandraryan/ 要把ts文件引入到html中,首先要转码为js文件. 步骤: 终端运行: npm i -g typescript t ...
- typescript语法
先来讲一讲TypeScript出现的背景 前端javascript的编程思想与后端java面向对象的编程思想有很大的不同,微软公司借鉴了coffeescript语言,继承了很多C#和java的编程思想 ...
- 带你了解Typescript的14个基础语法
摘要:Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误. 本文分享自华为云社区<Typescript基 ...
- 基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结
随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS ...
- TypeScript之面向对象初体验
1.安装nodejs和vscode: nodejs : https://nodejs.org/en/ Visual Studio Code : https://www.visualstudio.co ...
- [Tool] 使用Visual Studio Code开发TypeScript
[Tool] 使用Visual Studio Code开发TypeScript 注意 依照本篇操作步骤实作,就可以在「Windows」.「OS X」操作系统上,使用Visual Studio Code ...
- [译] TypeScript入门指南(JavaScript的超集)
你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父 ...
- ASP.NET MVC(三) TypeScript
TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeScript与JavaScript相比 ...
- Typescript 团队合作的利器
前言 在介绍Typescript 之前,我需要隆重介绍一个人: 安德斯·海尔斯伯格(Anders Hejlsberg,1960.12~),丹麦人,Turbo Pascal编译器的主要作者,Delphi ...
随机推荐
- POJ 2485 Highways (prim最小生成树)
对于终于生成的最小生成树中最长边所连接的两点来说 不存在更短的边使得该两点以不论什么方式联通 对于本题来说 最小生成树中的最长边的边长就是使整个图联通的最长边的边长 由此可知仅仅要对给出城市所抽象出的 ...
- js多个物体运动问题2
问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...
- 如何js编译的文件dll对于网页电话
1. 加入一个项目的解决方案:JSControl 2. 在这个项目中加入js文件(JScript1.js) 脚本的内容: function showAlert(){ alert('Today is a ...
- Android - 分享内容 - 给其他APP发送内容
创建一个intent时,必须要指定intent将要触发的操作.Android定义了很多操作,包括ACTION_SEND,就象可以猜到的一样,表示intent是把数据从一个activity发送给另一个, ...
- ubuntu快捷键设置,查看系统
设置system setting于.点击键盘keyboard,有捷径keyboard shortcut.但也设置快捷键本身. 版权声明:本文博主原创文章,博客,未经同意不得转载.
- Java设计模式菜鸟系列(两)建模与观察者模式的实现
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/39755577 观察者(Observer)模式定义:在对象之间定义了一对多的依赖关系,这样一 ...
- hdu 5030 Rabbit's String(后缀数组&二分法)
Rabbit's String Time Limit: 40000/20000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- combobox自己主动提示组件加入无选中项清空功能
这个标题非常绕口,只是这也是想了半天的成果,对不起体育老师了. 标题想表达的是:之前讲过的用combobox实现自己主动提示组件.只是如今规定该组件不能够保存data中不存在的数据. 最初的想法是通过 ...
- 终端查询数据库sqlite(创建你自己,或者是coredata创建)那里的东西
首先需要知道数据库的路径,coredata一般都是在沙箱中创建Documents目录的.虽然他建立了自己看, sqlite3 #数据库路径# //进入数据库 .tables //查看数 ...
- Android Activity之间通信
package com.example.myapp; import android.app.Activity; import android.content.DialogInterface; impo ...