安装 TypeScript 转译器 tsc
npm install tsc -g
tsc 命令的使用
tsc code.ts
此时,你的文件夹会生成一个新的 code.js 的文件,你可以使用 node.js 或者将js文件嵌入到 html 中在浏览器执行.
VsCode 中的配置 tsconfig.json
{
"compilerOptions":{
"watch": true,
"removeComments": true,
"target": "es5",
"noImplicitAny": ture,
"strictNullCheckks": true
...
}
}
watch: 自动监测源文件的修改并编译代码
removeComments: 删除源文件中的注释
target: 指定想要编译的目标js版本
noImplicitAny: 更加严格的代码验证,不允许动态类型
strictNullCheckks: 不允许赋予变量null或undefined, 除非显示指定
TypeScript 的使用
类型限定
function multiply(a: number, b: number) {
return a * b;
}
如以上代码所示:在变量后面追加一个 冒号 并填写一个数据类型就可以限定形参的数据类型,最基本的数据类型包括:number, string, boolean, any 这几种. 在加入了类型限定后,TypeScript 就会自动帮我们检查不合法数据类型的传入:
可选参数
如果你希望函数内的某个参数是可以省略的,可以在类型限定的 冒号 符前面增添一个 问号 ?
function multiply(a: number, b?: number) {
return a * b;
}
标记返回值类型
类型标注同样可以用在函数返回值上,如果一个函数没有返回值,可以将其标记为 void 类型,将类型名前加一个 冒号 写在 函数声明 后 大括号前:
function sayHi(): void {
alert("Hi~");
}
如果在变量声明时赋予初值,或是函数的返回值是确定的话,则不需要对变量或函数加以类型限定符,编译器会根据初值或返回值自行推导。
数组 和 元组
数组声明:
/* 一维数组 */
let arr: number[];
arr = [1, 2, 3];
/* 二维数组 */
let arrOfArray: number[][];
arrOfArray = [
[1, 2, 3],
[4, 5, 6],
];
元组:元素的 个数 和 类型 确定的数组
let point: [number, number, number];
point = [1, 2, 3];
如果希望第三个元素可以省略,只需要在第三个元素后面加上 ?:
let point: [number, number, number?];
point = [1, 2, 3];
point = [1, 2];
这样, point 就可以表示二维或者三维坐标.
联合类型
有时候,我们可能希望变量的类型是多种类型中的任意一种,则可以这样声明:
let color: number | string;
color = "red";
color = 0xff0000;
这样, color 既可以表示数字,也可以表示字符串。
限制变量取值
在用变量表示类型时,我们希望其取值仅限定为 male female:
let gender: "male" | "female";
let dice: 1 | 2 | 3 | 4 | 5 | 6;
//这里表示dice只可以取数字 1~6
使用这种技巧可以实现类似 C++ 或者 Java 中的 枚举 数据类型.
接口 interface
如果我们想限定一个对象的类型,那么可以使用 interface 关键字来定义一个接口:
interface User {
name: string;
id: number;
}
以上定义了一个名为 User 的接口,其有且只有 name 和 id 两个属性,在使用其来实例化一个对象时,这个对象中缺少或者多出了一些属性,编译器都会报错:
类型别名
如果你需要用到一些比较复杂的类型,可以使用 type 关键字来为你所定义的类型起一个别名:
type UserID = number | string;
function getUserInfo(userId: UserID) {
//...
}
这样如果我们再其他地方用到相同的类型,可以直接使用别名来避免代码的重复。