王欣网站建设与维护,phpcms 手机网站,网站运营和管理,办公管理系统oaTypeScript基础语法入门
TypeScript究竟是什么#xff1f;
他主要就是想把JavaScript里面不完美的一些语法来进行一个提升
就像官网中所说的 TypeScript is JavaScript with syntax for types. 例如我们看下面的这段代码
if ( 0) {console.log(hello)
}在Jav…TypeScript基础语法入门
TypeScript究竟是什么
他主要就是想把JavaScript里面不完美的一些语法来进行一个提升
就像官网中所说的 TypeScript is JavaScript with syntax for types. 例如我们看下面的这段代码
if ( 0) {console.log(hello)
}在JavaScript里面会打印出来hello因为在比较的时候会进行类型转换。
下面在看一个更加诡异的
function compare(x){if (1x3){console.log(hello)}
}
compare(41)这个很简单。首先是比较1是否小于41 之后会转换为true
true3这个会转换为13 所以就会进行打印了
typescript就是在JavaScript的基础上。引入了类型的概念。做了一些优化
我们把之前写的代码放入到ts中
可以发现有明显的报错 之后我们再看一个例子首先看他的JavaScript版本
function getDistance(point1, point2) {return [point2.x - point1.x, point2.y - point1.y]
}getDistance({x: 1,y: 1
}, {x: 2,y: 2
});下面来看typescript
type Point{x:number,y : number}
function getDistance(point1:Point, point2:Point) {return [point2.x - point1.x, point2.y - point1.y]
}
getDistance({x: 1,y: 1
}, {x: 2,y: 2
});假设我们再JavaScript里面传了一个字符串。一个错误的参数JavaScript里面是无法校验的。
但是在ts里面 就会直接报错了
所以我们来进行一个总结对于typescript他的特点
更容易帮助我们发现程序里的问题语法提示更加完善有了类型之后写代码非常爽语义更强代码可读性更高
从静态类型校验的角度理解
在官网中。写的这门语言的一个特点
Static Type Checker 静态类型校验能力
一门语言在代码执行之前。就能做错误预警那么我们就说这个语言具有静态校验能力
TS 约等于 JS Static Type Checker
基础类型快速入门
首先看几个基础的类型的定义
//基础类型 String number boolean
const teachName:stringzhang san
const teachAge:number28
const isMale:booleantrue下面我们来看数组类型如何定义
//数组类型
const numberArr:number[][1,2,3,4,5,6]
const stringArr:string[][a,b,c]
const booleanArr:Arrayboolean [true,false] //泛型之后我们再来看看对象类型
//对象类型
const user:{name : string,age : number
}{name:zhangsan,age:18
}
const userOne:{name : string,age? : number//添加问号代表着age可选
}{name:dell,}以及联合类型
//联合类型
function union(id:string|number){//id既可以是string也可以是numberif (typeof id string){ //类型收窄 Narrowingconsole.log(id.toUpperCase())}else {console.log(id)}
}除了这些之外还有一些代码上的快捷。
例如类型别名
//类型别名
type User {name:string,age : number
}
const userTwo:User{name : dell,age:18}
const userThree:User{name : dell,age:18}这是为了解决类型复用所产生的一个用法
下面我们来看any类型 如果不写any类型的话默认也会推断成any类型的但是最好也是手动的去写上。这样有利于代码的可读性
function showMessage(message:any){//any代表什么类型都可以console.log(message)
}之后我们来看函数类型
//函数类型
function abc(message:string):number{return 123
}这个就是约定了返回值。
还可以用箭头函数这样写
const def:(age:number)number(age : number){//接受一个number类型的age参数返回值必须是numberreturn age
}下面我们来讲接口类型 interface
//接口类型 Interface
interface Stu{age:number;sex:string;
}
const stu:Stu {age : 18,sex : 男}有点像刚才的对象类型其实很类似。包括和类型别名也很相似。
但是接口有一个特点就是可以继承
interface OldStudent extends Stu{name : string;
}下面来看交叉类型
//交叉类型
type EmployeeUser{salary:number}
const employee:Employee {age : 18,name : zhangsan,salary:1}之后来看断言
//断言 Assersion
const dom:undefineddocument.querySelector(#root) as undefined
const testString:string123 as any as string;
const dom1:undefinedundefined document.querySelector( #root)之后来看字面量类型
//字面量类型
const str:asdasd
const truthy:truetrue
function getPosition(position:left|right):string {return position
}
getPosition(left)这个类型很有意思。我们来看一个练习题。
function request(url:string,method : GET|POST):string{return sending request
}
const params:{url : string,method : string}{url:immoc.com,method : GET}
request(params.url,params.method)假如是这样写的话虽然说params.method是GET但是因为在定义的时候method是string类型的。所以就会报错。 如果修改method的类型定义就不会报错了
function request(url:string,method : GET|POST):string{return sending request
}
const params:{url : string,method : GET|POST}{url:immoc.com,method : GET}
request(params.url,params.method)第二种我们可以用断言语法
request(params.url,params.method as GET)下面我们来看null和undefined
//null undefined
const testobject:nullnull
const test2object:nullundefined默认情况下null和undefined是可以转换的。
之后来看void
//void
function getNumber():void{}就是这个函数是一个无返回值
类型注解和类型判断
//TS开发准则:只要是变量或者对象属性都应该有一个明确的类型//类型注解 人工的告诉TS 变量或者对象的明确属性类型
const userName:string123//类型推断
const userAge18//如果类型推断能够自动推断出来类型就没有必要手写类型注解
const userNickdeelfunction getTotal(paramOne:number,paramTwo:number){return paramOneparamTwo
}ction getNumber():void{
} 就是这个函数是一个无返回值### 类型注解和类型判断ts
//TS开发准则:只要是变量或者对象属性都应该有一个明确的类型//类型注解 人工的告诉TS 变量或者对象的明确属性类型
const userName:string123//类型推断
const userAge18//如果类型推断能够自动推断出来类型就没有必要手写类型注解
const userNickdeelfunction getTotal(paramOne:number,paramTwo:number){return paramOneparamTwo
}
