20岁的小璐在得知自己前男友有了新女友之后,想到曾经如此爱自己的那个人的怀里依偎着别的女人,一股悲愤涌上心头,无奈的她无人倾诉,只好深夜买醉,酒醒之后发现自己居然爱上了学习,尤其是TypeScript,那么下面,我就带大家来入门一下TypeScript的基本语法。
TypeScript 入门
TypeScript简介
-
TS的来历
TypeScript(简称TS)由微软于2013年发布,是ECMA的三巨头语言的老小(JS、AS、TS)。
-
TS的特点
TypeScript是一种强类型语言,相对于弱类型语言,开发更容易,(但更难学)。
-
TS的使用方法
- 安装:打开终端,输入
npm i typescript -g
- 编程:创建一个
.ts
为后缀的文件开始编程 - 编译运行:在终输入
tsc filename.ts
即可编译TypeScript文件,生成一个同名的js文件。
- 安装:打开终端,输入
let 关键字
在TS中,let和var都可以定义变量,但是let是JavaScript的新概念,可以解决很多常见的问题,所以一般使用let来定义。
字符类型
-
数字类型 number (所有数字都是浮点数)
let a:number = 6; // :类型 表示强类型,不可更改类型 let b:number = 0xf00d; a = 0x00ff; a = 1.2e+2;
-
布尔类型 boolean
let a:boolean = false;
-
字符串类型 string
let a:string = "a"; let b = "b";
-
数组 array(JS中没有数组)
数组中的元素类型必须统一
// number限定数组中的元素类型 let a:number[] = [1,2,3,4]; // 另一种限制元素类型的写法 推荐写法 let b:Array<string> = ["a","b","c","d"];
-
元组 Tuple
元组是元素类型不统一的数组
let a:[string,boolean,number] = ["a",false,1]
-
枚举 enum(enumerate,意味枚举)
可以理解为一种类,当中列出的静态常量
enum Color { RED="0xFF0000", GREEN="0x00FF00", BLUE="0X0000FF" } let a:Color = Color.RED; enum MouseEvents { CLICK="click", MOUSE_DOWN = "mousedown", MOUSE_UP = "mouseup" } doucument.addEventListener(MouseEvents.CLICK,clickHandler); function clickHandler(){ //... }
-
任意值 any
任意类型
let a:any = 3; a = "a"; a = false; let b = 4; //默认为any类型
-
null 和 undefined
let o:object = {a:1,b:2}; o = null; // 不会报错 let a; // 默认为undefined let u:undefined = undefined; let n:null = null;
-
void
void可以理解为与any类型相反,它没有任何类型,通常当一个函数没有返回值时,返回类型写void
声明一个void类型的变量没什么意义,因为只能给它赋值为undefined或者null;
function haha():void{ console.log("haha"); }
-
不存在的值类型 Never
// --
-
非原始类型 Object
// --
类型断言
在编程中,当你清楚地知道一个实体的具体类型的时候,可以通过类型断言的方式告诉编辑器"莫给老子报错"。类型断言好比其他语言里的类型转换,但是不进行特殊的数据检查和解构,运行时没有影响,只在编译的阶段起作用。
类型断言有两种方式:
-
尖括号写法,在要断言的数据前加上<数据类型>:
let someValue:any = "string"; let strLength:number = (<string>someValue).length;
-
as 语法:(... as ...)
let someValue:any = "string"; let strLength:number = (someValue as string).length;
函数写法
在函数后写入:类型,表示返回什么类型,return的结果是什么类型
设置void表示当前函数不返回任何值
function fn(a:string,b:number = 1):void{
// :void 表示该函数没有返回值
}
function getSum(a:number,b:number = 10):number{
// :number 表示该函数返回一个数值类型
return a+b
}
类、继承与接口内容较多,将在下个章节更新
网友评论