前端開發(fā)TypeScript入門基礎(chǔ)教程

第前端開發(fā)TypeScript入門基礎(chǔ)教程TYPESCRIPT

官網(wǎng)

github

TypeScript是一種由微軟開發(fā)的開源、跨平臺的編程語言。它是JavaScript的超集，最終會被編譯為JavaScript代碼。

可以看看官網(wǎng)的5分鐘TypeScriptToolingin5minutes

安裝TypeScript

命令行運行如下命令，全局安裝TypeScript：

npminstall-gtypescript

安裝完成后，在控制臺運行如下命令，檢查安裝是否成功：

tsc-V

第一個ts程序

新建文件test1.js

conststr:string="helloworldTS";

console.log(str)

代碼是寫好了,想要運行還得將ts編譯為js,使用tsc命令,會在同層生成js文件

tsctest1.ts

執(zhí)行nodetest1.js

PSE:\mysjc\tsnodetest1.js

helloworldTS

PSE:\mysjc\ts

恭喜你已經(jīng)入門ts,回過頭再來看看ts和js有什么區(qū)別，細心的你已經(jīng)發(fā)現(xiàn)ts多了個類型，那有人就會問了什么是類型？有哪些類型？

類型是一組關(guān)鍵字，聲明一個標識符的基本數(shù)據(jù)類型或者抽象數(shù)據(jù)結(jié)構(gòu)類型類型決定了內(nèi)存到底要存什么樣的數(shù)據(jù)

type

string

使用單引號或雙引號來表示字符串類型。反引號`來定義多行文本和內(nèi)嵌表達式

conststr1:string="helloworld";

conststr2:string='ts';

conststr3:string=`年少不知富婆好，${str1}${str2}`;

number

constnum1:number=3;//十進制

constnum2:number=3.3;

constnum3:number=3.333;

constnum4:number=0b11;//二進制

constnum5:number=0o12;//八進制

constnum6:number=0xa;//十六進制

boolean

邏輯值：true和false

constbol1:boolean=false;

constbol2:boolean=true;

元素類型后面接上[]Array元素類型

constlist1:number[]=[1,2,3];//可以試試list1[0]='2'，會發(fā)生什么。

constlist2:Arraynumber=[1,2,3];

enums

enumAnimal{

Dog,

Cat,

letzhangsan:Animal=Animal.Dog

console.log(zhangsan,Animal.Cat,Animal.Pig);//012

輸出0,1,2，我想讓張三變成狗，可以直接賦值，這下張三就成真的狗了。

enumAnimal{

Dog="狗",

Cat="貓",

Pig="豬"

letzhangsan:Animal=Animal.Dog

console.log(zhangsan,Animal.Cat,Animal.Pig);//狗貓豬

可以是任意類型

leta:any=[1,undefined,null,'string',true,false];

a[0]='s';

console.log(a);//['s',undefined,null,'string',true,false]

letb:any=1;

b='wc';

b=null;

console.log(b);//null

object

參數(shù)就是object類型

//Theparameter'stypeannotationisanobjecttype

functionprintCoord(pt:{x:number;y:number}){

console.log("Thecoordinate'sxvalueis"+pt.x);

console.log("Thecoordinate'syvalueis"+pt.y);

printCoord({x:3,y:7});

object類型還可以指定屬性是否可選

functionprintName(obj:{first:string;last:string}){

console.log(`${obj.first}-${obj.last}`);

printName({first:"Bob"});//Bob-undefined

printName({first:"Alice",last:"Alisson"});//Alice-Alisson

如果可選參數(shù)不傳遞，獲得的值undefined,在使用之前進行檢查即可。

functionprintName(obj:{first:string;last:string}){

//obj.last.toUpperCase();//TypeError:Cannotreadproperty'toUpperCase'ofundefined

if(obj.last!==undefined){

console.log("if",obj.last.toUpperCase());

console.log(obj.last.toUpperCase());

printName({first:"Bob"});//undefined

*ifAA

*AA

printName({first:"Bob",last:"aa"});

Union聯(lián)合類型

聯(lián)合類型是由兩個或多個其他類型組成的類型

/**

*@paramid類型只能傳遞number或者string

functionwork(id:number|string){

console.log("上班:"+id);

work(101);//上班:101

work("202");//上班:202

//work(false);

如果聯(lián)合的每個成員都有效,便可以做一些有意思的事情

/**

*@paramid類型只能傳遞number或者string

functionwork(id:number|string){

constsalary:number=300;

if(typeofid==="string"){

console.log(`${id}上班,可獲得薪水$${salary}`);

}else{

console.log(`${id}上班,可獲得薪水$${salary*2}`);

work(101);//101上班,可獲得薪水$600

work("202");//202上班,可獲得薪水$300

TypeAssertions類型斷言

類型斷言好比其它語言里的類型轉(zhuǎn)換，但是不進行特殊的數(shù)據(jù)檢查和解構(gòu)。它沒有運行時的影響，只是在編譯階段起作用

類型值值as類型

console.log(1asstring)

console.log(string1)

TS會在沒有明確的指定類型的時候推測出一個類型

定義變量時賦值