中文代码示例之5分钟入门TypeScript
生活随笔
收集整理的這篇文章主要介紹了
中文代码示例之5分钟入门TypeScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
"中文編程"知乎專欄原文
Typescript官方文檔起的這個噱頭名字: TypeScript in 5 minutes, 雖然光看完文章就不止5分鐘...走完整個文檔流水賬如下(代碼編輯器用的是VS Code)
源碼在: program-in-chinese/typescript_in_5_min_zh
第一個TypeScript程序
運行
tsc 問好.ts編譯生成"問好.js"文件.
添加參數類型
如果'那誰'的類型不符, 比如是數組類型[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文件:
<!DOCTYPE html> <html><head><title>TypeScript你好</title></head><body><script src="問好.js"></script></body> </html>最后一個插曲:
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代碼看起來更好理解一點, 編譯期的反饋信息對于減少錯誤很有用.
轉載于:https://www.cnblogs.com/program-in-chinese/p/typescript-in-5-minutes-with-sample-code-in-Chinese.html
總結
以上是生活随笔為你收集整理的中文代码示例之5分钟入门TypeScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django中使用极验Geetest滑动
- 下一篇： 查询