TypeScript快速學(xué)習(xí)入門基礎(chǔ)語法
TypeScript是微軟開發(fā)的開源編程語言,在JavaScript的基礎(chǔ)上拓展了一些語法,是 JavaScript 的一個超集。TypeScript的基礎(chǔ)語法,包括變量聲明、復(fù)合類型(數(shù)組和對象)、條件控制(if-else和switch)、循環(huán)(for和while)、函數(shù)(基礎(chǔ)和箭頭函數(shù),以及可選參數(shù))、面向?qū)ο筇匦裕杜e、接口、繼承)以及模塊開發(fā)中的導(dǎo)出和導(dǎo)入。
基礎(chǔ)語法
變量的聲明
TypeScript 在 JavaScript基礎(chǔ)上加入了靜態(tài)類型檢查功能,因此每一個變量都有固定的數(shù)據(jù)類型。
例如:let msg: string = 'hello world
let: 聲明變量的關(guān)鍵字,類似的 const代表常量
string:變量類型(拓展JavaScript的部分),其他常見類型如下:
number:整數(shù)、數(shù)值、浮點數(shù)、二進(jìn)制等
boolean:布爾類型
any:不確定,可是任意類型(相當(dāng)于跳過類型檢查)
union類型:例如let u: string|number|boolean = 'hello'可以是多個指定類型中的一種
object:對象
let p = {name:'jack', age: 21}
console.log(p.name)
console.log(p['name'])復(fù)合類型
數(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]) // 這種方取出來的是下標(biāo)
}
for(let n of names){
console.log(n) // 這種方取出來的是一個個的元素
}函數(shù)
基礎(chǔ)樣式
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()
// 上述可賦默認(rèn)值 類似python語法
function sayHi (name: string = 'Jack') //若不傳參 默認(rèn)為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ā)
應(yīng)用復(fù)雜時我們可以把通用功能抽取到單獨的 ts 文件,每個文件都是一個模塊 (module)模塊可以相互加載,提高代碼復(fù)用性。
導(dǎo)出
// 定義類,并通過export導(dǎo)出
export class Rectangle{
xxx
}
// 定義工具方法
export function area(rec:Rectangle) number{
xxx
}導(dǎo)入
// 通過import語法導(dǎo)入 from后寫地址
import {Rectangle, area} from '../rectangle'
// 使用導(dǎo)入的類創(chuàng)建對象
let r = new Rectangle(10,20)
// 調(diào)用導(dǎo)入的方法
console.log(area(r))到此這篇關(guān)于TypeScript快速學(xué)習(xí)入門基礎(chǔ)語法的文章就介紹到這了,更多相關(guān)TypeScript入門基礎(chǔ)語法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Spartacus中navigation?item?reducer實現(xiàn)解析
這篇文章主要為大家介紹了Spartacus中navigation?item?reducer實現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
TypeScript防抖節(jié)流函數(shù)示例詳解
這篇文章主要為大家介紹了TypeScript防抖節(jié)流函數(shù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析
這篇文章主要介紹了Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實現(xiàn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript十大排序算法之選擇排序?qū)崿F(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
Typescript是必須要學(xué)習(xí)嗎?如何學(xué)習(xí)TS全棧開發(fā)
Typescript目前在前端,網(wǎng)站,小程序中的位置基本無可替代,同時也可以構(gòu)建完美的CLI應(yīng)用。在移動,桌面,后端方面,性能不是要求很高的情況下完全可以勝任,并且在區(qū)塊鏈,嵌入式,人工智能方面也開始茁壯成長。2022-12-12
詳解什么是TypeScript里的Constructor?signature
這篇文章主要介紹了什么是TypeScript里的Constructor?signature詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07

