亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2951人閱讀

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

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

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

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

function 問(wèn)好(那誰(shuí)) {
  return "吃了么, " + 那誰(shuí);
}

let 路人 = "打醬油的";

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

運(yùn)行

tsc 問(wèn)好.ts

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

function 問(wèn)好(那誰(shuí): string) {
   return "吃了么, " + 那誰(shuí);
}

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

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

添加接口

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

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

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

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

自己誤寫成了:

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

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

問(wèn)好.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 問(wèn)好(那誰(shuí): 人) {
  return "吃了么, " + 那誰(shuí).姓 + 那誰(shuí).名;
}

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

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

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



    TypeScript你好

最后一個(gè)插曲:

html文件在Chrome中打開(kāi)顯示正確:

吃了么, 大黃

但在火狐(Firefox)瀏覽器中打開(kāi)時(shí)報(bào)錯(cuò):

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1157.html

相關(guān)文章

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

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

    BenCHou 評(píng)論0 收藏0

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

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

    acrazing 評(píng)論0 收藏0

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

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

    caspar 評(píng)論0 收藏0

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

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

    nihao 評(píng)論0 收藏0

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

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

    Drummor 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<