TS Playground

他包含了js的基本类型：number，string，null，undefined，bigint，symbol，boolean，object

const a:number = 1
const b:string = '1'
const c:null = null
const d:undefined = undefined
const e:bigint = 123456n
const f:symbol = symbol('hallo')
const g:boolean = false
const x:object = {} // 
const x:Array<number | string | boolean> = [1,'2',false] //泛型
//函数
const add = (a:number,b:number):number => a+b
const add = (a:number,b:number) => number = (a,b) => {a+b}
//type声明
type ADD = {(a:number,b:number) => number}
const add:Add = (a,b) => {a+b}
//interface 声明 使函数有多个属性
interface AddWithProps{
  (a:number,b:number):number
  xxx:string
}
const add:AddWithProps = (a,b) => a + b
add.xxx = '123'

还额外有一些TS额定类型：any，unknow，void，never，tuple，enum

//never
type a = number & stringl
let b:a = 123
//unknow
type C = {name:string}
let a:unknow = //JSON.parse('{"name":"Jerry","age",:"18"}')
(a as C).name 
//使用前不知道类型
//void 一般指函数返回一个空
let print:() => void = function(){console.log('hallo')}
//断言
let p:string = '123'
(p as any).push(456)
//元组tuple
let p:[number,number] = [100,200]
(p as any).push(456)
//枚举enum
enum Color {Red, Green, Blue}
let c: Color = Color.Green; //1
//按下标输出

npm install typescript --save-dev
//
yarn add --dev typescript
//
pnpm i -g typescript

第三方库的.d.ts文件可以快速查找函数的接受类型，还有很好的代码提示功能

联合类型’|’和交叉类型’&’

//联合类型
type A ={
  name:string;
  age:number
}
type B = {
  name:string;
  gender:string
}
const a = (x : A | B)=>{
  if(typeof x === 'number'){
    x.toFixed()
  }else{}
}
//交叉类型
type A = {name:string} & {age:number} //用于交叉复杂类型
const a:A = {
  name:'jack',
  age:23
}

泛型

//广泛的类型
type A<T> = T | T[]
type A<T> = (a:T,b:T) =>T
const ADD:A<number> = (a,b)=> a + b 
const ADD:A<string> = (a,b)=>a + ' ' + b

React 的 FunctionComponent泛型

重载

function SUM (a:number,b:number):number;
function SUM (a:string,b:string):string;
function SUM (a:any , b:any):any {
  //两种判断方式
  //if(arguments.length===1)
  //if(typeof a === 'number')
}