TypeScript快速學(xué)習(xí)入門(mén)基礎(chǔ)語(yǔ)法
TypeScript是微軟開(kāi)發(fā)的開(kāi)源編程語(yǔ)言,在JavaScript的基礎(chǔ)上拓展了一些語(yǔ)法,是 JavaScript 的一個(gè)超集。TypeScript的基礎(chǔ)語(yǔ)法,包括變量聲明、復(fù)合類型(數(shù)組和對(duì)象)、條件控制(if-else和switch)、循環(huán)(for和while)、函數(shù)(基礎(chǔ)和箭頭函數(shù),以及可選參數(shù))、面向?qū)ο筇匦裕杜e、接口、繼承)以及模塊開(kāi)發(fā)中的導(dǎo)出和導(dǎo)入。
基礎(chǔ)語(yǔ)法
變量的聲明
TypeScript 在 JavaScript基礎(chǔ)上加入了靜態(tài)類型檢查功能,因此每一個(gè)變量都有固定的數(shù)據(jù)類型。
例如:let msg: string = 'hello world
let: 聲明變量的關(guān)鍵字,類似的 const代表常量
string:變量類型(拓展JavaScript的部分),其他常見(jiàn)類型如下:
number:整數(shù)、數(shù)值、浮點(diǎn)數(shù)、二進(jìn)制等
boolean:布爾類型
any:不確定,可是任意類型(相當(dāng)于跳過(guò)類型檢查)
union類型:例如let u: string|number|boolean = 'hello'可以是多個(gè)指定類型中的一種
object:對(duì)象
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){ // 推薦使用三個(gè)等于號(hào)判斷
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]) // 這種方取出來(lái)的是下標(biāo)
}
for(let n of names){
console.log(n) // 這種方取出來(lái)的是一個(gè)個(gè)的元素
}函數(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ù)后加問(wèn)號(hào)?,表示可選
function sayHi (name?: string) {
name = name ? name: '無(wú)名氏' //判斷,沒(méi)有傳入?yún)?shù)就賦值
console.log('hi' + name)
}
sayHi('Jack')
sayHi()
// 上述可賦默認(rèn)值 類似python語(yǔ)法
function sayHi (name: string = 'Jack') //若不傳參 默認(rèn)為Jack面向?qū)ο?/h2>
TypeScript 具備面向?qū)ο缶幊痰幕菊Z(yǔ)法,例如 interface 、 class 、 enum 等。也具備封裝、繼承、多態(tài)等面向?qū)ο蠡咎卣鳌?/p>
枚舉、接口
// 定義枚舉 不需要寫(xiě)let和參數(shù)類型等
enum Msg{
HI = 'hi',
HELLO = 'hello'
}
// 定義接口
interface A{
say(msg: Msg):void
}
// 實(shí)現(xiàn)接口
class B implements A{
say(msg:Msg):void{
console.log(msg + "ni hao")
}
}
// 初始化對(duì)象 并調(diào)用方法
let a:A = new B()
a.say(Msg.HI)繼承
// 定義矩形類
class Rectangle{
// 定義成員變量 無(wú)需let
private width: number
private length: number
//構(gòu)造函數(shù) 無(wú)需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())模塊開(kāi)發(fā)
應(yīng)用復(fù)雜時(shí)我們可以把通用功能抽取到單獨(dú)的 ts 文件,每個(gè)文件都是一個(gè)模塊 (module)模塊可以相互加載,提高代碼復(fù)用性。
導(dǎo)出
// 定義類,并通過(guò)export導(dǎo)出
export class Rectangle{
xxx
}
// 定義工具方法
export function area(rec:Rectangle) number{
xxx
}導(dǎo)入
// 通過(guò)import語(yǔ)法導(dǎo)入 from后寫(xiě)地址
import {Rectangle, area} from '../rectangle'
// 使用導(dǎo)入的類創(chuàng)建對(duì)象
let r = new Rectangle(10,20)
// 調(diào)用導(dǎo)入的方法
console.log(area(r))到此這篇關(guān)于TypeScript快速學(xué)習(xí)入門(mén)基礎(chǔ)語(yǔ)法的文章就介紹到這了,更多相關(guān)TypeScript入門(mén)基礎(chǔ)語(yǔ)法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- TypeScript學(xué)習(xí)輕松玩轉(zhuǎn)類型操作
- 深入學(xué)習(xí)TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐
- TypeScript學(xué)習(xí)之強(qiáng)制類型的轉(zhuǎn)換
- TypeScript 學(xué)習(xí)筆記之基本類型
- Typescript是必須要學(xué)習(xí)嗎?如何學(xué)習(xí)TS全棧開(kāi)發(fā)
- TypeScript?學(xué)習(xí)筆記之?typeScript類定義,類的繼承,類成員修飾符
- TypeScript學(xué)習(xí)筆記中的的基本概念和用法
相關(guān)文章
layui.layer彈出層(子頁(yè)面)改變父頁(yè)面內(nèi)容(訪問(wèn)元素和函數(shù))
當(dāng)前頁(yè)面(父框架或父頁(yè)面)使用layer以iframe層的方式彈出新的窗口(子框架或子頁(yè)面)時(shí),如何在子頁(yè)面中訪問(wèn)父頁(yè)面的元素和函數(shù),從而改變父元素的頁(yè)面顯示,給用戶合理舒適的體驗(yàn)。2023-02-02
TypeScript?泛型接口具體使用實(shí)戰(zhàn)
這篇文章主要為大家介紹了TypeScript?泛型接口具體使用實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實(shí)現(xiàn)示例解析
這篇文章主要介紹了Typescript?extends?關(guān)鍵字繼承類型約束及條件類型判斷實(shí)現(xiàn)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
TypeScript快速學(xué)習(xí)入門(mén)基礎(chǔ)語(yǔ)法
TypeScript的基礎(chǔ)語(yǔ)法,包括變量聲明、復(fù)合類型(數(shù)組和對(duì)象)、條件控制(if-else和switch)、循環(huán)(for和while)、函數(shù)(基礎(chǔ)和箭頭函數(shù),以及可選參數(shù))、面向?qū)ο筇匦裕杜e、接口、繼承)以及模塊開(kāi)發(fā)中的導(dǎo)出和導(dǎo)入2024-07-07
TypeScript類型編程中的extends和infer示例解析
這篇文章主要為大家介紹了TypeScript類型編程中的extends和infer示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
TypeScript中的數(shù)據(jù)類型enum?type?interface基礎(chǔ)用法示例
這篇文章主要為大家介紹了TypeScript中的數(shù)據(jù)類型enum?type?interface基礎(chǔ)用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
TypeScript逆變之條件推斷和泛型的應(yīng)用示例詳解
這篇文章主要為大家介紹了TypeScript逆變之條件推斷和泛型的應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09

