TypeScript 基本语法

最新推荐文章于 2024-05-10 00:15:00 发布
最新推荐文章于 2024-05-10 00:15:00 发布
阅读量392 收藏 1
点赞数
分类专栏： Lua/js/ts

原文地址：http://www.cnblogs.com/xcong/p/4570235.html

如果原文还在，推荐看原文，排版美


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;
        }
    }
}

不能合并

  • 类与类不能合并
  • 接口与类不能合并
  • 变量与类不能合并

胡老哈
关注
专栏目录
Angular概念和TypeScript基础语法
weixin_41105030的博客
04-25 1373
什么是Angular Angular是构建用户界面的JavaScript框架；由 Google 开发和维护，主要被用来开发单页面应用程序。它的创新之处在于，通过数据绑定和依赖注入减少了大量代码，而这些都在浏览器端通过JavaScript实现，能够和任何服务器端技术完美结合。 Angular的出众之处 构建一个CRUD应用时可能用到的所有技术：数据绑定、基本模板指令、表单验证、路由、深度链接、...
TypeScript+基础语法+架构+案例等全套教程
07-29
TypeScript基础语法.pdf TypeScript进阶：接口与类型.pdf TypeScript与面向对象编程.pdf TypeScript中的泛型.pdf TypeScript与Node.js.pdf TypeScript与前端框架React.pdf TypeScript与前端框架Angular.pdf ...
Typescript语法
thewar196的博客
02-09 1585
Typescript、Typescript语法
TypeScript学习——语法篇
weixin_42936434的博客
08-31 978
TS数字类型有字符串、布尔值、数字等，通过这些基础类型可以组合出复杂的类型组合，并且可通过type和interface关键字定义复杂对象类型和函数的类型。
TypeScript基本语法
Linceo的博客
04-19 6237
TypeScript 是 JavaScript 的一个超集 安装TypeScript ：npm install -g typescript 查看TypeScript版本： tsc -v 将ts文件转换为js文件：tsc test.ts 运行js文件：node test.js 1、TypeScript基础类型 任意类型 any ：声明为 any 的变量可以赋予任意类型的值 数...
TypeScript的基本语法
weixin_42229783的博客
02-17 527
1. TypeScript是什么 TypeScript是微软开发的一种强类型语言，它不允许改变变量的数据类型，除非进行强制的类型转换，它是JavaScrip的一个超集，它遵循最新的ES6脚本语言规范，TypeScript扩展了JavaScript的语法，任何已经存在的JavaScipt程序都可以在不经任何改动的情况下在TypeScript环境运行 2. 基本数据类型的使用 boolean let isBoolean: boolean = false string let str1: stri
TypeScript 常用语法
一个懒惰前端的博客
10-20 729
TypeScript 常用语法
TypeScript：TypeScript基础语法.docx
最新发布
08-28
TypeScript：TypeScript基础语法.docx
TypeScript基础语法
07-08
下面是 TypeScript 的一些基础语法： 1. 变量声明和类型注解: ```typescript let num: number = 10; let name: string = "John"; let isTrue: boolean = true; ``` 2. 函数定义和类型注解: ```typescript ...
typescript基本语法
03-30
TypeScript是JavaScript的超集，包含了所有JavaScript的语法，同时还提供了一些额外的语法和特性。 1. 变量声明 TypeScript提供了多种变量声明的方式： - var 可以使用var关键字声明变量，作用域为当前函数。 -...
typescript的基本语法
Dipper_Dubhe的博客
03-31 1439
typescript typescript 是js的超集，静态类型检测 命令： //监听ts文件的变化 $ tsc -p tsconfig.json --watch 原始类型 为了使文件里的变量不污染全局 //在第一行增加 export {}; string let str:string = "2" //string number let num:number = 1 //number boolean let bool:boolean = true //boolean null let nul:
Typescript基本语法介绍
叶子yes的博客
09-20 1504
Typescript是Javascript超集，是JavaScript+强类型。javascript 是弱类型语言，无法进行类型校验；而Typescript解决了这个问题，它可以对类型进行校验。跨平台：TypeScript 编译器可以安装在任何操作系统上，包括 Windows、macOS 和 Linux。ES6 特性：TypeScript 包含 ECMAScript 2015 (ES6) 的大部分特性，例如箭头函数。面向对象的语言：TypeScript 提供所有标准的 OOP 功能，如类、接口和模块。
「TypeScript系列」TypeScript简介及基础语法
日常笔记/总结/系列知识梳理
05-10 2960
TypeScript 是 JavaScript 的一个超集，添加了静态类型系统和其他特性，如接口、枚举、泛型等。这些特性有助于在开发过程中捕获错误，并使代码更易于维护和理解。TypeScript 编译成纯 JavaScript，因此可以在任何支持 JavaScript 的环境中运行。TypeScript 的一些主要特点静态类型：TypeScript 提供了静态类型系统，允许你为变量、函数参数和函数返回值指定类型。这有助于在编译时捕获类型错误，减少运行时错误。接口。
前端学习笔记003：JavaScript 6 + 用户脚本
Copcin的小站
09-17 2276
JavaScript，是一门前端编程语言。它是一个网页的大脑，控制着网页的行为。废话不多说，下文我们就来学习 JavaScript~ 最初的前端，就是简简单单的 HTML + CSS，没有过多的功能，没有绚丽的动画。但是我们需要这些功能，怎么办呢？1995 年，当时如日中天的 Netscape Navigator（网景领航员，现在已经消失，继任者是开放的 Firefox）浏览器提出要创建一门新的脚本语言，来控制网页的行为。
自学TS（三）
m0_37328953的博客
04-11 676
采用函数表达式|接口定义函数的方式时，对等号左侧进行类型限制，可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。
深入理解TypeScript：export interface与export type的区别与应用
andy_68147772的博客
12-08 4750
都非常有用，它们可以互相替换使用。可以用来声明一个类型别名，它可以是任何有效的类型，包括基本类型、联合类型、交叉类型等。都可以用来导出类型，但它们在某些方面有所不同。如果你需要声明联合类型、交叉类型、元组类型或其他复杂的类型组合，那么。可以被扩展和实现，这使得它们非常适合定义对象的形状或类的公共接口。如果你需要使用继承或实现，或者你想要利用声明合并的特性，那么。是一个可以用来描述对象形状的结构，它支持继承和实现。，TypeScript会将它们合并为一个接口。可以通过交叉类型来组合，但不能被扩展或实现。
简单的TS入门
qq_15351029的博客
11-09 2万+
TypeScript NoteVersion :  1.0、 TestVersion  :  ts2.4.2 Data         : 2017年8月27日 1、前置知识 l   理解ES5、ES6、javaScript、TypeScript的概念和关系 l   JavaScript开发经验 l   如果懂java学习来会事半功倍 2、TypeScript优势 u  支持ES
typescript(四)--ts中类、对象、静态方法、继承
热门推荐
jasnet_u的博客
07-21 2万+
如题，本篇介绍下ts中类 、对象 、静态方法 、继承、类中成员返回修饰符等。 ts中类继承类似于传统面向对象编程语言中的继承体系 ，使用extends关键字继承，类中this表示此当前对象本身，super表父类对象。子类构造函数中第一行代码调用父类构造函数完成初始化，然后再进行子类的进一步初始化。子类中可以访问父类(public、protected)的成员属性、方法。 02_class.ts ...
TypeScript 引入js库
晨光飞舞的专栏
11-29 1万+
TypeScript 引入js库 如果要使用现有的js文件的话，需要对编译器增加–allowJS参数。可以修改tsconfig.json中的compilerOptions，将其中的&quot;allowJs&quot;设为true，如： “allowJs”: true，没有该字段的话增加该字段即可。另外在tsconfig中的&quot;include&quot;字段中将js文件的路径添加进去。建议增加一个专门的文件夹，用来存放所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值