5分鐘入門CTS-嘗鮮中文版TypeScript

05-27

來自專欄中文編程

本文為中文代碼示例之5分鐘入門TypeScript的CTS版本. CTS作者是@htwx(github). 它實現了TypeScript關鍵詞和標準庫的所有命名漢化.

本文並未使用附帶的vscode相關插件(包括CTS語言插件和拼音輸入插件等). 與原Typescript教程類似, 只按照項目首頁安裝cts後在命令行進行編譯.

示例仍舊源於Typescript官方文檔: TypeScript in 5 minutes.

源碼在: program-in-chinese/cts_in_5_min

第一個CTS程序

函數問好(那誰) { 返回 "吃了么, " + 那誰;}變數路人 = "打醬油的";文檔.體.內部HTML = 問好(路人);

運行

cts 問好.ts --useUnicodeKeywords

編譯生成"問好.js"文件.

添加參數類型

函數問好(那誰: 文字) { 返回 "吃了么, " + 那誰;}

如果那誰的類型不符, 比如是數組類型[0,1,2], 編譯時會報錯, 挺好:

問好.ts(7,30): error TS2345: Argument of type number[] is not assignable to parameter of type string.

添加介面

介面人 { 姓: 文字; 名: 文字;}函數問好(那誰: 人) { 返回 "吃了么, " + 那誰.姓 + 那誰.名;}變數路人 = {姓: "大", 名: "黃"};

這裡路人的"形狀"符合"人", 類型就被判定為相符.

自己誤寫成了:

函數問好(那誰: 人) { 返回 "吃了么, " + 人.姓 + 人.名;}

編譯提示人是個類型而不是值, 挺好:

問好.ts(7,20): error TS2693: 人 only refers to a type, but is being used as a value here.

添加類

類別學生 { 全名: 文字; 構造(公開姓: 文字, 公開名: 文字) { 本體.全名 = 姓 + 名; }}介面人 { 姓: 文字; 名: 文字;}函數問好(那誰: 人) { 返回 "吃了么, " + 那誰.姓 + 那誰.名;}變數路人 = 新建學生("大", "黃");

運行第一個網路應用

為了檢驗js文件, 添加HTML文件:

<!DOCTYPE html><html> <head><title>TypeScript你好</title></head> <body> <script src="問好.js"></script> </body></html>

html文件在Chrome中打開顯示正確:

吃了么, 大黃