TypeScript學習筆記

来源:http://www.cnblogs.com/CComma/archive/2017/10/22/7700494.html
-Advertisement-
Play Games

一、介紹 TypeScript是JavaScript的超集，擴展了JavaScript的語法，也意味著他支持所有的 JavaScript 語法 它支持ES6規範 強大的IDE支持 是Angular2的開發語言 二、搭建TypeScript開發環境 compiler（編譯器） 作用：能將TypeScr ...


一、介紹

TypeScript是JavaScript的超集，擴展了JavaScript的語法，也意味著他支持所有的 JavaScript 語法

它支持ES6規範

強大的IDE支持

是Angular2的開發語言

 

二、搭建TypeScript開發環境

compiler（編譯器）

作用：能將TypeScript編譯成JavaScript。

1.安裝Node.js

2.用npm包管理工具下載TypeScript包併在全局環境下安裝

打開cmd視窗輸入

npm install -g typescript

3.使用WebStorm自動編譯

Settings -> Languaes & Frameworks -> TypeScript 中Enable TypeScript Compiler打鉤。

 

三、字元串新特性

1.用"`"符號實現多行字元串（鍵盤上1旁邊的那個鍵 ）

 

2.字元串模板

TypeScript：

var myname = "zzz";

var getName = function () {
    return "zzz";
}

console.log(`hello ${myname}`)
console.log(`hello ${getName()}`)

 

 JavaScript：

var myname = "zzz";
var getName = function () {
    return "zzz";
};
console.log("hello " + myname);
console.log("hello " + getName());

相比雙引號更加直觀，在編寫html代碼時非常非常好用！

 

3.自動拆分字元串

當你用字元串模版去調用一個方法的時候，字元串模版中的表達式的值會自動賦給被調用方法的參數。

 TypeScript：

var nameStr = "zzz";
var age = 18;
function add(temp, name, age){
    console.log(temp);
    console.log(name);
    console.log(age);
}
add`my name is ${nameStr}, i'm ${age}`;

 

JavaScript：

var nameStr = "zzz";
var age = 18;
function add(temp, name, age) {
    console.log(temp);
    console.log(name);
    console.log(age);
}
(_a = ["my name is ", ", i'm ", ""], _a.raw = ["my name is ", ", i'm ", ""], add(_a, nameStr, age));
var _a;

 

四、參數新特性

1.參數類型：在參數名稱後面使用冒號來指定參數的類型。（與ActionScript類似）

基本變數類型與js一致

var myname: string = "zzz";

var alias: any = "haha";

var man: boolean = true;

function test(name: string):string {
    return "";
}

class Person{
    name:string;
    age:number;
}

var zhangsan:Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

 

2.預設參數

方法中的參數可以添加預設值，與其他強語言一樣，不多說了。

 

3.可選參數

方法中的參數可以表現為可選（如下b參數，"xxx"會傳給a）

必須聲明在必選參數的後面

function test(a: string, b?: string, c: string = ""){
    console.log(a);
    console.log(b);
    console.log(c);
}
test("xxx");

 

五、函數新特性

1. Rest and Spread

...：用來聲明任意數量的方法參數，與強類型語言的語法相似

TypeScript：

function func1(...args){
    args.forEach(function (arg){
        console.log(arg);
    })
}

func1(1, 2, 3);

func1(5, 5, 5, 5, 5, 5);

 

JavaScript：

function func1() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (arg) {
        console.log(arg);
    });
}
func1(1, 2, 3);
func1(5, 5, 5, 5, 5, 5);

 

2.generator函數

控制函數的執行過程，手工暫停和恢復代碼執行。

function*：創建generator函數

yield：設置斷點

執行函數後賦值於某一變數，並使用next()方法使此次調用在下一個yield處暫停。

function* doSomething(){
    console.log("start");
    
    yield;
    
    console.log("finish");
}

var fun1 = doSomething();

fun1.next();

 

3.析構表達式

3.1 針對對象

作用：自動將對象中的欄位逐個拆分。

使用：var {對象中欄位名:別名，對象中欄位名:別名...} = 對象。

根據“{}”中的名字（或別名）新建對應變數，並把相應對象中的相應欄位值賦予該變數。

 

TypeScript：

function getStock(){
    return{
        code:"IBM",
        price:{
            price1: 200,
            price2: 400
        }
    }
}

var {code: a, price, price: {price1, price2}} = getStock();

console.log(a);
console.log(price);
console.log(price1);
console.log(price2);

 

等同於

JavaScript：

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 200,
            price2: 400
        }
    };
}
var _a = getStock(), a = _a.code, price = _a.price, _b = _a.price, price1 = _b.price1, price2 = _b.price2;
console.log(a);
console.log(price);
console.log(price1);
console.log(price2);

 

3.2 針對數組

作用：自動將數組中的欄位逐個拆分。

使用：var {別名，別名...} = 數組。

根據“[]”中的別名新建對應變數，並把數組中對應位置的值賦予該變數。

 

TypeScript：

var array1 = [1, 2, 3, 4];

var [num1, num2] = array1;

var [,,num3, num4] = array1;
var [num, ...others] = array1;

consolo.log(num);//1
console.log(num1);//1
console.log(num2);//2
console.log(num3);//3
console.log(num4);//4
console.log(others);//[2, 3, 4]

 

JavaScript：

var array1 = [1, 2, 3, 4];
var num1 = array1[0], num2 = array1[1];
var num3 = array1[2], num4 = array1[3];
var num = array1[0], others = array1.slice(1);
console.log(num); //1
console.log(num1); //1
console.log(num2); //2
console.log(num3); //3
console.log(num4); //4
console.log(others);

 

六、表達式和迴圈

1. 箭頭函數（Lambda表達式）

