TypeScript 基本語法

来源:https://www.cnblogs.com/guochunyang2004/archive/2018/03/24/8638100.html
-Advertisement-
Play Games

TypeScript 是微軟開發的 JavaScript 的超集，TypeScript相容JavaScript，可以載入JavaScript代碼然後運行。TypeScript與JavaScript相比進步的地方 包括：加入註釋，讓編譯器理解所支持的對象和函數，編譯器會移除註釋，不會增加開銷；增加一個 ...


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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 走近webpack（1）--多入口及devServer的使用
    上一篇文章留下了一些問題，如果你沒看過上一篇文章，可以在我的博客里查找，或者直接從這篇文章開始也是沒問題的。 這是上一篇文章中使用但是沒有詳細講解的代碼片段。現在我們來一一做一個瞭解。 entry：配置入口文件，也就是你想要打包的文件路徑。可以是單一的，也可以是多入口文件。下麵會詳細的講解。‘ ou ...
  • HTML學習
    1，HTML語言不區分大小寫 頁頭標簽： <title> </titile> 標題標簽： <hn> </hn> 可以使用屬性 align 例如align="right" hn中的n取值越大，顯示的字越小。 格式排版標簽： <br> 換行 <hr> 網頁水平線標簽 屬性：<hr align='"cen ...
  • vuejs基礎入門之環境搭建
    對於小白，對命令行工具使用得很少，而在學習vuejs框架時，命令行工具必不可少，因此，我對一些不懂安裝vuejs環境的小白寫如下教程： 1.vuejs是前端框架，環境藉助於nodo.js，因此，我們先要安裝node.js的環境。 2.百度{node.js}，下載最新版本的nodejs環境，安裝完畢打 ...
  • html Canvas 畫圖 能夠選擇並能移動
    canvas 畫圖，能夠選中所畫的圖片並且能夠隨意移動圖片 ...
  • W3C標準
    概念： W3C標準是一系列標準的集合，本質是結構標準語言，我們使用的html,css都要遵循這個標準。萬維網聯盟W3C創建於1994年，是Web技術領域最具權威和影響力的國際中立性技術標準機構。它有效促進了web技術相互之間的相容。 為什麼要遵守W3C標準呢?對於我們開發者來說，我們是介於瀏覽器製造 ...
  • Angular開發實踐（四）：組件之間的交互
    在Angular應用開發中，組件可以說是隨處可見的。本篇文章將介紹幾種常見的組件通訊場景，也就是讓兩個或多個組件之間交互的方法。根據數據的傳遞方向，分為父組件向子組件傳遞、子組件向父組件傳遞及通過服務傳遞三種交互方法。 ...
  • 淺談JavaScript、ES5、ES6
    什麼是JavaScript JavaScript一種動態類型、弱類型、基於原型的客戶端腳本語言，用來給HTML網頁增加動態功能。（好吧，概念什麼最討厭了） 動態： 在運行時確定數據類型。變數使用之前不需要類型聲明，通常變數的類型是被賦值的那個值的類型。 弱類： 計算時可以不同類型之間對使用者透明地隱 ...
  • typescript多維對象數組仿List泛型
    定義對象： 二維對象數組： 多維數組： 任意類型數組： 泛型類： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類