typescript 入門教程一

来源:https://www.cnblogs.com/tangkaizhen/archive/2019/10/30/11762857.html
-Advertisement-
Play Games

從今天開始,持續更新typescript入門教程系列.... 目前ts越來越火,主流的前端框架,好比 angular,vue 3 均是採用ts來編寫,所有很多公司的項目都是用 ts 來寫的,所有是時候認真學習 ts 了 ts來源於微軟公司,越是大的公司,越是大的項目,越是推薦使用ts來編碼,ts是j ...


從今天開始,持續更新typescript入門教程系列....

目前ts越來越火,主流的前端框架,好比angular,vue 3均是採用ts來編寫,所有很多公司的項目都是用ts來寫的,所有是時候認真學習ts
ts來源於微軟公司,越是大的公司,越是大的項目,越是推薦使用ts來編碼,ts是js的超集,在js上面增加一些內容,相對於js,ts具有以下的優點:

  • 支持面向對象方法,之前js實現面向對象是通過prototype,function實現的,有點繁瑣。ts提供了Class,Interface
  • 類型檢查。ts能夠在編譯的階段就可以發現錯誤,減少bug率。在實際開發中,需要將ts編譯成js,而且目前瀏覽器支持的是es5版本
  • 自帶文檔特性。通過類型註解,很容易知道某一個參數或者變數是什麼類型
  • IDE或者是編輯工具支持良好(自動完成提示)

總的來說ts=js+type+(一些其他特性:枚舉,介面等)
使用ts之前,首先需要安裝node,安裝好node之後會自帶npm,npm是node包管理工具,其可以下載一些社區常用的包,我們通過npm來安裝ts編譯工具typescript , npm install typescript -g
編寫一個ts文件:index.ts,通過下麵命令行工作tsc index,.ts,就可以將index.ts編譯成index.js,最後在瀏覽器中運行(ts是沒法在瀏覽器中運行的,必須進行編譯)

var a:number
a=10
console.log(a)

上面就是定義了a的變數類型是number類型,如果這時候傳string類型賦值給a,編譯器就會保存
數據類型主要有:

  • number,string,boolean,Array

示例,定義數組有兩種方法:

let myArr1:string[]=["st1","st2"]
let myArr2:Array<string>=["st1","st2"]

也可以給函數參數添加類型限制,這時如果傳入的參數個數和類型和定義的形參不匹配,編譯時候就會報錯:

const add=(a:number,b:number)=>{
    return a+b
}
console.log(add(2,4))

也可以為函數返回值添加類型

const add=(a:number,b:number):number=>{
    return a+b
}

也可以給函數加上預設的參數,如果函數的返回值是空,可以設置返回值類型是void

const add=(a:number=8,b:number=10):void=>{
    console.log(a+b)
}

也可以設置可選參數,如下:這時候b可以傳可以不傳

const add=(a:number=8,b?:number):void=>{ 
    console.log(a+b)
}

如果需要將一個變數設置為任何類型。可以使用any,但是儘量少用any

let a:any;
a=10;
a="str"
a=[1,2,3]

如果需要設置一個變數為兩種或者更多類型,可以使用聯合類型的方式,|

let a:number | string

很多語言具有面向對象的屬性,包括ts,面向對象三大屬性:封裝,繼承,多態了,可以將現實生活中的一切內容看成類或者對象一個Class,通過new()得到一個對象,一個對象有屬性和方法(方法就是對屬性進行操作)

class Person{
    // 構造方法
    constructor(fn:string,ln:string){
        this.firstName=fn
        this.lastName=ln
    }
    firstName:string;
    lastName:string;
 }

通過extends關鍵字,可以讓一個類繼承已有類的屬性和方法:

class Person{
    firstName:string
    lastName:string
 }
 class Programmer extends Person{
 }
 let p=new Programmer()
 p.firstName='jack'
 p.lastName='chen'
 console.log(p)

子類如果調用某個方法,如果在子類中已有該方法,則直接調用該方法,如果沒有,則去調用父類的方法,如果強制調用父類的方法,可以把this換成super
類成員的可見性主要有public,private,protected
public:在類中和類的外面均是可以調用,預設就是public
private:只能在類中調用,子類和類外面是不能調用的,如果要調用私有的屬性或者方法,可以通過公有的方法來訪問,對外暴露公有的方法,子類也是可以繼承父類的私有的方法和屬性,但是必須通過父類暴露的公有方法進行訪問
protected:只能在類中或者是子類中調用 ,即使子類和父類生成的對象也是不能訪問
總的來說許可權範圍:public>protected>private
未完待續。。。


*如果覺得本文有收穫,請我喝杯咖啡吧,你們的支持是我最大的動力*

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在說虛擬DOM之前,先來一個引子,從輸入url到展現出整個頁面都有哪些過程? 1、輸入網址 2、DNS解析 3、建立tcp連接 4、客戶端發送HTPP請求 5、伺服器處理請求 6、伺服器響應請求 7、瀏覽器展示HTML 8、瀏覽器發送請求獲取其他在HTML中的資源。 其中瀏覽器展示HTML經過了:構 ...
  • 對象(object)是 JavaScript 最重要的數據結構。ES6 對它進行了重大升級,本章介紹數據結構本身的改變及語法應用細節。 ...
  • “JSX” JSX就是Javascript和XML結合的一種格式。是一個 JavaScript 的語法擴展。 React發明瞭JSX,利用HTML語法來創建虛擬DOM。當遇到<,JSX就當HTML解析,遇到{就當JavaScript解析。 JSX,是一個 JavaScript 的語法擴展。JSX 可 ...
  • vue,element列表大數據卡頓問題,vue列表渲染慢,element表格渲染慢,表格渲染慢(卡),表格全選卡 ...
  • 結論 3XX開頭的HTTP狀態碼都表示重定向的響應。 301、308是永久重定向;302、303、307是臨時重定向。 301、302是http 1.0的內容,303、307、308是http1.1的內容。 301和302本來在規範中是不允許重定向時改變請求method的(將POST改為GET),實 ...
  • 1. Safari 3D變換會忽略z index的層級 在Safari瀏覽器下(此Safari瀏覽器包括iOS的Safari,iPhone上的微信瀏覽器,以及Mac OS X系統的Safari瀏覽器),當我們使用3D transform變換的時候,如果祖先元素沒有overflow:hidden/sc ...
  • Link: "原文鏈接" 譯文開始: 對網站進行性能優化對一個最容易的方法就是把JS和CSS進行打包壓縮。但是當你需要調試這些壓縮文件中的代碼的時候,會發生什麼?可能會是一場噩夢。但是,不用害怕,即將有一個解決方案到來,它就是Source Maps。 source maps提供一種將壓縮文件中的代碼 ...
  • 元素拖拽 作者:一粒塵土 時間:2019 10 30 使用範圍:兩個元素位置交換,移動元素到指定位置 涉及函數 |屬性|解釋 |: |: | |draggable|是否允許元素進行拖拽| |dragstart|拖拽開始觸發的函數,可在此獲取元素| |dragover|在目標元素內進行拖動時觸發的函數 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...