基础类型

什么是值 (value)

是我们能够赋值给变量 (variable) 的东西

什么是类型

  1. 一个方便我们去更简便地描述一个具有相应属性和方法的值的东西

  2. 每一个值都会有相应的类型

    常见的基础类型

  3. String

  4. Number
    1. 在 TS 中数字类型没有子类型，如整数、浮点数
  5. Boolean

    类型分类

  • 元类型 (primitive types)
    • number boolean undefined void string symbol null
  • 对象类型 (object types)
    • functions arrays classes objects

      使用类型好处

  1. 帮助 TS 编译器分析代码
  2. 帮助其它工程师去理解整个代码库里面存在的值到底是什么东西，尤其在大型项目

    类型注解

    我们告诉 TypeScript 值的类型是什么
    手动
    var 变量 : 类型

    变量类型注解

    ```typescript //原类型 let score: number = 50; let sports: string = ‘basketball’; let isHappy: boolean = true;

let nothingMuch: null = null; let nothing: undefined = undefined;

let today: Date = new Date();

//对象类型 //数组 let balls: string[] = [‘basketball’, ‘football’, ‘volleyball’]; let someNums: number[] = [1, -5, 0]; let truths: boolean[] = [true, true, false];

//类 class Car{} let car: Car = new Car();

//对象字面量（变量） let person: {name: string; age: number} = { name: ‘张三’, age: 20 }

//函数字面量（变量） 参数、返回值 const logNumber: (num: number) => void = (num) => {}

  1. <a name="QqQf2"></a>
  2. ## 函数类型注解
  3. ```typescript
  4. //参数、返回值
  5. //TS只检查类型，不会检查逻辑
  6. const addNums = (a: number, b: number): number => {
  7.       return a + b;
  8. }
  10. //TS 会推断返回值的类型（但一般不建议使用）
  11. const sustractNums = (a:number, b:number) => {
  12.   //如果此处是忘记 return,TS 会认识是返回 void 类型
  13.   //所以对函数的返回值作类型注解的必要就出来了
  14.   a - b;
  15. }
  17. //函数声明的注解方式
  18. function multiply(a:number, b:number): number {
  19.     return a * b;
  20. }
  22. //匿名函数的注解方式
  23. const divide = function(a:number, b:number): number {
  24.     return a / b;
  25. }
  27. //函数没有返回值(即返回 null 或 undefined )，用void
  28. const logger = (message: string): void => {
  29.     console.log(message);
  30. }
  32. //never 函数永远不会有尽头的
  33. const throwError = (message: string): never => {
  34.     throw new Error(message);
  35. }
  37. //如果有可能有尽头，就不会使用 never
  38. const throwError = (message: string): void => {
  39.     if(!message){
  40.       throw new Error(message);
  41.   }
  42. }
  44. // 函数解构注解
  45. const todayWeather = {
  46.     date: new Date(),
  47.   weather: '晴天'
  48. }
  50. const logWeather = ({
  51.   date, 
  52.   weather
  53. }: {
  54.   date: Date, 
  55.   weather: string
  56. }): void => {
  57.     console.log(date);
  58.   console.log(weather);
  59. }

对象注解

  1. const profile = {
  2.     name: 'Mike',
  3.   age: 20,
  4.   coords: {
  5.       lat: 30,
  6.     lng: 50
  7.   },
  8.   setAge(age: number): void {
  9.       this.age = age;
  10.   }
  11. }
  13. const { age }: { age: number} = profile;
  14. const { 
  15.   coords: {lat, lng}
  16. }: { coords: { lat: number; lng: number} } = profile;
  17. const { age, name }: { age: number; name: string } = profile;

类型推断

当变量声明 和变量初始化 在同一行的时候，TypeScript 尝试去推断值的类型
自动

const today = new Date(); //会根据值来推断变量的类型

所以使用 TS 的副作用：无论我们是不是想要，都会分配一个类型。

