TypeScript学习（一）初识TypeSCript

文章目录

• 1.安装TypeScript环境
• 2.构建一个TypeScript文件
• 3.类型注解
• 4.接口
• 5.类
• 6.基础类型

1.安装TypeScript环境

npm install -g typescript
           

2.构建一个TypeScript文件

（1）创建一个hello.ts文件

// hello.ts
console.log("Hello!")
           

（2）编译hello.ts

tsc hello.ts
           

   命令执行完毕之后会在hello.ts相同的位置生成一个hello.js文件。这就是一个ts文件执行的全过程了。

3.类型注解

​ TypeScript的一大特点就是可以为变量和函数添加静态类型约束。

// test.ts
let name: string = '';

name = [1,2,3];
           

​ 此时，编译test.ts文件，将会提示编译错误

Type 'number[]' is not assignable to type 'string'

,但是test.js文件仍会创建，只是会得到代码不会按照预期执行的警告。

4.接口

​ 同面向对象语言接口的接口定义一样，TypeScript的接口同样也是对对象的结构进行约束。但是在TypeScript中，只要两个类型之间的内部结构兼容，那么这两个对象就是兼容的。因此在实现接口的时候，只要保证包含了接口要求的结构就行了，而没必要去显示的使用

implements

语句。

interface User {
  account: string;
  password: string;
}

const user: User = {
  account: "",
  password: "",
};
           

5.类

​ TypeScript是JavaScript的超集，所谓超集就是指TypeScript包含JavaScript，也就是说，TypeScript完全兼容JavaScript的语法，因此TypeScript完全支持JavaScript的很多新特性。除此之外，TypeScript还增加了一些额外的行为，也就是超集部分。

class User {
  desc: string;
  // 使用public声明的参数等同于创建了同名的成员变量。
  constructor(public name, public age, public gender) {
    this.desc = name + age + gender;
  }
}

interface Person {
  name: string;
  age: number;
}

function welcome(user: Person) {
  console.log("hello " + user.name);
}

const user = new User("volit", 18, 1);
welcome(user);

           

6.基础类型

布尔值、数字、字符串、数组、元组、枚举、Any、void、null、undefined、never和object

（1）布尔值

• boolean
• 值：true/false

（2）数字

• number
• 值：浮点数
• 支持二、八、十、十六进制字面量

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
           

（3）字符串

• string
• 值：“” 、 ‘’ 、 ``

（4）数组

• array
• 值：[]
• 类型约束：

  类型名称[]

  、

  Array<类型名称>

（5）元组

• Tuple
• 允许表示一个已知元素数量和类型的数组，各元素的类型不必相同，需要初始化之后才能使用,且初始化的元素数量和类型要和元组一致

let x:[string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
           

• 当访问一个已知索引的元素，会得到一个正确的类型
• 当访问一个越界的元素，会使用联合类型

  string|number

  代替，联合类型是指只要该变量是string或者number就能够通过类型检查。

（6）枚举

• enum
• 枚举类型是对JavaScript基本类型的一个扩充，它可以为一组数组赋予友好的名字。

enum Color {
  Red,
  Green,
  Blue,
}
console.log(Color.Blue); // 2
           

• 默认情况下，从零开始编号，同时也可以手动指定成员的数值。

enum Color {
  Red = 1,
  Green = 5,
  Blue,
}
console.log(Color.Blue); // 6
           

• 相应的，也可以通过成员的枚举值，获取到枚举成员相应的名字

enum Color {
  Red = 1,
  Green = 5,
  Blue,
}
console.log(Color[6]); // Blue
           

（7）any

• any
• any表示任意类型，即它接收任意类型的值，与object的不同点是，它支持调用任意方法

（8）void

• void
• void表示没有任何类型，通常作用于没有返回值的函数

（9）null和undefined

• null、undefined
• null和undefined的类型就是他们本身，同时它们也是所有类型的子类型，因此它们可以被赋值给任意对象。
• 当指定了–strictNullChecks标记后，null和undefined只能赋值给void和他们本身

（10）never

• never
• 表示那些永远不存在的值的类型。例如，

  never

  类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型；变量也可能是

  never

  类型，当它们被永不为真的类型保护所约束时。

• never

  类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是

  never

  的子类型或可以赋值给

  never

  类型（除了

  never

  本身之外）。 即使

  any

  也不可以赋值给

  never

  。

（11）object

• object
• 表示非原始类型，即除

  number

  ，

  string

  ，

  boolean

  ，

  symbol

  ，

  null

  或

  undefined

  之外的类型。

（12）类型推断

​ 类似于强制类型转换，有两种语法形式

let val: any = "str";

// 尖括号式
let len: number = (<string>val).length;

// as式
let len: number = (val as string).length;
           

ps.两种语法是等价的，但是在TypeScript中使用JSX时，只有as语法是被允许的。