定義：用來聲明匿名函數，消除傳統匿名函數的this指針問題。

PS：跟Java和C#中的Lambda表達式大致相同。

作用：匿名函數的一種聲明方式。

 

TypeScript：

var sum = (arg1, arg2) => arg1 + arg2;
var sum1 = arg1 =>{
    return arg1 + 10;
}

 

JavaScript：

var sum = function (arg1, arg2) { return arg1 + arg2; };
var sum1 = function (arg1) {
    return arg1 + 10;
};

 

2. forEach、for in、for of

forEach：不會遍曆數組中的欄位（js中數組可以有屬性欄位）、迴圈中不可break。

for in：會遍曆數組中的欄位、迴圈遍歷的是集合中鍵值對的鍵（數組的下標為鍵，下標對應的值為值）。

for of：不會遍曆數組中的欄位。

 

TypeScript：

var myArray = [1, 2, 3, 4];
myArray.desc = "xxx";

myArray.forEach(value => console.log(value));//1 2 3 4

for(var n in myArray){//n為下標（集合中鍵值對的鍵）
    console.log(myArray[n]);
}//1 2 3 4 xxx

for(var n of myArray){//n為下標（集合中鍵值對的鍵）
    console.log(myArray[n]);
}//1 2 3 4

 

JavaScript：

var myArray = [1, 2, 3, 4];
myArray.desc = "xxx";
myArray.forEach(function (value) { return console.log(value); }); //1 2 3 4
for (var n in myArray) {
    console.log(myArray[n]);
} //1 2 3 4 xxx
for (var _i = 0, myArray_1 = myArray; _i < myArray_1.length; _i++) {
    var n = myArray_1[_i];
    console.log(myArray[n]);
} //1 2 3 4

 

七、面向對象特性

與Java大致相同

 

TypeScript：

class Person{
    sex;
    //構造函數
    constructor(public name:string){
    }

    eat(){
        console.log("im eating");
    }
}

var p1 = new Person("batman");
p1.sex = true;
p1.eat();

var p2 = new Person("superman");
p2.sex = true;
p2.eat();

 

JavaScript：

var Person = (function () {
    //構造函數
    function Person(name) {
        this.name = name;
    }
    Person.prototype.eat = function () {
        console.log("im eating");
    };
    return Person;
}());
var p1 = new Person("batman");
p1.sex = true;
p1.eat();
var p2 = new Person("superman");
p2.sex = true;
p2.eat();

 

模塊

定義：可以幫助開發者將戴安分割為可重用的單元。開發者可以自己決定將模塊中的哪些類、方法或變數暴露出去供外部使用，哪些資源只在模塊內使用。

 

模塊a：

 

模塊b：

引用模塊a，可以使用模塊a中用export聲明的類、方法和變數。

 


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

-Advertisement-
Play Games
更多相關文章
  • 【簡記】HTML + CSS 的一些要點（不定時更新）
    1.td占據多行 / 列時，其擠開的 td 不寫（但是包裹 td 的 tr 要寫） 2. display:td 的元素中的文本預設垂直不居中（table中的td中的文本是垂直居中的） 3.th雖然定義了表頭標題，但是預設不跨行（需要跨行要用colspan） 4.text-indent可以繼承 5.< ...
  • 在JavaScript中同步與非同步
    在JavaScript中，一個線程執行的時候不依靠其他線程處理完畢我們稱為非同步，相反一個線程必須等待直到另一個線程處理完畢我們則稱為同步。打個比方： （1）同步就是你在煮速食麵的時候必須等水開了，你才會放調料和速食麵； （2）非同步就是你在煮速食麵的時候不需要等水開了，你可以剛開始開火的時候，就放調料 ...
  • html5的新通訊技術socket.io，實現一個聊天室
    後臺node ...
  • 閉包和類
    閉包 先上 "維基百科" )的定義 在電腦科學中，閉包（英語：Closure），又稱詞法閉包（Lexical Closure）或函數閉包（function closures），是引用了自由變數的函數。這個被引用的自由變數將和這個函數一同存在，即使已經離開了創造它的環境也不例外。所以，有另一種說法認 ...
  • Ionic2 + cordova + angular2 打包Android APP環境搭建
    一、前言 前段時間，公司有個APP項目需要支持不同平臺，於是採用了Ionic2 + cordova + angular2，在搭建環境過程中遇到了不少問題，剛好最近有時間整理出來。 二、開發環境搭建 參考這個網站步驟搭建：https://github.com/DonaldTdz/Ionic2Quick ...
  • 【WebGL】《WebGL編程指南》讀書筆記——第四章
    一、前言 今天繼續第四章的學習內容，開始學習複合變換的知識。 二、正文 Example1: 複合變換 在書中，作者為我們封裝了一套用於變換的矩陣對象：Matrix4對象。它包含以下幾種方法： Example2: 動畫 requestAnimationFrame(func): 請求瀏覽器在將來某時刻回 ...
  • 【簡抄】h5 新增的幾個背景屬性和文本屬性
    一、背景圖像顯示： ①background-size：規定背景圖像的大小； 值：像素值、百分比、auto、cover、contain ②background-origin ：規定背景圖像的起始位置； 值：padding-box(預設)、content-box、border-box ③backgrou ...
  • 今天是我第一次來到博客園，好緊張！
    首先，介紹一下自己吧。 我是個普普通通的大一學弟，喜歡WEB前端、手繪、音樂和跆拳道； 曾經有一段灰濛蒙的日子，但是不想再提了； 命運如此，我來到了河北科技大學； 我本身是一個少言寡語的人，所以也沒太多朋友； 喜歡一個人在下雨天喝著咖啡，看窗外過往人流； 希望遇到一個拼搏的團隊，希望有個熱心的老師， ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類