什么时候使用类型注解、什么时候使用类型推断

  • 类型注解

    • 当一个函数返回 any 类型，但我们想要明确具体类型

      const json = '{"name": "张三", "age": 20}';
const person: {name: string; age: number} = JSON.parse(json);

    • 当某一行声明变量了之后在另一行进行初始化

      let score: number;
score = 50;

    • 当我们想要一个变量拥有一个不能推断出来的类型 ```typescript let numbers = [-10, 0, 1]; // 联合类型 let numAboveZero: boolean | number = false;

for(let i = 0; i < numbers.length; i++){ if(numbers[i] > 0){ numAboveZero = numbers[i]; } }


- 类型推断
   - 尽可能多
<a name="zX0Z8"></a>
# Any类型

1. 一种类型
   1. 和字符串类型、布尔类型一样
2. 意味TS不知道正确的类型
   1. 没法检查代码
3. 尽量避免变量的类型为 any
<a name="3wdHS"></a>
# 数组类型
**类型化数组**<br />组里的元素都是同一种类型 
```typescript
const dates = [new Date(), new Date()];
//多维数组
const students = [
    ['a','b','c'],
  ['d'],
  ['e','f']
]

为什么用类型化数组

  1. 提取值的时候帮助推断
  2. 防止加入不一样类型的值
  3. 使用 map、forEach、reduce 函数时提供帮助
  4. 灵活性
    1. 数组依旧可以容纳不同类型

什么时候用类型化数组
代表一些（相似类型）记录的数据结构

元组

tuple
和数组很类似的数据结构，每一个元素从莆一个记录的不同属性

const drink = {
    color: 'brown',
  carbonated: true,
  sugar: 35
};

//tuple
const pepsi: [string, boolean, number] = ['brown', true, 35];

//类型别名
type Drink = [string, boolean, number];
const sprite: Drink = ['clear', true, 40];
const tea: Drink = ['brown', false, 0];

什么时候使用元组
一般来说很少使用到元组类型，个别例子如 CSV 文件操作时可能用到。
元组最大的弊端是会丢失一些很重要的信息，所以 JavaScript 对象会有更多的信息。

//农场 鸡、鸭 的个数
const farm: [number, number] = [6, 8]; //丢失key
//所以更倾向于JS对象表示
const farm = {
  chick: 6,
  duck: 8
}

接口

在 TS 中大量使用到 接口 + 类 -> 高度利用的代码
定义
创建一个新的类型，来描述一个对象的属性名和属性值。

interface Person {
  name: string;
  age: number;
  married: boolean;
  born?: Date;
  summary(): string;
}

const uncleMike = {
    name: 'Mike',
  age: 20,
  married: false,
  summary(): string{
      return `名字: ${person.name}`;
  }
}

/*
const printPerson = (person: {name: string; age: number; married: boolean}): void => {
    console.log(`名字: ${person.name}`);
  console.log(`年龄: ${person.age}`);
  console.log(`结婚没? ${person.name}`);
}
*/
//person 的类型定义很长，如果还有另外一个 person 对象也要定义就非常麻烦
//这时可以用接口来解决
const printPerson =
//                  (person: {name: string; age: number; married: boolean}): void => {
                                        (person: Person): void => {
    console.log(`名字: ${person.name}`);
  console.log(`年龄: ${person.age}`);
  console.log(`结婚没? ${person.name}`);
  consoel.log(person.summary());
}

printPerson(uncleMike);

接口作用
image.png
使代码可以高度地复用

类

步骤

  1. 定义对象方法

  2. 定义对象属性

    访问修饰符

    public 默认
    在任何中地方调用
    private
    只能在这个类调用
    proteced
    只能在这个类或其子类调用

    继承

    ```typescript class Person { scream(): void { console.log(‘ahhh’); }

    sing(): void { console.log(‘lalala’); } }

class Men extends Person{ //子类重载 sing(): void { console.log(‘woohoooo!); } } ```