快捷搜索: 长连接 前端 源码 pan

TS基本类型

一、在编写ts代码之前要先搭建typescript环境

1.安装node

2.使用npm全局安装typescript

npm i -g typescript

3.准备工作做好就可以编写ts啦,但是ts最后还是要编译成js在浏览器里运行的

创建ts文件:hello.ts

进入 hello.ts文件所在目录编译成js文件:tsc hello.ts

二、ts基本类型

let a: number
a = 10
// a = 213 如果定义变量时定义了类型,后续对变量修改时不能修改为其他类型

let b = false
b = true
// b = 123 如果定义变量的同时也赋值了,那么ts可以自动对便变量进行类型检测

// 除了可以给变量设置类型,也可以对函数的参数设置类型
function add(a: number, b:number){
  return a + b
}
add(123, 456)
// add(132, 456) 必须传number类型
// add(123, 7, 8) 参数个数不对

// 可以对函数的返回值设置类型
function sub(a: number, b:number): number{
  return a - b
}

// 字面量 只能是这几种
let c: boolean | number | string
c = true
c = 23
c = 123

// any 任意类型【不建议使用】 对一个变量设置了any类型后,相当于对该变量关闭了ts的类型检测
// 若将any类型的变量赋值给其他变量后,也会导致其他变量变为any类型
let d: any //显式any
// let d  隐式any,只声明不赋值
d = 10
d = hello
d = false

// unknown 是一个类型安全的any
let e: unknown
e = 10
e = hello
e = false
// unknown类型的变量不能直接赋值给其他变量,可以通过以下三种方式给其他变量赋值
let s: string
if(typeof e === string){
  s = e
}
s = e as string // 类型断言,可以告诉解析器变量的实际类型
s = <string>e

// void用来表示空,以函数为例,就表示没有任何返回值的函数
function fn1(): void{
  
}

// never 表示永远不会有返回结果
function fn2(): void{
  throw new Error(报错了!)
}
 

// object对象,js中万物皆对象【不常用】
let f: object
f = {}
f = function (){}
// {}可以用来指定对象中包含哪些属性
let g: {name: string, age: number} //意思是给g赋值时必须是个对象,且对象中必须有name和age两个属性,且属性的类型要满足要求
g = {name: 美少女, age: 18}
let h: {name: string, age?: number} //属性后面带?表示属性是可选的
h = {name: 美少女}
let i: {name: string, [propoName: string]: any} //[propoName: string]: any表示任意类型的属性【常用来定义对象的结构】
i = {name: 美少女, hobby: [吃饭, 睡觉 , 打游戏], isStudent: true}

// 设置函数结构的类型声明
let j: (a: number, b: number) => number //两个入参都是number类型,返回值也是number类型
j = function(n1, n2): number{
  return n1 + n2
}

// 数组
let k: string[] //string[]表示字符串数组,数组中只能存放字符串,其他类型不可以
k = [a, b, c]
// 或者
let l: Array<number> //Array<number>表示数字类型的数组
l = [1, 2, 3]

// 元组:固定长度的数组
let m: [string, number]
m = [123, 123] 

// enum枚举
enum Gender {
  Male  = 0,
  Female = 1
}
let n: {name: string, gender: Gender}
i = {name: 美少女, gender: Gender.Male}

// &:同时
let o: {name: string} & {age: number}
o = {name: 美少女, age: 16}

// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5
let p: myType //p只能是myType中的任意值 
p = 3

ts官方文档:

经验分享 程序员 微信小程序 职场和发展