目录
TypeScript安装环境搭建
1. 下载node.js(下载LTS稳定版、Current最近版不稳定)
2. 安装node.js
3. 使用npm全局安装TypeScript:npm i -g typescript
4. 创建一个ts文件
5. 使用tsc对ts文件进行编译:cmd/终端 到当前ts文件所在目录 执行命令 tsc ts文件名.ts
TypeScript基本类型
类型声明
js
js是动态类型的语言,变量是没有类型的概念的,可以给变量赋值任何类型的值。
let a; a=10;a="hello word"
ts
特点:通过配置编译器,ts可以编译成任意版本的js。
优点:可以确保兼容性,更好的适应不同的浏览器。
ts中,声明一个变量a,同时指定他的类型为number,在以后的使用过程中a的类型只能是数值型。
先声明再使用:
let a:number; a=1; a="hello word" 报错,自动显示出错信息,number不能赋值字符串。
声明完直接使用:
let b:boolean = false;
let c= false; 如果变量的声明和赋值是同时进行的,ts可以自动对变量的类型进行检测。自动判断let c:boolean。
js中的函数是不考虑参数的类型和个数的,参数不确定时,会导致一系列错误。
function sum(a,b){return a+b}
console.log( sum(123,456) ) //输出:579
console.log( sum(123,"456") ) //输出:"123456"
ts中的函数参数规定参数类型和个数。ts的限制让代码更可控。
function sum(a:number,b:number){return a+b}
console.log( sum(123,456) ) //输出:579
console.log( sum(123,"456") ) 报错:Argument of type "456" is not assignable to parameter of type "number"
console.log( sum(123,456,789) ) console.log( sum(123) ) 报错
ts中也可以对函数返回值类型进行规定
function sum(a:number,b:number):number { return a+"hello" }
报错:Type "string" is not assignable to type "number"
字面量
也可以直接使用字面量进行类型声明
let a:10; a= 10 ; a = 11;报错,限制不能再修改,有点固定常量的意思
let b:'male' | 'female'; b ='male'; b = 'female';b='hello' 报错b为'female'或'male',联合类型。
any
any表示的是任意类型,可以任意类型。
一个变量设置为any后,相当于对该类型关闭了对该变量的ts类型检测
使用ts时,不建议使用any类型,尽量避免。
声明变量如果不指定类型,则ts会自动判断变量的类型为any,为隐式any。
显式any:let d= any;d=10;a=true;d='hello'
隐式any:let d;d=10;a=true;d='hello';
unknown
unknown表示未知类型的值。
let e:unknown;e=10;e=true;e='hello'
any和unknown区别
unknown实际就是一个类型安全的any
unknown类型的变量不能直接赋值给其他变量
let s:string;
s=d;d的类型是any,它可以赋值给任意变量,不会报错,把s的类型检测也关闭了
e='hello',s=e;报错s=e,Type 'unknown' is not assignable to type 'string'
想要unknown的变量赋值给其他变量怎么做?
方法一:添加类型判断
f(typeof e === 'string'){ s=e }
方法二:类型断言 ,可以用来告诉解析器变量的实际类型。语法:变量 as 变量 或 <类型>变量
s = e as string;
s = <string>e;
void
void用来表示空,以函数为列,就表示没有返回值的函数function fn():void{ }
function fn():boolean{ return true } 规定返回值类型
function fn():void{ return null} ; function fn():void{ return undefined }没有返回值的函数
function fn():void{ return true } 报错
never
never表示永远不会返回结果,连undefined和null都不返回,可以用来处理报错问题
function fn():never{ throw new Error('报错信息') }
object
object 表示一个js对象
{}用来指定对象中可以包含哪些属性,语法:{属性名:属性值,属性名:属性值}
对象的表示方法有:let a:object; a = {}; a = function(){}
let b:{name:string};b={'姓名'} ; b={} 报错:在{}里面没有找到name属性;b={name:'',age:''} 报错
let b:{name:string,age?:number},在属性后面添加?,表示该属性是可选的,可有可无
b={name:'小明'},b={name:'小明',age:11}都不会报错
定义对象的结构
[propName:string]:any 任意类型的属性 简化添加?的方式,
let c:{name:string,[propName:string]:any} c = {name:'小明',age:18,gender:'男'}
定义函数的结构
设置函数结构的类型声明:语法(形参:类型,形参:类型..)=>返回值
let d:(a:number,b:number)=>number;
d = function(n1:number,n2:number):number{ return n1+ n2 }
d = function(n1:number,n2:number):number{ return n1+ n2 }
array
array 数组的类型声明,两种表达方式 类型[ ] 或者 Array<类型>
let e:string[],string[]表示字符串数组,里面只能放string类型的,e= ['a','b','c']
let e:string[ ] 或 let e:Array<string>
tuple
tuple 元组,固定长度的数组,存储效率比数组好,语法:[类型,类型,类型]
let h:[string,string]; h = ["hello",'hello']
h = ["hello",'hello','hello'],h = ["hello",'hello',11] 报错,类型和数量都要对应
enum
enum 枚举,把所有可能的情况列出来
enum Gerder{ Male = 0,Famale = 1 } 定义枚举
let i:{name:string,gender:Gerder}
i = { name:'小明',gender: Gender.Male}
console.log(i.gender === Gender.Male)
&表示且、 | 表示或
let j:{ name:string } & { age:number };
j = {name:"小明",age:'18'}
j = {name:"小明"} 报错 ,多或少,类型不符合,都会报错。
类型的别名
类型的别名,简化类型的使用。
type myType01 = string;用myType代替string
type myType = 1 | 2 | 3 | 4 | 5;
let k : myType ;
let l : myType;
let m : myType;
总结
1. 类型声明是ts非常重要的一个特定。
2. 通过类型声明可以指定ts中变量(参数、形参)的类型。
3. 指定类型后,当为变量赋值时,ts编译器会自动检查值是否符合类型声明,符合则赋值,否则报错。
4. 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值。
5. 语法:
let 变量:类型;
let 变量:类型 = 值;
function fun(参数:类型,参数:类型):类型{ ...... }
6. 自动类型判断
ts拥有自动类型判断机制;
当对变量的声明和赋值是同时进行的,ts编译器会自动判断变量的类型。
所以如果对变量的声明和赋值是同时进行的,可以省略声明类型。
7. 类型
number | 数值 |
string | 字符串 |
boolean | 布尔 |
字面量 | 限制变量的值就是该字面量的值 |
any | 任意类型 |
unknown | 类型安全的any |
void | 没有值(或undefined) |
never | 不能是任何值 |
object | 任意的js对象 |
array | 任意的js数组 |
tuple | 元组,ts新增类型,固定长度数组 |
enum | 枚举,ts中新增类型enum{A,B} |