TS基础语法 - 技术栈

前言：

因为在写前端的时候，发现很多UI组件的语法都已经开始使用TS语法，不学习TS根本看不到懂，所以简单的学一下TS语法。为了看UI组件的简单代码，不至于一脸懵。

一、安装node

对于windows来讲，node版本高点还好，对于linux（centos7）来讲，尽量使用node16或者node18版本，太高linux的动态库不支持，需要升级动态库

shell 复制代码

E:\vuecode\练习>node -v
v18.12.1

二、安装typescript

typescript 复制代码

E:\vuecode\练习>npm -g install typescript
added 1 package in 672ms

#查看版本
E:\vuecode\练习>tsc -v
Version 5.3.3

三、基本语法

1.数据类型

1.1 声明变量

ts最大的特点就是声明了数据类型。样例代码如下：

声明数字类型和字符串类型

typescript 复制代码

let n1: number
n1 = 10

let s1: string
s1 = "hello world"

console.log(n1,s1)

将ts文件编译成js文件，并运行js文件

typescript 复制代码

E:\vuecode\练习>tsc test1.ts  
E:\vuecode\练习>node test1.js
10 hello world

1.2 自动识别类型

这里没有声明变量的类型，在将字符串赋值给n1的时候，ts的编译器检测出了语法问题

typescript 复制代码

let n1 = 10
console.log(n1)

n1 = "hello world"
console.log(n1)

typescript 复制代码

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 任意类型

typescript 复制代码

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的取值范围

typescript 复制代码

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的赋值类型范围

typescript 复制代码

let a: number | string
a = 1
a = "hello"

#这样超出了a的取值类型范围
a = true

2.3 unknown

typescript 复制代码

let a: unknown
a = "hello"
console.log(a)

a = 1
console.log(a)

a = true
console.log(a)

unknow的二次赋值

typescript 复制代码

let a: unknown
a = "hello"

此时将unknown类型的a 赋值给b就不可以了。因为类型不匹配
let b: string
b = a

解决办法有两种
1.类型断言
b = a as string

2.声明变量的类型
b = <string>a

2.4 void

void表示空，一般用于函数没有返回值

typescript 复制代码

function test(): void {
    console.log(111)
}

2.5 never

什么值都没有，空也不会返回

3.对应js的类型的ts类型

3.1 object

object表示js中的对象，在开发中object使用的比较少。因为限制变量是不是对象的情况比较少，主要是限制对象中的属性的类型以及属性的数量。

3.1.1 基本定义：

不限制对象中属性的数量以及属性值的类型

写法1：

typescript 复制代码

let o1: {} #或者 let o1: object
o1 = {name: "zhangsan",age: 20}
console.log(o1)

写法2：

表示对象中可以有任意string类型的key，值的类型为任意

typescript 复制代码

let b: {[anyname: string]: any}
b = {name: "zhangsan",age: 20, gender:"男"}
console.log(b)

3.1.2 限定对象的属性数量

正确赋值

typescript 复制代码

let a: {name: string}
a = {name: "zhangsan"}
console.log(a)

错误赋值，因为对象限制了属性只有name

typescript 复制代码

let a: {name: string}
a = {name: "zhangsan",age: 20}

3.1.3 设定可选属性

有这种场景，设定了对象中有多个属性，一个必须的，其他的可以不传递。也可以传递。

其中属性名后边的 "?" 就是设定属性为可选属性

typescript 复制代码

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 设定固定属性，其余属性不定长

typescript 复制代码

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 数组

定义方式一：

typescript 复制代码

let a1: number[]
a1 = [1,2,3,4,5]
console.log(a1)

定义方式二

typescript 复制代码

let a2: Array<number>
a2 = [1,2,3,4,5]
console.log(a2)

3.2 元组

元组和数组的区别是元组的的长度是固定的

typescript 复制代码

let t1: [string,number]
t1 = ["zhangsan",10]

4.type关键字

type的作用主要是给数据类型起一个别名

例如：

typescript 复制代码

type num = number
let n1: num = 10

console.log(n1)

5.反引号

反引号是ES6中的模板字符串。

这是比较常用的一种，在字符串中插入变量

typescript 复制代码

let name1 = "zhangsan"
let age  = 20

console.log(`我的名字叫${name1},我${age}岁了`)

四、泛型

1.定义使用泛型

在定义函数或者是类时，对于类型不明确的时候就就可以使用泛型。例如：

typescript 复制代码

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的上边，可以看到它们的类型。也就说你传递的什么类型的值，就返回什么类型的值

typescript 复制代码

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无法自动推断出类型时，需要手动声明传递的参数的类型，代码如下

typescript 复制代码

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})