安装 npm install typescript -g
查看版本 tsc --version
新建ts 文件 （记得导出）
typescript 定义时可指定 变量类型 在名称后面加引号 和 类型
格式为 let 名称: 类型 = 值 （例如： let name:string = ‘张三’）
类型 string 首字母为小写
let message: string = '张三'
console.log(message, '------')
let name = 123
name = 66
export {}
运行 tsc xxxx 并在html中引入
<html>
<head></head>
<body>
<h1>哈哈哈哈</h1>
</body>
<script src="xxxxx"></script>
</html>
在 ts 中不定义 类型 会默认赋值 值的类型
例如 let name = 123 则默认 name的类型是 number
但 使用 const 赋值时 会默认返回 字面量类型
例如 const name = 1.88 则默认 name的类型是 1.88 等同于 const name:1.88 = 1.88
所以：let 推导出来的是通用类型，const推导出来的是字面量类型
Array
//明确的指定<数组>的类型注解：两种写法
// 1.string[]: 数组类型，并且数组中存放的是字符串
let list: string[] = ['张三','李斯']
list.push('王五')
//2. Array<number> 数组类型，并且数组中存放的是number
let arr:Array<number> = [0,1,2]
arr.push(9)
export {}
Object
let info: {
name: string
age: number
} = {
name: '青子',
age: 18
}
console.log(info.name)
// 可以通过 type 定义
type infos = {
names: string
ages: number
}
let info1: infos = {
names: '陆景',
ages: 18
}
console.log(info1.ages)
export { }
使用
// z? 为可传值，不是必传
type obj = {
x: number
y: number
z?: number
}
function getNum(val: obj) {
return val.x + val.y
}
getNum({ x: 1, y: 2 })
export { }
函数的类型
参数
function getInfo(num1:number,num2:number){
return num1 + num2
}
getInfo(5,6)
export {}
返回值
//返回值可以明确指定，也可以自动进行推导
function getInfo(num1:number,num2:number):number{
return num1 + num2
}
let val = getInfo(5,6)
console.log(val)
export {}
匿名参数
const names = ['abc','cds','opp']
//匿名函数最好不要添加注解类型
names.forEach(function(item,index,arr){
console.log(item,index,arr)
})
export {}
使用
type val = {
time: number
text: string
}
function getList(value: string) {
let arr: val[] = []
arr.push({ time: 111, text: '你好' })
return arr
}
let list = getList('oioioio')
list.map(item => {
console.log(item.time, item.text)
})
export {}
any
//any表示不限制任意类型
let id: any = 44
id = "text"
id = []
console.log(id.length)
export { }
unknown
let foo:unknown = 'pp'
foo = 123
//要求必须进行类型的校验
if( typeof foo === 'string'){
console.log(foo.length)
}
export{}
void
// 没有返回值的时候
function foo(num:number,num1:number):void{
console.log(num+num1)
}
export {}
never
// 一般情况下不会使用never ,never表时不会返回任何值
// 封装工具的时候可以使用
function getFoo(message: number | string) {
switch (typeof message) {
case "string":
console.log(message.length)
break
case "number":
console.log(Number(message))
break
default:
const check: never = message
}
}
getFoo(123)
export{}
tuple
//元组类型，元组数据结构中可以存放不同的数据类型，取出来的item也是有明确的类型
const info:[string,number,number] = ['zs',18,1.88]
const value = info[1]
export{}
联和类型的使用
//有的情况下一个值可能是number 也可能是string 类型，这种情况下就可以使用联合类型
let id: number | string = 123
id = 'aaa'
//范围缩小
if(typeof id === 'string'){
console.log(id.length)
}
export{}
类型别名的使用type
// type 类型的别名
type val = number | string
let id: val = '123'
id = 456
export { }
接口声明的使用interface
//type 直接赋值
type info = {
x: number
y: number
z?: number
}
//interface 声明
interface info1 {
x: number
y: number
z?: number
}
function getFoo(val:info1){
return val.x + val.y
}
getFoo({x:1,y:2})
export{}
别名和接口的区别
//区别一：type类型使用范围更广，接口类型只能用来声明对象
type info = number
type info1 = string[]
//区别二 : interface 可以多次声明,可以继承
interface Ikun {
x: number
y: number
}
interface Ikun {
z?: number
}
export { }
交叉类型的使用
//交叉类型，满足两个或多个条件
interface info {
name: string,
age: number
}
interface Ikun {
running: () => void
}
type NewType = info & Ikun
let list: NewType = {
name: '张三李斯',
age: 15,
running: function () {
return '你干嘛！哎哟'
}
}
export {}
类型断言
// 获取DOM 元素 <img calss="img"/>
//使用类型断言
//类型断言规则：断言只能断言成更加具体的类型，或者不太具体（any/unknown)类型
const imgEl = document.querySelector(".img") as HTMLImageElement
imgEl.src = "xxx"
imgEl.alt = 'yyy'
export {}