个人主页网站制作免费,做网站费用计入什么,赣州房产网站建设,西宁网站建设哪家公司好前言#xff1a;
因为在写前端的时候#xff0c;发现很多UI组件的语法都已经开始使用TS语法#xff0c;不学习TS根本看不到懂#xff0c;所以简单的学一下TS语法。为了看UI组件的简单代码#xff0c;不至于一脸懵。
一、安装node
对于windows来讲#xff0c;node版本高…前言
因为在写前端的时候发现很多UI组件的语法都已经开始使用TS语法不学习TS根本看不到懂所以简单的学一下TS语法。为了看UI组件的简单代码不至于一脸懵。
一、安装node
对于windows来讲node版本高点还好对于linuxcentos7来讲尽量使用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 worldconsole.log(n1,s1)将ts文件编译成js文件并运行js文件
E:\vuecode\练习tsc test1.ts
E:\vuecode\练习node test1.js
10 hello world1.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 true2.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 stringa2.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: Arraynumber
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 testT(content: T): T{return content
}解释 定义函数test的时候不能确定content参数的类型是什么类型这时候使用泛型 第一个T 是定义了一个泛型T 第二个T 是定义content参数是一个泛型类型的参数 第三个T 是定义 返回值的类型是T类型
2.使用
2.1 方式1
利用ts的对数据类型的自动推断功能进行传值将鼠标分别放在r1,r2,r3,r4的上边可以看到它们的类型。也就说你传递的什么类型的值就返回什么类型的值
function testT(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 testT(content: T): T{return content
}向test函数声明传递的参数为string
let r1 teststring(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})
