摘要:前言最近在學習,發現的官方文檔中的分鐘上手輔導教程中會有許多新手可能很難理解的地方,所以記錄一下聲明一下我用的版本是以后版本可能有所不同什么是維基百科上說是一種由微軟開發的自由和開源的編程語言。
前言
最近在學習TypeScript,發現TypeScript的官方文檔中的5分鐘上手TypeScript輔導教程中會有許多新手可能很難理解的地方,所以記錄一下
聲明一下我用的版本是
npm install typescript@2.9.2 -g
以后版本可能有所不同
什么是TypeScript維基百科上說 “TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個嚴格超集,并添加了可選的靜態類型和基于類的面向對象編程。”
從名字上我們就可以看出 TypeScript 和 JavaScript 不同的地方就是type,因為 TypeScript 相較于 JavaScript 多了類型檢查這一功能,都知道 JavaScript 是一門動態類型、靜態作用域的語言,而 TypeScript 的更像變成了一門靜態類型的語言
如何運行TypeScript瀏覽器只能運行js、html、css語言,那ts要如何運行在瀏覽器上呢,我們要記住
瀏覽器可以運行js
瀏覽器不能運行ts
要把ts變成js才可以在瀏覽器上運行
tsc會把ts轉化成js
那tsc是什么,如何獲取呢,需要我們學會使用npm,然后安裝
npm install -g typescript
就可以得到tsc和ts-node這兩個命令了
構建第一個TypesScript文件在五分鐘上手TypeScript的文檔中,要求我們將以下代碼輸入到greeter.ts文件里
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
因為上面我們說過瀏覽器不能運行ts,而document.body.innerHTML又需要我們在瀏覽器上運行,所以我們需要先把ts文件轉化成js文件,這樣會比較麻煩,所以下面我都建議改成用console.log
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; console.log(greeter(user));
然后
ts-node greeter.ts
可以在終端中直接打出輸出結果
類型注解在上面的代碼中,我們還看不出ts和js的區別,下面對上面的代碼進行一個改變
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; console.log(greeter(user));
在參數后加個冒號然后加個類型,這樣就相當于給參數加上的了一層禁錮,當你輸入的參數并不是字符串類型的時候
function greeter(person: string) { return "Hello, " + person; } let user = 123; console.log(greeter(user));
進行編譯轉化成js的時候就會報錯,如下
greeter.ts(7,21): error TS2345: Argument of type "number" is not assignable to parameter of type "string".
這樣子你發現錯誤的時機就從運行到瀏覽器上階段提前到了編譯階段
另外值得一提的是如果,參數是undefined,那么類型檢查并不會報錯,例如
function greeter(person: string) { return "Hello, " + person; } let user = undefined; console.log(greeter(user));
運行之后會正確輸出
Hello, undefined接口
學過 java 或者 c# 的人可能會很熟悉這個,就是相當于規定了一個對象一定需要包含幾個屬性,例如官方文檔所給的例子,如果我們的對象不符合規則少寫一個屬性
interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = { firstName: "Jane"}; console.log(greeter(user));
就會報錯
greeter.ts(12,21): error TS2345: Argument of type "{ firstName: string; }" is not assignable to parameter of type "Person".
Property "lastName" is missing in type "{ firstName: string; }".
但如果我們多寫了屬性
interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = { firstName: "Jane", lastName: "User" , m:"ss"}; console.log(greeter(user));
它仍然是可以正常運行的
類TypeScript 的類的創建有點像 ES6 但是多了一個 public 的關鍵詞,熟悉 java 的同學可能會知道,但是在ts中這個public的具體是什么作用,在官方文檔給的例子中可以看出
class Student { fullName: string; constructor(public firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person : Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = new Student("Jane", "M.", "User"); console.log(greeter(user));
實際上就相當于
class Student { fullName: string; firstName: string; middleInitial: string; lastName: string; constructor(firstName, middleInitial, lastName) { this.firstName = firstName this.middleInitial = middleInitial this.lastName = lastName this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = new Student("Jane", "M.", "User"); console.log(greeter(user));后記
以上就是對5分鐘上手TypeScript的解讀,我也在繼續學習當中,ts相較與js更加嚴格,可以在js運行之前發現錯誤,代碼更不容易出現bug,看得出來是js從動態類型向靜態類型的一種轉變,但是上面我寫的時候也發現,undefined類型并沒有檢查出來,所以可能還在不停完善中,但是不得不承認TypeScript開發會更舒服
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99513.html
摘要:前言本文講解如何在項目中使用來搭建并開發項目,并在此過程中踩過的坑。具有類型系統,且是的超集,在年勢頭迅猛,可謂遍地開花。年將會更加普及,能夠熟練掌握,并使用開發過項目,將更加成為前端開發者的優勢。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項目中使用 TypeScript...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:的踩坑實踐無法格式化引言最近開發的前端項目隨著開發的人員越來越多,代碼規范已經是一個很難避免的問題了,雖然百度有這個規則檢查,但是不論是或者是項目本地都沒有配置或檢查,完全靠自覺,這是件非常扯淡的事。 vscode-eslint的踩坑實踐--typescript無法格式化 引言 最近開發的前端項目隨著開發的人員越來越多,代碼規范已經是一個很難避免的問題了,雖然百度有fecs這個規則檢查...
閱讀 3427·2021-09-26 09:46
閱讀 2782·2021-09-13 10:23
閱讀 3510·2021-09-07 10:24
閱讀 2388·2019-08-29 13:20
閱讀 2919·2019-08-28 17:57
閱讀 3072·2019-08-26 13:27
閱讀 1175·2019-08-26 12:09
閱讀 505·2019-08-26 10:27