基本配置:编写一个ts文件,用tsc 命令将ts文件转换为js文件,再用node 命令运行, 如果想要简便一些,使用npm i -g ts-node命令来全局安装一个东西,安装之后不用使用tsc命令转换了,直接使用ts-node命令直接就可以运行。
typescript的静态类型: 在一个变量后加上“:”和“要赋予的数据类型(eg: number,string)”用来规定这个变量能够所赋值的数据类型。其实这就是后面说的类型注解。
typescriptd 的静态类型分为基础静态类型和对象静态类型 。
基础静态类型:
const a : string意思是a必须赋值一个string类型的值
const b : number 意思是b必须赋值一个number类型的值
对象静态类型:
const hanwen : {name:string,age:number} = {name:"hanwen",age:18}//普通的对象静态类型
class Person{}
const hanwen0 : Person = new Person //类类型
const hanwen1:string []= ["a","b","c"]//数组类型,意思是hanwen1是一个数组,而且数组里面的值都要是string类型
const hanwen2 : ()=>string = ()>{return 'aaa'}//函数类型,意思是hanwen2必须是一个箭头函数,而且返回值必须是string类型
类型注解和类型推断:上面所说的":+数据类型"其实就是类型注解,也就是规定变量的数据类型。而类型推断 就是系统自动推断出这个变量的类型的行为。
函数参数注解和返回类型注解:
function hanwen(one : string) {}//表示传的参数要是string类型
function hanwen(one ) : number {}//表示函数返回值是number类型
function hanwen({one,two}:{one:number,two:number})
{
return one + two
} //传递的参数如果是对象就必须用:{}来对对象里的属性进行类型注解
数组类型的注解方法:要对一个数组里面的值注解为数字
const a : number[] = [1,2,3,4]
要对一个数组里面的值注解为对象
const a : {name:string,age:number}[]=[ {name:hanwen,age:18}, {name:hanwen,age:18}, {name:hanwen,age:18} ]
但是注解为对象感觉还是麻烦怎么办,这时也有一个方法,就是类型别名。 类型别名
type aLias :type Lady = {name:string,age:number}
有了类型别名就可以const a : Lady[]=[{},{},{}]
其实用类也可以
class madam = {name:string,age:number}
const a : madam[]=[{},{},{}]
元组:什么是元组,可以说元组其实就是一个数组的加强版,比如
const a = ["hanwen","man",18],
当变成["hanwen",18,"man"]的时候依旧可以运行,
因为类型注解为:(string | number)[],不会强制规定输入类型的顺序
我们可以const a: [string,string,number]= ["hanwen","man",18]
这个时候就规定了数组里的每个数据类型。
但是现在一般很少用,因为类似这种我们都是用对象来规定它。
接口:什么时候用到接口呢?在这之前,我们在打代码的过程中总会遇到一些重复性的代码,而考虑到代码的可重用性,我们通常是把这个重复的代码封装到一个对象,这个对象就受到接口的约束。
eg:const screenResume = (name:string,waist:string,age:number)=>{
waist<90&&console.log(name+"进入面试") }
const getResume = (name:string,waist:string,age:number)=>{
console.log(name+"的年龄是"+age) console.log(name+"的腰围是"+waist)
}
以上(name:string,waist:string,age:number)就是重复的部分,考虑代码的可重用性,我们通常先定义一个接口
interface Girl{
name:string,
waist:number,
age:number
}
//const girl = { name:"lisi",waist:99,age:18 }
之后就可以这么写
const screenResume = (girl:Girl)=>{
girl.waist<90&&console.log(girl.name+"进入面试")
}
const getResume = (girl:Girl)=>{
console.log(girl.name+"的年龄是"+girl.age) console.log(girl.name+"的腰围是"+girl.waist)
}
如果还想加一个例子可以这么写
interface Girl{
name:string,
waist:number,
age:number,
bust ?:number
} //接口中最后的“?:”代表这一属性的值可有可没有,不会报错。