去年換工作去參加其他公司面試,很多公司都問你會ts嗎?瞭解ts嗎?,第一家問的我一臉矇蔽樣,很老實的我回答說我不知道沒有了解過,面試官一副鄙視樣很受打擊,回來之後我就網上查詢搜索ts,搜索出來的原來ts是TypeScript ,是javascript的超集,所有使用JavaScript實現的東西TypeScript都能實現 , TypeScript現在用的已經很廣泛了,無論你使用ng、React還是Vue都可以使用TypeScript來實現的你JavaScript代碼,原來我真的落後咯,於是我就開始好好的學習TypeScript,只要你有javascript基礎就可以很愉快的學習這門新技術。
TypeScript不同於javascript的是它是強類型的,必須要定義類型(其實不用定義也可以,他會被當作javascript編譯,但是這樣就會顯得我們不專業),以下就是我學習typescript總結的一些筆記,希望對應看到我博客的碼農有所幫助(文采不好,希望理解)。
- 安裝、
- 先按照node
- npm install typescript -g 全局安裝
- tsc --version
- 搭建typescript項目
- 新建一個文件夾然後,npm init -y來初始化項目,生成package.json文件。
- 創建tsconfig.json文件,在終端中輸入tsc --init:它生成一個TypeScript項目的配置文件,可以通過讀取它來設置TypeScript編譯器的編譯參數
- 裝@types/node,使用npm install @types/node --dev-save進行安裝。這個主要是解決模塊的聲明文件問題。
- 編寫HelloWorld.ts文件,然後進行保存,代碼如下。
var a:string = "HelloWorld"
console.log(a)
-
- 在Vscode的任務菜單下,打開運行生成任務,(新版本在終端->運行生成任務,快捷鍵爲:ctrl+shift+b)然後選擇tsc:構建-tsconfig.json,這時候就會生成一個helloWorld.js文件
- 在終端中輸入node helloWorld.js就可以看到結果了。
- TypeScript 數據類型
Undefined :定義了一個變量,但沒有給他賦予任何值的時候,他就是Undefined類型
Number:數值類型;
string : 字符串類型;
Boolean: 布爾類型;
enum:枚舉類型;
enum fruit{
nan = '蘋果',
nv = '香蕉',
yao= '哈密瓜'
}
any : 任意類型,一個牛X的類型;
void:空類型;如果是函數裏面使用就不返回任何東西
Array : 數組類型;
Tuple : 元祖類型;
Null :空類型。
- TypeScript函數
function findShuaiguo(age:number):string{
return '找到了'+age+'歲的小帥哥'
}
var age:number = 18
var result:string = findShuaiguo(age)
console.log(result)
可選參數函數 ?
function findShuaiguo2(age:number , stature?:string):string{
let yy:string = ''
yy = '找到了'+age+'歲'
if(stature !=undefined){
yy = yy + stature
}
return yy+'的小帥哥'
}
var result:string = findShuaiguo2(22,'身材高挑')
console.log(result)
有默認參數
function findShuaiguo2(age:number=18,stature:string='身材高挑'):string{
let yy:string = ''
yy = '找到了'+age+'歲'
if(stature !=undefined){
yy = yy + stature
}
return yy+'的小帥哥'
}
var result:string = findShuaiguo2()
console.log(result)
有剩餘參數的函數(傳遞給函數的參數個數不確定)
function findShuaiguo3(...xuqiu:string[]):string{
let yy:string = '找到了'
for (let i =0;i<xuqiu.length;i++){
yy = yy + xuqiu[i]
if(i<xuqiu.length){
yy=yy+'、'
}
}
yy=yy+'的小帥哥'
return yy
}
var result:string = findShuaiguo3('22歲','大長腿','瘦高瘦高','有型')
console.log(result)
- TypeScript有3種函數的定義方式
(1)、函數表達式
function add(n1:number,n2:number):number{
return n1+n2
}
(2)、函數聲明式
var add = function(n1:number,n2:number):number{
return n1+n2
}
console.log(add(1,4))
- 、箭頭函數
var add = (n1:number,n2:number):number=>{
return n1+n2
}
console.log(add(1,4))
- 引用類型數組
- 、number類型的數組
Let arr1:number[]
- 、字符串類型
Let arr1:Array<string>
字面量賦值法
Let arr1:number[] = []
Let arr2:number[] = [1,2,3,4,5]
Let arr3:Array<string> = [“aaa”,”bbs”,”cccc”]
Let arr4:Array<boolean> = [true,false,true]
構造函數賦值法
Let arr1:number[] = new Array()
Let arr2:number[] = new Array(1,2,3,4,5)
Let arr3:Array<string> =new Array(“aaa”,”bbs”,”cccc”)
Let arr4:Array<boolean> = new Array(true,false,true)
Let arrtest:number[] = [1,2,true] //錯誤的不允許這樣寫
元組
Let x:[string,number] 鍵值對應類型的
字符串的兩種類型
基本類型字符串:由單引號或者雙引號括起來的一串字符串。
引用類型字符串:用new 實例化的 String類型
let lydia:string = '哈哈哈' //哈哈哈
let lydiaa:String = new String("lydia.com") // [String: lydia.com]
- typescript引用類型日期對象
a、不傳任何參數 let datetime:Date = new Date() //打印當前日期時間
b、傳遞一個整數 let datetime2:Date = new Date(2000)
//時間是從1970-01-01 00: 00:00 開始算的 這裏的2000就代表時間爲 1970-01-01 00:00:02 (2秒)
c、傳遞一個字符串
Let datetime3:Date = new Date(‘2019-04-28 10:30:45’)
Let datetime4:Date = new Date(‘2019/04/28 10:30:45’)
Let datetime4:date = new Date(‘2019-04-28T10:30:45’) //T代表時間
上面3個打印出來的結果是一樣的
let d:Date = new Date(year,month,day,hours,minutes,seconds,ms); //很少用找個
- typescript 正則使用
創建正則表達式也提供了兩種方法,一種是才採用new 關鍵字,另一種是採用字面量 的方式。RegExp接收2個參數,第一個代表條件 第二個代表時修飾符
修飾符:g是全局修飾符,i是忽略大小寫,m是多行模式。
- let reg = new RegExp(‘abc’ , ’gi’) //表示字符串規則裏面要包好abc字符
- Let reg2 = /abc/gi
RegExp中的常用方法
RegExp對象包含兩個方法:test( )和exec( )用於測試字符串匹配。
test(string) :在字符串中查找是否存在指定的正則表達式並返回布爾值,如果存在 則返回 true,不存在則返回 false。
exec(string) : 用於在字符串中查找指定正則表達式,如果 exec() 方法執行成功, 則返回包含該查找字符串的相關信息數組。如果執行失敗,則返回 null。
例如:reg.test(‘sdkfjskdfjsabc’) 返回true
reg.exec(‘sdkfjskdfjsabc’’) [ abc, index: 11, input: 'sdkfjskdfjsabc’' ]
以上是我的部分typescript筆記,後面我還會寫一個關於class和接口的筆記。敬請期待