一、TypeScript的类型

typeScript常用的八种类型：number、string、boolean、函数、array、any（不建议使用）、void、object。

1.number

数字类型，包含小数、其他进制的数值

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
let big: bigint = 100n;

2.string

字符串

let background: string = 'red' | "red"

3.array

在TS中，array一般指所用类型元素的集合的值的集合，比如：

let list: Array<number> = [1,2,3];
// or
let list: number[] = [1,2,3]
// or
interface User {
  name:string
}
const john:User = {name: 'john'};
const jack:User = {name:'jack'}
let personList: Array<User> = [john,jack] //这里的john和jack都是User类型

和这种混合类型的“数组”

let l = ['jack',10]

在TS中不是数组/array,它们叫作tuple（元组）

4.boolean

布尔值

let isDone: boolean = false

5.函数

两种方法

1.在我们熟悉的“JS函数”上直接声明参数和返回值：

const isFaly = (value: any): boolean =>{
  return value === 0 ?ture: !value
}

2.直接声明想要的函数类型

export const useMount = (fn: ()=>void) => {
  useEffect(()=>{
    fn();
  },[])
}


const isFalsy: (value:any) => boolean = (value) => {
  return value === 0 ?true :!value;
}

6.any

any表示这个值可以是任何值，被定义为any就意味着不做任何类型检查

let loosedType:any = 4;
// loosedType 明明是一个数值4 哪里存在ifItExists方法呢？
// 由于声明为any，我们没法在静态检查阶段发现这个错误
loosedType.ifItExists();

刚开始学习TS时候，很多时候为了避免TS不在报错，因此喜欢使用any类型。但是这样是不对的，导致失去TS的类型保护。

7.void

绝大部分情况下，只会用在这一个地方：表示函数不返回任何值或者返回undefined（函数不返回任何值 === 返回undefined）

export const useMount = (fn:()=>void) =>{
  useEffect(()=>{
    fn()
  },[])
}

8.object

除了number、bigint、string、symbol、boolean、null、undefined、其他都是object

9.tuple

tuple是一个“数量固定、类型可以各异”的数组

let data:[number,string] = [1,'tuple'];
// 如果你对React有了解的话 useState就是一个很好地tuple返回类型
const [state,setState] = useState([]);
// 在React自定义hook返回值的时候很有可能用到tuple，体现tuple的便于使用者重命名的好处
const useHappy = () =>{
  //....
  return [isHappy,makeHappy,makeUnhappy]
}
const SomeComponent = ()=>{
  const [tomIsHappy,makeHappy,makeUnhappy] = useHappy()
  // ....
}

10.enum

枚举数据类型，可以通过他们的key来进行取值。

enum Color{
  Red,
  Green,
  Blue
}
let red:Color = Color.Red;
let blue:Color =Color[2]

11.null 和 undefined

null 和 undefined既是数据值也是TS的数据类型

let u: undefined = undefined;
let n: null =null;

12.unknown

unknown表示这个值可以是任何值。unknown的用法：在你想用any的时候，用unknown来代替。unknown是严格版的any。（unknown类型值不可以赋给任何值）

const isFalsy = (value:unknown) =>{
  // 对比上面的any 考虑这个console会不会报错
  console.log(value.mayNotExist)
  return value === 0?true:!value
}

13.never

never表示永不存在的值的类型。例如，never类型是那些总是会抛出异常或者根本就没有返回值的函数。

// 这个func返回的就是never类型，never用到的比较少。

14.interface

interface不是一种类型，应该被翻译成接口，或者说使用上面介绍的类型，创建一个自己的类型。

interface User {
  id:number,
  name:string
}

啥时候需要声明类型

理论上来说在我们声明任何变量的时候都需要声明类型（包括普通类型、函数、组件、hook、等等）。声明函数、组件、hook等需要声明参数和返回值的类型。

但是在很多情况下，TS可以帮我们自动推断。比如:

// 给定一个确定的类型值。这里虽然没有显示声明类型，但是TS推断这是个number类型
let a=1
// 自动推断返回值为number
function add(a: number,b:number){
  return a+b;
}
// 自动判断返回值为boolean
const isFalsy =(value:unknown) =>{
  retuen value ===0 ?ture :!value
}

.d.ts

JS文件 + .d.ts文件 ===ts文件

.d.ts文件自定义类型说明文件，可以让JS文件类型文件说明继续保持js文件身份，但依然可以享受TS的类型保护。

TypeScript学习笔记——常用类型