TS 基本类型以及如何给函数和对象加类型

1. TS是什么，TS和JS有什么区别？

TS是JS的超集。JS=JS+类型系统。
使用TS，编辑器可以实时检查代码的类型，避免类型错误。
使用TS，编辑器提供更精准的自动补全。

2. TS 如何运行？

ＴＳ运行到浏览器的原理：

ts代码，通esbuild或者swc或者tsc进行类型擦除，变成es6的JS代码
es6通过babel转译成es5
es5通过webpack打包成可执行的单文件js就可以在浏览器运行

如果是学习ts，做简单的练习。可以使用TS在线编辑器 TS官方演练场：www.typescriptlang.org/zh/play
使用本地编辑器+浏览器在本地新建一个vite的项目，选择TS模板

# npm 7+, extra double-dash is needed: 
npm create vite@latest my-vue-app -- --template vanilla-ts
# yarn
yarn create vite my-vue-app --template vanilla-ts

node + 插件node-ts ,swc-node这样node也可以运行TS文件

3. TS的类型

// JS 类型
numbe string boolean null undefined symbol bigint object
// 额外新增的TS独有类型
any unknown never enum void
// 自定义类型接口
interface 
// 类型别名 
type 
// 联合类型 
number|string

4. type,interface的区别

interface是定义的一个新的类型，type只是类型的别名 interface可以用来描述对象，不能描述基本类型 interface可以扩展，新增字段会自动合并到原类型 type一旦初始化，无法重新赋值。

 interface A1{name:string}
 interface A1{age:number}
 // 这样写会得到一个合并的类型
 interface A1{name:string,age:number}
 // 用type实现相同功能
 type A1={name:string}
 type A2=A1&{age:number}

any 和 unknown 的区别

any是为了兼容JS创造的一个全知全能的类型。any可以是任意类型和集合。使用any会跳过类型检查，不报错。 unknown表示一个未知类型，它属于一个顶层类型。当你要直接调用这个类型的变量的方法的时候，会报错，需要进行类型收窄

never

never 表示一个空集

void

当函数没有返回值的时候，返回值的类型写成void

ts描述数组,元组（已知数量的数组）

number[] Array<number> [string,string]

ts描述对象

type A1={[K:string]:string}
type A2=Record<string,string>

ts 枚举类型 enum

enum 本质是一个映射.
enum Statu {
    "todo"=0,
    "delete"=100,
    "loading"
}
const statu:Statu=Statu.delete
console.log(statu)

ts描述函数

// 1. 先写类型，再写函数
type Fn=(a:number,b:number)=>number
const fn:Fn=(a,b)=>a+b
// 2. 函数类型写一起
const fn2=(a:number,b:number):number=>{
   return a+b
 }
// 3.有属性的函数
type F={
   (a:number,b:number):number
   count:number
}
const f=(a,b)=>a+b
f.count=1
// 4.带this的函数
 type Person={name:string}
type FnWithThis=(this:Person,word:string)=>void
const fn:FnWithThis=function(word){
    console.log(this.name+word)
}
fn.call({name:"xxd"},":hello")

细节：

用type定义函数类型用“=>”,
函数类型写一起用“:”,
用对象的形式定义函数用“:”,
定义含有this的函数，使用“this”关键字。调用的时候需要传入this。使用.call,.apply,.bing来绑定this

Typescript 全解学习（1）

TS 基本类型 以及 如何给函数和对象加类型