typescript(01)

TypeScript 的静态类型

1.如何定义静态类型

const count: number = 1;

这就是最简单的定义一个数字类型的count的变量，这里的: number就是定义了一个静态类型。这样定义后count这个变量在程序中就永远都是数字类型了，不可以改变了。

//错误代码
const count: number = 1;
count = "jspang";

并且我们在制定了变量的类型之后，可以在变量后面打一个. 就可以看到vscode编译器会给我们列举出所有的属于该类型所有的方法。

自定义静态类型

interface XiaoJieJie {
  uname: string;
  age: number;
}

const xiaohong: XiaoJieJie = {
  uname: "小红",
  age: 18,
};

这时候你如果声明变量，跟自定义不一样，VSCode直接就会报错。需要注意的是，这时候xiaohong变量也具有uname和age属性了。

这节课你需要记住的是，如果使用了静态类型，不仅意味着变量的类型不可以改变，还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性，并且编辑器这时候也会给你很好的语法提示，加快了你的开发效率。

TypeScript 基础静态类型和对象类型

在 TypeScript 静态类型分为两种，一种是基础静态类型，一种是对象类型。

1.基础静态类型

基础静态类型非常简单，只要在声明变量的后边加一个:号，然后加上对应的类型哦。比如下面的代码，就是声明了一个数字类型的变量，叫做count。

const count : number = 918;
const myName ：string = 'jspang'

类似这样常用的基础类型还有，我这里就举几个最常用的哦null,undefinde,symbol,boolean，void这些都是最常用的基础数据类型

2.对象类型

map的形式

const xiaoJieJie: {
  name: string,
  age: number,
} = {
  name: "大脚",
  age: 18,
};

数组的形式

const xiaoJieJies: String[] = ["谢大脚", "刘英", "小红"];

类类型

class Person {}
const dajiao: Person = new Person();

函数类型

const jianXiaoJieJie: () => string = () => {
  return "大脚";
};

那我们现在总结一下对象类型可以有几种形式：

• 对象类型
• 数组类型
• 类类型
• 函数类型

这几种形式我们在TypeScript里叫做对象类型。

TypeScript 中的类型注释和类型推断

type annotation 类型注解

let count: number;
count = 123;

这段代码就是类型注解，意思是显示的告诉代码，我们的count变量就是一个数字类型，这就叫做类型注解。

type inferrence 类型推断

let countInference = 123;

这时候我并没有显示的告诉你变量countInference是一个数字类型，但是如果你把鼠标放到变量上时，你会发现 TypeScript 自动把变量注释为了number（数字）类型，也就是说它是有某种推断能力的，通过你的代码 TS 会自动的去尝试分析变量的类型。

工作使用问题（潜规则）

• 如果 TS 能够自动分析变量类型， 我们就什么也不需要做了
• 如果 TS 无法分析变量类型的话， 我们就需要使用类型注解

就是当我们变量声明的同时进行了赋值，这时候就可以让ts来自己进行推断。

在写 TypeScript 代码的一个重要宗旨就是每个变量，每个对象的属性类型都应该是固定的，如果你推断就让它推断，推断不出来的时候你要进行注释。

TypeScript 函数参数和返回类型定义

函数无返回值时定义方法

有时候函数是没有返回值的，比如现在定义一个sayHello的函数，这个函数只是简单的terminal打印，并没有返回值。

function sayHello(): void {
  console.log("hello world");
}

如果这样定义后，你再加入任何返回值，程序都会报错。

never 返回值类型

如果一个函数是永远也执行不完的，就可以定义返回值为never。

抛出了异常

function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}

死循环

function forNever(): never {
  while (true) {}
  console.log("Hello JSPang");
}

函数参数为对象(解构)时

function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const three = add({ one: 1, two: 2 });

如果参数是对象，并且里边只有一个属性时，我们更容易写错。

function getNumber({ one }: { one: number }): number {
  return one;
}

const one = getNumber({ one: 1 });