TypeScript学习总结之基础类型

对 TypeScript 的认识

TypeScript 是什么？

  1. TypeScript 是 JavaScript 的超集，他扩展了 JavaScript 的语法，所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作

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

  3. 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 首字母不能大写

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

// 注意这点不能用 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;
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
6
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
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 就是个类数组

JavaScript TypeScript

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！