TypeScript快速學習入門基礎語法
TypeScript是微軟開發(fā)的開源編程語言，在JavaScript的基礎上拓展了一些語法，是 JavaScript 的一個超集。TypeScript的基礎語法,包括變量聲明、復合類型（數(shù)組和對象）、條件控制（if-else和switch）、循環(huán)（for和while）、函數(shù)（基礎和箭頭函數(shù),以及可選參數(shù)）、面向?qū)ο筇匦裕杜e、接口、繼承）以及模塊開發(fā)中的導出和導入。
基礎語法
變量的聲明
TypeScript 在 JavaScript基礎上加入了靜態(tài)類型檢查功能，因此每一個變量都有固定的數(shù)據(jù)類型。
例如：let msg: string = 'hello world
let: 聲明變量的關(guān)鍵字，類似的 const代表常量
string：變量類型（拓展JavaScript的部分），其他常見類型如下：
number：整數(shù)、數(shù)值、浮點數(shù)、二進制等
boolean：布爾類型
any：不確定，可是任意類型（相當于跳過類型檢查）
union類型：例如let u: string|number|boolean = 'hello'可以是多個指定類型中的一種
object：對象
let p = {name:'jack', age: 21}
console.log(p.name)
console.log(p['name'])復合類型
數(shù)組
let names: Array<string> = ['a','b'] let age: number[] = [1,2] console.log(names[1])
條件控制if-else
let num:number = 21
if(num%2===0){ // 推薦使用三個等于號判斷
console.log("ou")
} else{
console.log("ji")
}TypeScript 中，空字符串、0、 null 、undefined等被解析為false ，它值則為 true
for&while循環(huán)
常規(guī)
for(let i=0;i<10;i++){
console.log(i)
}
let num=0
while(num<10){
console.log(num)
}遍歷數(shù)組
let names: Array<string> = ['a','b']
for(let i in names){
console.log(i+':' names[i]) // 這種方取出來的是下標
}
for(let n of names){
console.log(n) // 這種方取出來的是一個個的元素
}函數(shù)
基礎樣式
function sum(x: number, y: number): number {
return x+y
}
let result = sum(1,2)
console.log('1+2=' + result)箭頭函數(shù)
let sayHi = (name: string) =>{
console.log('hi' + name)
}
sayHi('Jack')可選參數(shù)
// 參數(shù)后加問號？，表示可選
function sayHi (name？: string) {
name = name ? name: '無名氏' //判斷，沒有傳入?yún)?shù)就賦值
console.log('hi' + name)
}
sayHi('Jack')
sayHi()
// 上述可賦默認值 類似python語法
function sayHi (name: string = 'Jack') //若不傳參 默認為Jack面向?qū)ο?/h2>
TypeScript 具備面向?qū)ο缶幊痰幕菊Z法，例如 interface 、 class 、 enum 等。也具備封裝、繼承、多態(tài)等面向?qū)ο蠡咎卣鳌?/p>
枚舉、接口
// 定義枚舉 不需要寫let和參數(shù)類型等
enum Msg{
HI = 'hi',
HELLO = 'hello'
}
// 定義接口
interface A{
say(msg: Msg):void
}
// 實現(xiàn)接口
class B implements A{
say(msg:Msg):void{
console.log(msg + "ni hao")
}
}
// 初始化對象 并調(diào)用方法
let a:A = new B()
a.say(Msg.HI)繼承
// 定義矩形類
class Rectangle{
// 定義成員變量 無需let
private width: number
private length: number
//構(gòu)造函數(shù) 無需function
constructor(width:number,length:number){
this.length=length
this.width=width
}
public area():number{
return this.width*this.length
}
}
// 定義正方形類，繼承于矩形類
class square extends Rectangle{
constructor(side: number){
super(side,side) //調(diào)用父類構(gòu)造函數(shù)
}
}
let s = new square(10)
console.log('正方形面積：'+ s.area())模塊開發(fā)
應用復雜時我們可以把通用功能抽取到單獨的 ts 文件，每個文件都是一個模塊 (module)模塊可以相互加載，提高代碼復用性。
導出
// 定義類，并通過export導出
export class Rectangle{
xxx
}
// 定義工具方法
export function area(rec:Rectangle) number{
xxx
}導入
// 通過import語法導入 from后寫地址
import {Rectangle, area} from '../rectangle'
// 使用導入的類創(chuàng)建對象
let r = new Rectangle(10,20)
// 調(diào)用導入的方法
console.log(area(r))到此這篇關(guān)于TypeScript快速學習入門基礎語法的文章就介紹到這了,更多相關(guān)TypeScript入門基礎語法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了TypeScript交叉運算的算法示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Spartacus中navigation?item?reducer實現(xiàn)解析
這篇文章主要為大家介紹了Spartacus中navigation?item?reducer實現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
TypeScript防抖節(jié)流函數(shù)示例詳解
這篇文章主要為大家介紹了TypeScript防抖節(jié)流函數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析
這篇文章主要介紹了Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-08-08
靜態(tài)類型的typescript與傳統(tǒng)動態(tài)弱類型語言javascript不同，在執(zhí)行前會先編譯成javascript，因為它強大的type類型系統(tǒng)加持，能讓我們在編寫代碼時增加更多嚴謹?shù)南拗啤Ｗ⒁?，它并不是一門全新的語言，所以并沒有增加額外的學習成本2022-12-12
TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了Three.js引入Cannon.js及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Typescript是必須要學習嗎？如何學習TS全棧開發(fā)
Typescript目前在前端，網(wǎng)站，小程序中的位置基本無可替代，同時也可以構(gòu)建完美的CLI應用。在移動，桌面，后端方面，性能不是要求很高的情況下完全可以勝任，并且在區(qū)塊鏈，嵌入式，人工智能方面也開始茁壯成長。2022-12-12
這篇文章主要為大家介紹了TypeScript條件類型示例的全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
詳解什么是TypeScript里的Constructor?signature
這篇文章主要介紹了什么是TypeScript里的Constructor?signature詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07