TypeScript 学习总结之基础类型

对TypeScript 的认识

TypeScript 是什么？

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

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

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

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

与JavaScript的区别

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

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

TypeScript 数据类型

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 原始数据的注解

布尔值的注解 ：

let isDone: boolean = false;     

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

注解：Boolean 指的是如下：

数字的注解：

let decLiteral: number = 6;

字符串的注解：

let myName: string = "bob";
myName = "smith";
let sentence: string = `Hello, my name is ${ myName }.

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

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

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

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

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

   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类型上的属性

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

   如下图

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

   let a
   a = '123'
   a = 123
   

   

void

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

null & undefined

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

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

Never

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

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

Object

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

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的。

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

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

如下图： 类型推论

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

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

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

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

做类型注解：

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

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

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

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

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

test(1)

因此，我们要注意，

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

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

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

初识 interface

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

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

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

interface Person {
  name: string
  age: number
}

let preson: Person = {
  name: 'wpf',
  age: 18
}

• 可选属性：如果偏偏少属性呢？ 就在属性后边加?即可。 如果想多属性呢，
• 任意/多选 属性[propName:string]:any
• 只读属性: readonly后面加属性

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 方式

类型[]

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

Array<类型>

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

interface 方式

interface List {
  [index: number]: number
}
let list: List = [1, 2, 3, 4, 5]

// 联合类型
interface List {
  [index: number]: number | string
}

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

类数组

// args 就是个类数组