五分钟了解(安装)typescript

Posted on | In

typescript的由来

typescript是由微软的一个技术团队开发和维护的一个开源项目，之所以会推出这个项目是为了解决js的一个缺陷吧！由于Javascript是一种动态弱类型的语言，在测试和debug阶段会非常的痛苦，也是为了解决这一“痛点”，微软的VS code团队推出了typescript
  (强弱/动态静态具体解释，click here!)

安装

1
npm install -g typescript

安装后即可通过 tsc -v 命令行来查看安装版本，如果提示tsc不是内部或外部命令的话，说明系统的环境变量没有配置，csdn上有相关的解决办法。

编译

1
tsc xxx.ts

编译后会在相同文件夹下生成同名的js文件，关于更加工程化地使用typescript可以参考官方文档

变量和函数声明

与js语法相比，在所有的变量加上类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let taylor:string='Taylor';
let age:number=25;

// 数组有两种定义方式
let skills:string[]=['sing','gituar','writing'];
let cats:Array<string>=['white','dog','miao'];


// 函数声明
function info(name:string,age:number):string{
    let s:string='';
    s=`He is ${name},and he's ${age} years old`;
    return s;
}
info('calvin harris',28)

接口和类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 可选属性
interface employee{
    degree?:string,
    skilled?:boolean
}
function test(config:employee):boolean{
    if(config.skilled){
        return true
    }else if(config.degree==='master'){
        return true
    }else{
        return false
    }
}
let t1=test({degree:'master'})
let t2=test({degree:'bachelor',skilled:'false'})
let t3=test({skilled:'true'})
console.log(t1,t2,t3)

// 只读属性
interface Point{
    readonly x:number,
    readonly y:number
}
let p1:Point={x:10,y:5}
p1.y=12
// error