哈尔滨网站建设设计公司wap网站制作方案
前言：
因为在写前端的时候，发现很多UI组件的语法都已经开始使用TS语法，不学习TS根本看不到懂，所以简单的学一下TS语法。为了看UI组件的简单代码，不至于一脸懵。
一、安装node
对于windows来讲，node版本高点还好，对于linux（centos7）来讲，尽量使用node16或者node18版本，太高linux的动态库不支持，需要升级动态库
E:\vuecode\练习>node -v
v18.12.1
二、安装typescript
E:\vuecode\练习>npm -g install typescript
added 1 package in 672ms#查看版本
E:\vuecode\练习>tsc -v
Version 5.3.3
三、基本语法
1.数据类型
1.1 声明变量
ts最大的特点就是声明了数据类型。样例代码如下：
声明数字类型和字符串类型
let n1: number
n1 = 10let s1: string
s1 = "hello world"console.log(n1,s1)
将ts文件编译成js文件，并运行js文件
E:\vuecode\练习>tsc test1.ts
E:\vuecode\练习>node test1.js
10 hello world
1.2 自动识别类型
这里没有声明变量的类型，在将字符串赋值给n1的时候，ts的编译器检测出了语法问题
let n1 = 10
console.log(n1)n1 = "hello world"
console.log(n1)
E:\vuecode\练习>tsc test1.ts
test1.ts:4:1 - error TS2322: Type 'string' is not assignable to type 'number'.4 n1 = "hello world"~~
2.特殊数据类型
2.1 any 任意类型
let a: any = 1
console.log(a)a = "hello world"
console.log(a)a = true
console.log(a)a = [1,2,3,4]
console.log(a)执行结果如下
E:\vuecode\练习>node test1.js
1
hello world
true
[ 1, 2, 3, 4 ]
开发中不建议使用any类型
2.2 联合类型
限定了a的取值范围
let a: 1 | 2
a = 1
console.log(a)a = 2
console.log(a)#这里会报错，不能将3赋值给a
let a: 1 | 2
不能将类型“3”分配给类型“1 | 2”。ts(2322)
a = 3
console.log(a)
限定a的赋值类型范围
let a: number | string
a = 1
a = "hello"#这样超出了a的取值类型范围
a = true
2.3 unknown
let a: unknown
a = "hello"
console.log(a)a = 1
console.log(a)a = true
console.log(a)
unknow的二次赋值
let a: unknown
a = "hello"此时将unknown类型的a 赋值给b就不可以了。因为类型不匹配
let b: string
b = a解决办法有两种
1.类型断言
b = a as string2.声明变量的类型
b = <string>a
2.4 void
void表示空，一般用于函数没有返回值
function test(): void {console.log(111)
}
2.5 never
什么值都没有，空也不会返回
3.对应js的类型的ts类型
3.1 object
object表示js中的对象，在开发中object使用的比较少。因为限制变量是不是对象的情况比较少，主要是限制对象中的属性的类型以及属性的数量。
3.1.1 基本定义：
不限制对象中属性的数量以及属性值的类型
写法1：
let o1: {} #或者 let o1: object
o1 = {name: "zhangsan",age: 20}
console.log(o1)
写法2：
表示对象中可以有任意string类型的key，值的类型为任意
let b: {[anyname: string]: any}
b = {name: "zhangsan",age: 20, gender:"男"}
console.log(b)
3.1.2 限定对象的属性数量
正确赋值
let a: {name: string}
a = {name: "zhangsan"}
console.log(a)
错误赋值，因为对象限制了属性只有name
let a: {name: string}
a = {name: "zhangsan",age: 20}3.1.3 设定可选属性
有这种场景，设定了对象中有多个属性，一个必须的，其他的可以不传递。也可以传递。
其中属性名后边的 “?” 就是设定属性为可选属性
let o1: {name: string,age?:number,gender?:string}
o1 = {name: "zhangsan"}
console.log(o1)o1 = {name: "lisi",age: 20}
console.log(o1)o1 = {name: "wangwu",gender:"boy"}
console.log(o1)o1 = {name:"张无忌",age: 100, gender:"boy"}
console.log(o1)执行结果如下：
E:\vuecode\练习>tsc test1.ts
E:\vuecode\练习>node test1.js
{ name: 'zhangsan' }
{ name: 'lisi', age: 20 }
{ name: 'wangwu', gender: 'boy' }
{ name: '张无忌', age: 100, gender: 'boy' }
3.1.4 设定固定属性，其余属性不定长
let o1: {name: string,[anyname: string]: any}
o1 = {name: "zhangsan",age: 20 ,gender: "girl",class: 3}
console.log(o1)E:\vuecode\练习>tsc test1.ts E:\vuecode\练习>node test1.js
{ name: 'zhangsan', age: 20, gender: 'girl', class: 3
3.2 数组
定义方式一：
let a1: number[]
a1 = [1,2,3,4,5]
console.log(a1)定义方式二
let a2: Array<number>
a2 = [1,2,3,4,5]
console.log(a2)
3.2 元组
元组和数组的区别是元组的的长度是固定的
let t1: [string,number]
t1 = ["zhangsan",10]
4.type关键字
type的作用主要是给数据类型起一个别名
例如：
type num = number
let n1: num = 10console.log(n1)
5.反引号
反引号是ES6中的 模板字符串。
这是比较常用的一种，在字符串中插入变量
let name1 = "zhangsan"
let age = 20console.log(`我的名字叫${name1},我${age}岁了`)
四、泛型
1.定义使用泛型
在定义函数或者是类时，对于类型不明确的时候就就可以使用泛型。例如：
function test<T>(content: T): T{return content
}
解释：
定义函数test的时候，不能确定content参数的类型是什么类型，这时候使用泛型
第一个T 是定义了一个泛型T
第二个T 是定义content参数是一个泛型类型的参数
第三个T 是定义 返回值的类型是T类型
2.使用
2.1 方式1：
利用ts的对数据类型的自动推断功能，进行传值，将鼠标分别放在r1,r2,r3,r4的上边，可以看到它们的类型。也就说你传递的什么类型的值，就返回什么类型的值
function test<T>(content: T): T{return content
}let r1 = test(10)
let r2 = test("hello")
let r3 = test([1,2,3,"hello"])
let r4 = test({name:"zhangsan"})
2.2 方式2:
当有时候，当给函数传递的类型比较复杂时候，TS无法自动推断出类型时，需要手动声明传递的参数的类型，代码如下
function test<T>(content: T): T{return content
}向test函数声明传递的参数为string
let r1 = test<string>("hello")向test函数声明传递的参数为一个内容包含数字和字符串的数组
let r2 = test<(number|string)[]>([1,2,3,"hello"])向test函数声明传递的参数为一个只有name和age的对象
let r3 = test<{name:string,age:number}>({name: "zhangsan",age: 20})