TypeScript(1) 介紹

前言

相信前端開發者對typescript不陌生，TypeScript是微軟所發展開源的程式語言，主要用來開發大型前端應用平台，由Anders Hejlsberg （C#, TurboPascal 之父）所負責發展TypeScript語言專案．

特性

我們根據Anders Hejlsberg的影片介紹大致得知TypeScript有幾種特性：

TypeScript是一種程式語言，讓Javascript發展有更好應用延伸
TypeScript是JavaScript的超集合，副檔名為.ts需要編譯成.js檔
- 表示JS函式庫也可以被TypeScript所使用
- TS語法也可以兼容JS語法
- *.ts需要編譯成.js檔，才可以瀏覽器使用
TypeScript是opensource
TypeScript遵循ECMAScript 版本標準，只要是能執行這些標準的 JavaScript
引擎都支援

環境建置

我主要是用visual studio code來開發TS專案，接下來會介紹如何安裝IDE、node.js和Typescript開發環境

(1)下載Visual Studio Code
如果不是MAC版本可以按other platforms 連結會有其他版本提供選擇(Mac, Windows,Linux(.deb, .rpm的作業系統)

(2) 下載Node.js

(3)安裝TypeScript套件
完成前兩項任務後，可以在Visual Studio Code下安裝TypeScript套件，用來開發
、編譯TS腳本．

    #> sudo npm install -g typescript

(4)編譯TS檔
以下是官方的範例，新增一個ts腳本為greeter.ts，內容如下，但是我們要使用需要把它轉成.js檔．

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Jack';
document.write(sayHello(user))

執行tsc指令來編譯greeter.ts檔，編譯完會產生hellow.js腳本

    > tsc greeter.ts

最後我們html將greeter.js載入，結果如下

<html>
    <body>
    </body>
    <script src="greeter.js"></script>
</html>

結果輸出：
Hello, Jack

安裝問題

Q：安裝npm套件時，出現npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules錯誤訊息
ANS：請在 npm install -g typescript加上sudo用root的權限執行安裝

參考

官方微軟介紹
TypeScript https://blogs.msdn.microsoft.com/ericsk/2012/10/01/typescript/
官方五分鐘上手
https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

留言

這個網誌中的熱門文章

GSON基礎教學

GSON 前言 JSON是很常見的資料交換格式，在JAVA領域常用處理JSON的函式庫:GSON、FastXML和JSON-B，本章節會以GSON為主，學習目標如下 JSON格式說明 GSON 套件函式 GSON: 物件轉換JSON字串 GSON: JSON字串轉換物件 JSON 格式說明 JSON全名為JavaScript Object Notation，它是一種輕量級的資料交換格式，會大為流行的理由，主要是他比傳統用xml更輕巧且容易處理， JSON表達方式物件會用大括弧{}，陣列則是用中括號[]。用JSON字串來表達Employee的物件內容，由JSON字串可以知道物件name、age、sex和salary屬性。 JSON表示員工資料方式: {“name”:”Jack Bryant”, “age”:18, “sex”:”M”,”salary”:3500.00} JSON陣列表示方式: 跟我們使用JAVA的陣列方式類似，內容值可以是數字’、文字、布林、陣列、物件、null等等。範例: 字串: [“紅”、”橙”、”黃”、”綠”、”青”、”藍”、”紫”} 布林: [true, true, false, false, true, true] GSON 套件函式 Gson為google所發布的函式庫，主要將物件與json字串之間的轉換時方便使用。當我們將JAVA物件轉換成JSON字串稱為序列化，JSON字串轉換至JAVA物件稱為反序列化。 GSON: 物件轉換JSON字串有了JSON基本概念後，我們進入本章重點，首先我們需要建立員工類別(Employee)，定義如下物件屬性員工類別 Employee name 名字 age 年紀 sex 性別 salary 薪水 /** * name:員工類別 */ public class Employee implements Serializable { //constructor public Employee(String name, double salary){ this.name = name; this.sala...

閱讀完整內容

PHP與Python搭配

今天介紹如何利用php網頁呼叫目錄下的python程式工作或是資料交換，本人整理的方法有兩種使用system()、exec()、shell_exec()呼叫程式 (1) string system ( string return_var ] ) 參考網址官網解釋system()用來執行外部命令，返回為印出的結果，passthru()跟system()類似但是它不會返回結果。範例1. 利用system執行ls指定並顯示在網頁上，無法使用變數保留ls的結果檔案名稱: psystem.php $jsondata= system("ls -al", $result); 結果: (2) exec() : string exec ( string output [, int &$return_var ]] ) 參考網址範例2. 利用exec執行python程式並可以回傳json格式給前端網頁做處理並顯示。我們ptopy.php就是可以看到callpy()為執行py的函式，它執行完pyEx01.py會將結果給$jsondata變數，做後面json解析。檔案名稱: ptopy.php function callpy() { $jsondata= exec("/usr/bin/python pyEx01.py"); return $jsondata ; } $jsondata= callpy(); echo $jsondata ; echo " " ; $obj = json_decode($jsondata) ; echo "name:".$obj-> { 'name'} .',' ; echo "id:".$obj-> { 'id'} ; 檔案名稱: pyEx01.py import sys ...

閱讀完整內容

Python AI-問題集

Python AI-問題集問題集 Jupyter Notebook執行ipywidgets會出現kernel死掉的錯誤發生(The kernel appears to have died) 解決方法 (1) 根據log檔來判斷問題：例如：log訊息出現OMP: Error #15: Initializing libiomp5.dylib, but found libiomp5.dylib already initialized. (2) 根據問題關鍵字找出問題所在：利用google查詢所遭遇到的問題，例如我把上面的問題上google查詢可以找到這篇的解法 https://blog.csdn.net/bingjianIT/article/details/86182096 (3)實作解法：我實作下面解法後，就可以順利執行手寫辨識的程式． //在Python宣告時加入 import os os.environ["KMP_DUPLICATE_LIB_OK"]="TRUE" 參考 https://blog.csdn.net/bingjianIT/article/details/86182096

閱讀完整內容

無聊看看

搜尋此網誌