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变量也具有unameage属性了。

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

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 });
原文地址:https://www.cnblogs.com/jackson1/p/13854854.html