TypeScript学习小结

TypeScript是什么

TypeScript是由微软公司开发的一个开源JavaScript的超集,主要提供了类型系统和对ES6的支持,可以编译成纯JavaScript,主要就是对JavaScript中定义的变量进行类型检查

 

运行TypeScript

全局安装: npm install -g typescript

创建.ts结尾的文件

在命令行中执行tsc+项目文件名,这个命令可以将我们写好的ts代码编写成JavaScript代码,并且进行数据类型检查

 

示例:

在heelo.ts文件中写一段代码

在heelo.ts文件中写一段代码

function sayHello(msg: string) {
  return 'Hello' + msg
}

let str = sayHello('李明')
console.log(str)

// 在命令行中执行
tsc hello.ts

// 这个命令会把刚写的代码编译成普通的JavaScript代码

function sayHello(msg) {
  return 'Hello' + msg
}

let str = sayHello('李明')
console.log(str)

// TypeScript只会进行静态检查,如果编写的内容有误,会在编译的时候报错
// 上面的代码改成:

function sayHello(msg) {
  return 'Hello' + msg
}

let str = sayHello(123)
console.log(str)

// 编译器中会提示错误,编译的时候也会报错.期望得到string类型,但是输入的是数字类型
index.ts(6,22): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

TypeScript数据类型

 

1、布尔值

let isShow: boolean = false

2、数字类型

和JavaScript一样,typescript里的所有数字都是浮点型,这些浮点数的类型是number.除了支持十进制和十六进制字面量,typescript还支持ECMAScript2015中引入的二进制和八进制字面量

let sum: number = 6

let price: number = 0xf00d

let binaryLiteral: number = 0b1010

let octalLiteral: number = 0o744

3、字符串

和JavaScript一样,可以使用双引号("")和单引号('')表示字符串

let name: string = 'jack'

name = "lili"

还可以使用模板字符串

let hello = `hello my name is ${name}`

4、数组

typescript有两种方式可以定义数组.第一种:可以在元素类型后面接上[]

let arr: number[] = [1, 2, 3]

第二种:使用数组泛型,Array<元素类型>

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

let arr: Array<string> = ['li', '2', '3']

5、元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同.比如:你可以定义一对值为string和number类型的元组

let arr: [string, number]

arr = ['li', 5]

这样式可以的

arr = [5, 'li']

这样会报错

6、枚举

// enum类型是对 JavaScript 标准数据类型的一个补充。 像 C###等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。
enum Color {
Red,
Green,
Blue
}
let c: Color = Color.Green;
// 默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从1开始编号：
enum Color {
Red = 1,
Green,
Blue
}
let c: Color = Color.Green;
// 或者，全部都采用手动赋值：
enum Color {
Red = 1,
Green = 2,
Blue = 4
}
let c: Color = Color.Green;
// 枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为 2，但是不确定它映射到 Color 里的哪个名字，我们可以查找相应的名字：
enum Color {
Red = 1,
Green,
Blue
}
let colorName: string = Color[2];
alert(colorName); // 显示'Green'因为上面代码里它的值是2

7、任意值any

有时候,我们会为在编程阶段还不清楚类型的变量指定一个类型,并且希望在编译的时候不进行检查.那么我们可以使用any任意类型来标记这些变量

let anyVariable:any = 4

anyVariable = 'hello'

8、空值void

某种程度上,void类型像是与any类型相反,它表示没有任何类型.当一个函数没有返回值时,你通常见到的就是void

function warnTip(): void {

alert('这是条错误信息')

}

声明一个void类型的变量没什么大用,因为你只能给它赋值undefined和null

let unsable: void = undefined

9、Null 和 Undefined

TypeScript 里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和void相似，它们的本身的类型用处不是很大：

// Not much else we can assign to these variables!

let u: undefined = undefined;

let n: null = null;

默认情况下null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给number类型的变量

10、Never

never类型表示的是那些永不存在的值的类型。 例如，never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；

变量也可能是never类型，当它们被永不为真的类型保护所约束时。

never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使any也不可以赋值给never。

下面是一些返回never类型的函数：

// 返回never的函数必须存在无法达到的终点

function error(message: string): never {

throw new Error(message);

}

// 推断的返回值类型为never

function fail() {

return error("Something failed");

}

// 返回never的函数必须存在无法达到的终点

function infiniteLoop(): never {

while (true) {}

}

11、Object

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

使用object类型，就可以更好的表示像Object.create这样的 API。例如：

declare function create(o: object | null): void;

create({ prop: 0 }); // OK

create(null); // OK

create(42); // Error

create("string"); // Error

create(false); // Error

create(undefined); // Erro