TypeScript基本类型和语法

目录

TypeScript安装环境搭建

TypeScript基本类型

类型声明

js

ts

字面量

any

unknown

any和unknown区别

想要unknown的变量赋值给其他变量怎么做？

void 

never

object

定义对象的结构

定义函数的结构

array

tuple

enum

&表示且、 | 表示或

类型的别名

总结 

---

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}