中文代碼示例之5分鐘入門TypeScript

番茄西紅柿發布于2019-04-23 11:47 / 2849人閱讀

摘要：中文編程知乎專欄原文官方文檔起的這個噱頭名字雖然光看完文章就不止分鐘走完整個文檔流水賬如下代碼編輯器用的是源碼在第一個程序問好那誰吃了么那誰路人打醬油的問好路人運行問好編譯生成問好文件添加參數類型問好那誰吃了么那誰如果那誰的類型不符比如

"中文編程"知乎專欄原文

Typescript官方文檔起的這個噱頭名字: TypeScript in 5 minutes, 雖然光看完文章就不止5分鐘...走完整個文檔流水賬如下(代碼編輯器用的是VS Code)

源碼在: program-in-chinese/typescript_in_5_min_zh
第一個TypeScript程序

function 問好(那誰) {
  return "吃了么, " + 那誰;
}

let 路人 = "打醬油的";

document.body.innerHTML = 問好(路人);

運行

tsc 問好.ts

編譯生成"問好.js"文件.
添加參數類型

function 問好(那誰: string) {
   return "吃了么, " + 那誰;
}

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

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

添加接口

interface 人 {
  姓: string;
  名: string;
}

function 問好(那誰: 人) {
  return "吃了么, " + 那誰.姓 + 那誰.名;
}

let 路人 = {姓: "大", 名: "黃"};

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

自己誤寫成了:

function 問好(那誰: 人) {
  return "吃了么, " + 人.姓 + 人.名;
}

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

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

添加類

class 學生 {
  全名: string;
  constructor(public 姓: string, public 名: string) {
    this.全名 = 姓 + 名;
  }
}

interface 人 {
  姓: string;
  名: string;
}

function 問好(那誰: 人) {
  return "吃了么, " + 那誰.姓 + 那誰.名;
}

let 路人 = new 學生("大", "黃");

官方文檔說添加class之后編譯生成的js文件與沒有class的相同, 這里不解, 實驗結果是不同的.
運行第一個網絡應用

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



    TypeScript你好

最后一個插曲:

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

吃了么, 大黃

但在火狐(Firefox)瀏覽器中打開時報錯:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
%E9%97%AE%E5%A5%BD.html

將View->TextEncoding從Western改為Unicode后顯示正確.

后感:

tsc編譯好慢!

TypeScript代碼看起來更好理解一點, 編譯期的反饋信息對于減少錯誤很有用.

云服務器 GPU云服務器三分鐘入門每隔5分鐘 5分鐘打造webrtc 每天5分鐘玩轉kubernetes

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1157.html

前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0
平時積累的前端資源，持續更新中。。。

本文收集學習過程中使用到的資源。持續更新中…… 項目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動端微信公眾號小程序 webpack GraphQL 性能與監控高質文章趨勢動效數據結構與算法 js core 代碼規范...

acrazing 2019-08-26 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

caspar 2019-08-15 13:33 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

nihao 2019-08-21 18:39 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

摘要：入門，第一個這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數式編程語言，它的代碼運行在之上。它通過編輯類工具，帶來了先進的編輯體驗，增強了語言服務。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經到來了，總結過去的 2017，相信小伙們一定有很多收獲...

Drummor 2019-06-28 14:38 評論0 收藏0