成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2863人閱讀

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

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

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

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

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

let 路人 = "打醬油的";

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

運(yùn)行

tsc 問好.ts

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

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

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

問好.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 學(xué)生 {
  全名: string;
  constructor(public 姓: string, public 名: string) {
    this.全名 = 姓 + 名;
  }
}

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

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

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

官方文檔說添加class之后編譯生成的js文件與沒有class的相同, 這里不解, 實(shí)驗(yàn)結(jié)果是不同的.
運(yùn)行第一個網(wǎng)絡(luò)應(yīng)用

為了檢驗(yàn)js文件, 添加HTML文件:



    TypeScript你好

最后一個插曲:

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

吃了么, 大黃

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

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代碼看起來更好理解一點(diǎn), 編譯期的反饋信息對于減少錯誤很有用.

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1157.html

相關(guān)文章

  • 前端相關(guān)匯總

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

    BenCHou 評論0 收藏0

  • 平時積累的前端資源，持續(xù)更新中。。。

    本文收集學(xué)習(xí)過程中使用到的資源。 持續(xù)更新中…… 項(xiàng)目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動端 微信公眾號 小程序 webpack GraphQL 性能與監(jiān)控 高質(zhì)文章 趨勢 動效 數(shù)據(jù)結(jié)構(gòu)與算法 js core 代碼規(guī)范...

    acrazing 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語言吧！

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

    caspar 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語言吧！

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

    nihao 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語言吧！

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

    Drummor 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<