天天看点

TypeScript学习笔记一

TypeScript是微软公司开发的针对JavaScript没有面对对象编程的一个Javascript的超集。它包含了JavaScript原有的所有的属性,又扩展了Javascript对于面对对象能力的支持。也增加了对于编译期间的类型检查和各种的错误检查的能力。

第一部分:基本类型

Boolean

最基本的真假类型 let isDone: boolean = false;

Number

和在JavaScript中一样,number类型默认的是浮点类型,但是在TS中还支持相应的十进制和十六进制的类型。

let decimal: number = 6;

let hex: number = 0xf00d;

let binary: number = 0b1010;

let octal: number = 0o744;

String

同样是使用双引号来表示一个字符串

let name: string = “bob”;

name = ‘smith’;

也可以使用临时的字符串变量来嵌入到相应的表达式中:

let name: string = ‘Gene’;

let age: number = 37;

let sentence: string = ‘Hello, my name is ${ name}.

I’ll be ${ age + 1} years old next month;

Array

可以通过两种方式创建数组

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

Tuple

组合类型的数组,可以创建一个包含多种类型的数组,有点类似联合体

let x: [string, number];

x = [ ‘hello’, 10];

Enum

枚举类型

enum Color { Red, Green, Blue };

默认情况下是从0开始,也可以自己指定枚举开始的下标。

let c: Color = Color.Green;

Any

在不知道具体类型的情况下,使用的类型。比如接收的是第三方库的类型的时候

let notSure: any = 4;

notSure = “maybe a String instead”;

notSure = false;

当然也可以使用object对象来替代,但是object对象并没有相应的方法来判断这个对象当前存在不存在。

Void

void更像是any的另一个对立面,经常是使用于没有返回值的函数声明中

function warnUser(): void {

alert(“This is my warning message”);

}

给void的数值指定类型值只能指定是null或是undefined。

类型转换

并不会影响编译的过程,假定使用者自己事先清楚类型。

let someValue: any = “this is a string”;

let strLength: number = (<string>someValue).length;

let strLength: number = (someValue as string).length;

以上使用的是Javascript中的新变量声明关键字let而不是以前使用的var关键字

第二部分:变量声明

相对于以前使用的var关键字,TS中更多的是使用let和const来声明一个变量,const是声明一个常量的关键字。

Var声明

var a = 10;

function f(){

var message = “hello, world”;

return message;

}

function f(){

var a = 10;

return function g(){

var b = a + 1;

return b;

}

}

var g = f();

g();

关于使用var声明的变量的作用域说明

var声明的变量要注意它的函数作用域还有文件作用域,可以在不同的代码块中重复声明使用相同的变量名。

let声明

let声明的变量避免了var声明变量中的变量泄露的问题,作用域是块作用域

let声明的变量无法在声明以前就使用

var中可以重复声明相同的名称的变量,但是let声明的变量是不允许拥有相同的变量的。

const常量声明

const numLivesForcat = 9;

const kitty = {

name: “Aurora”,

numLives: numLivesForCat,

}

//Error

kitty = {

name: “Danielle,

numLives: numLivesForcat

};

//all Okay

kitty.name = “rory”;

kitty.name = “kitty”;

kitty.numLives--;

除非采用特定的方法避免,否则对于const变量的内部状态还是可以改变的。

另一个TS继承ECMAScript2015的特性便是重构函数

数组的重构

let input = [1, 2];

let [ first, second] = input;

console.log(first);

console.log(second);

function f([first, second]: [number, number]){

console.log(first);

console.log(second);

}

f(input);

可以使用...name来代表数组中的剩余成员

let [first, ...rest] = [1, 2, 3, 4];

object的重构

let o = {

a: “foo”,

b: 12,

c: “bar”

}

let {a, b} = o;

指定默认值

function keepWholeObject(wholeObject: {a: string, b?:number}){

let {a, b = 100} = wholeObject;

}

     以上是自己学习TypeScript时候的笔记,文中知识点并不全,只作为自己的备忘。若有需要可以访问Typescript查看完整的官方文档

继续阅读