TypeScript基础语法入门
TypeScript究竟是什么？
他主要就是想把JavaScript里面不完美的一些语法来进行一个提升
就像官网中所说的
TypeScript is JavaScript with syntax for types.
例如我们看下面的这段代码
1
2
3
| if ("" == 0) {
console.log('hello')
}
|
在JavaScript里面，会打印出来hello，因为在比较的时候，会进行类型转换。
下面在看一个更加诡异的
1
2
3
4
5
6
| function compare(x){
if (1<x<3){
console.log('hello')
}
}
compare(41)
|
这个很简单。首先是比较1是否小于41 之后会转换为true
true<3这个会转换为1<3 所以就会进行打印了
typescript就是在JavaScript的基础上。引入了类型的概念。做了一些优化
我们把之前写的代码放入到ts中
可以发现有明显的报错
之后我们再看一个例子，首先看他的JavaScript版本
1
2
3
4
5
6
7
8
9
10
11
| function getDistance(point1, point2) {
return [point2.x - point1.x, point2.y - point1.y]
}
getDistance({
x: 1,
y: 1
}, {
x: 2,
y: 2
});
|
下面来看typescript
1
2
3
4
5
6
7
8
9
10
11
| 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
基础类型快速入门
首先看几个基础的类型的定义
1
2
3
4
|
const teachName:string="zhang san"
const teachAge:number=28
const isMale:boolean=true
|
下面我们来看数组类型如何定义
1
2
3
4
|
const numberArr:number[]=[1,2,3,4,5,6]
const stringArr:string[]=['a','b','c']
const booleanArr:Array<boolean> = [true,false]
|
之后我们再来看看对象类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const user:{
name : string,
age : number
}={
name:'zhangsan',
age:18
}
const userOne:{
name : string,
age? : number
}={
name:'dell',
}
|
以及联合类型
1
2
3
4
5
6
7
8
9
|
function union(id:string|number){
if (typeof id === 'string'){
console.log(id.toUpperCase())
}else {
console.log(id)
}
}
|
除了这些之外，还有一些代码上的快捷。
例如类型别名
1
2
3
4
5
6
|
type User = {
name:string,age : number
}
const userTwo:User={name : 'dell',age:18}
const userThree:User={name : 'dell',age:18}
|
这是为了解决类型复用所产生的一个用法
下面我们来看any类型 如果不写any类型的话，默认也会推断成any类型的，但是最好也是手动的去写上。这样有利于代码的可读性
1
2
3
4
| function showMessage(message:any){
console.log(message)
}
|
之后我们来看函数类型
1
2
3
4
|
function abc(message:string):number{
return 123
}
|
这个就是约定了返回值。
还可以用箭头函数这样写
1
2
3
4
| const def:(age:number)=>number=(age : number)=>{
return age
}
|
下面我们来讲接口类型 interface
1
2
3
4
5
6
|
interface Stu{
age:number;
sex:string;
}
const stu:Stu = {age : 18,sex : '男'}
|
有点像刚才的对象类型其实很类似。包括和类型别名也很相似。
但是接口有一个特点就是可以继承
1
2
3
| interface OldStudent extends Stu{
name : string;
}
|
下面来看交叉类型
1
2
3
|
type Employee=User&{salary:number}
const employee:Employee = {age : 18,name : 'zhangsan',salary:1}
|
之后来看断言
1
2
3
4
|
const dom:undefined=document.querySelector('#root') as undefined
const testString:string=123 as any as string;
const dom1:undefined=<undefined> document.querySelector(' #root')
|
之后来看字面量类型
1
2
3
4
5
6
7
|
const str:'asd'='asd'
const truthy:true=true
function getPosition(position:'left'|'right'):string {
return position
}
getPosition('left')
|
这个类型很有意思。我们来看一个练习题。
1
2
3
4
5
6
7
8
9
| 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的类型定义，就不会报错了
1
2
3
4
5
6
7
8
9
| 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)
|
第二种我们可以用断言语法
1
| request(params.url,params.method as 'GET')
|
下面我们来看null和undefined
1
2
3
|
const testobject:null=null
const test2object:null=undefined
|
默认情况下null和undefined是可以转换的。
之后来看void
1
2
3
4
|
function getNumber():void{
}
|
就是这个函数是一个无返回值
类型注解和类型判断
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const userName:string='123'
const userAge=18
const userNick='deel'
function getTotal(paramOne:number,paramTwo:number){
return paramOne+paramTwo
}
|
