前端开发TypeScript入门基础教程

第前端开发TypeScript入门基础教程TYPESCRIPT

官网

github

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。

可以看看官网的5分钟TypeScriptToolingin5minutes

安装TypeScript

命令行运行如下命令，全局安装TypeScript：

npminstall-gtypescript

安装完成后，在控制台运行如下命令，检查安装是否成功：

tsc-V

第一个ts程序

新建文件test1.js

conststr:string="helloworldTS";

console.log(str)

代码是写好了,想要运行还得将ts编译为js,使用tsc命令,会在同层生成js文件

tsctest1.ts

执行nodetest1.js

PSE:\mysjc\tsnodetest1.js

helloworldTS

PSE:\mysjc\ts

恭喜你已经入门ts,回过头再来看看ts和js有什么区别，细心的你已经发现ts多了个类型，那有人就会问了什么是类型？有哪些类型？

类型是一组关键字，声明一个标识符的基本数据类型或者抽象数据结构类型类型决定了内存到底要存什么样的数据

type

string

使用单引号或双引号来表示字符串类型。反引号`来定义多行文本和内嵌表达式

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'，会发生什么。

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

参数就是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

如果可选参数不传递，获得的值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联合类型

联合类型是由两个或多个其他类型组成的类型

/**

*@paramid类型只能传递number或者string

functionwork(id:number|string){

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

work(101);//上班:101

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

//work(false);

如果联合的每个成员都有效,便可以做一些有意思的事情

/**

*@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类型断言

类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用

类型值值as类型

console.log(1asstring)

console.log(string1)

TS会在没有明确的指定类型的时候推测出一个类型

定义变量时赋值