TypeScript学习总结之基础类型

​
TypeScript

对TypeScript 的认识

TypeScript 是什么？

  1. TypeScript 是 JavaScript类型的超集，它可以编译纯JavaScript ， 是由 微软开发的开源的编程语言。

  2. TypeScript 可以在任何浏览器，任何计算机和任何操作系统上运行。

  3. TypeScript 是开发大型应用的基石。

  4. TypeScript 提供了更丰富的语法提示， 在编写阶段能够检查错误。

与JavaScript的区别

TypeScript 是静态类型， JavaScript是动态类型

  1. 在TypeScript 中 类型是确定好的。（一旦给类型赋值后就不能更改其类型）

TypeScript 数据类型

为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

JavaScript 的基本数据类型：

原始数据类型：string、number、boolean、null、undefined、symbol

引用数据类型：object

TypeScript 的基本数据类型：

包含JavaScript所有的基本数据之外，额外新增了几种新的数据类型（大概的写一下）：

  1. any(任意类型)、
  2. never （never类型表示的是那些永不存在的值的类型） 、
  3. void（void类型像是与any类型相反、只能为它赋予undefined和null）
  4. 针对于对象类型的： interface
  5. 针对于数组的：number[] 、string[] 、boolean[] 等， 泛型的写法：Array<元素类型> (Array)
  6. 函数的注解

TypeScript 原始数据的注解

布尔值的注解 ：
1
let isDone: boolean = false;

//注意boolean 首字母不能大写，

注解：Boolean 指的是如下：
Boolean

数字的注解：
1
let decLiteral: number = 6;
字符串的注解：
1
2
3
let myName: string = "bob";
myName = "smith";
let sentence: string = `Hello, my name is ${ myName }.

// 注意这点不能用 name来命名

不能name来命名

any 数据类型： 任意数据类型；

  1. 如果是不同变量的话，可以是任意的数据类型

    1
    2
    3
    let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean

  2. 如果是对象的话， any 是不能够提示原型上的共有属性和方法的。

    1
    2
    3
    let notSure: any = 4;
    notSure.ifItExists(); // okay, ifItExists might exist at runtime
    notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

    相反，如果是 Object的话，它就会提示使用Object类型上的属性

    1
    2
    3
    let prettySure: Object = 4;
    prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.
    prettySure.toString()  // OK

    如下图

  3. 未给初始值的变量类型 为 any 类型

    1
    2
    3
    let a
    a = '123'
    a = 123

    any 类型

    void

void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void

1
2
3
4
function warnUser(): void {
  console.log("This is my warning message");
  //相当于 return undefined  
}
null & undefined

默认情况下null和undefined是所有类型的子类型

在tsconfig.json 中配置 strictNullChecks = false 时，
就可证明null和undefined是所有类型的子类型 

1
let u: number = undefined;  // strictNullChecks = false 时， 不报错

但官方建议让我们 strictNullChecks = true ，但在配置中这个标记是关闭的。

Never

never类型表示的是那些永不存在的值的类型, 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。

（目前我接触的这种实际情景不多，以后遇到了我再去单独了解）

Object

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

1
2
3
4
5
6
7
8
9
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); // Error

以上是官网的例子， 上面代码说明了 object 不能是去使用 原始类型 ， 比如create(function(){})、 create([]) 这些是可以OK的。

类型注解 & 类型推论 & 联合类型

在我们定义变量时，而这个变量是原始数据，那么，我们不需要对它进行类型注解，它也能推论出该变量属于什么类型的。

如下图： 类型推论

类型推论

所以正常情况下，能够做出类型推论的话，我们专门去对它注解，会显得有些繁琐了。

但是肯定有别的情况需要我们去做类型注解，

比如：当我们定义一个方式， 它会提示我们去进行类型注解

1
2
3
4
5
function test(a, b) {  // 在编辑器中会提示你要做类型注解
  return a + b
}
 
test(1,2)

做类型注解：

1
2
3
4
5
function test(a:number, b:number) {
  return a + b
}
 
test(1,2)

联合类型： 多个类型当中，我们可以选择其中类型的一种

1
2
3
let union: string | number
union= '123'  // is OK
union= 123    // is OK

而当我们去定义一个函数时：

1
2
3
4
5
6
function test(a: number | string) {
  return a.toString()   // 共有属性， OK
  //  return  a.split()  // 这个是 String 独有的属性，不能联合起来使用
}

test(1)

因此，我们要注意，

  1. 联合类型的共有属性不会报错，

    但不要用 联合类型中其中一种类型的独有属性 比如 String 中的 split 方法， Number是没有此属性的， 因此会报错

  2. 在赋值的时候要确认类型

初识 interface

接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

  1. 对对象的形状进行描述；
  2. 对类的一部分行为的抽象；

简单使用：(对 对象的形状进行描述)

// interface默认不能多属性也不能少属性

1
2
3
4
5
6
7
8
9
10

interface Person {
  name: string
  age: number
}

let preson: Person = {
  name: 'wpf',
  age: 18
}
  • 可选属性：如果偏偏少属性呢？ 就在属性后边加?即可。 如果想多属性呢，
  • 任意/多选 属性[propName:string]:any
  • 只读属性: readonly后面加属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    interface Person { 
      readonly id: number,    // 只读属性
      name: string
      age?: number  // 可选属性
      [propName:string]:any   // 任意属性
    }

    let preson: Person = {
      id: 1,
      name: 'wpf',
      male: '男'
    }

数组注解

定义数组的方式有三种：

  1. 类型[] 如： number[]
  2. 数组泛型 Array<类型> 如： Array
  3. interface 方式

类型[]

1
2
let list: number[] = [1, 2, 3];  // 默认不写，会类型推论 推出来
let list1: (string | number)[] = [1, 2, 3, '1']  // 联合类型

Array<类型>

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

interface 方式

1
2
3
4
interface List {
  [index: number]: number
}
let list: List = [1, 2, 3, 4, 5]
1
2
3
4
5
6
// 联合类型
interface List {
  [index: number]: number | string
}

let list: List = [1, 2, 3, 4, 5, '6']

类数组

// args 就是个类数组

类数组