JS-Typescript
文章目录
环境
1. npm方式安装
npm install -g typescript
2. 将".ts"文件编译为".js"文件
tsc xxx.ts
上面的步骤可以实现手动编译,也可以采用自动编译:
1. 创建tsconfig.json配置文件
tsc --init
2. vsCode下 ctrl+shift+b
运行 watch(监视) ,文件改变时自动编译
类型注解
函数
function test(name: string) {
return name;
}
变量
var name: string = "tom"
接口
工作原理
function test (person: {name: string}) { }
let p1 = {age: 20, name: "tom"};
test(p1);
用interface
↓ ,编译后也会变成上面 ↑ 的形式
interface Person {
name: string
}
function test (person: Person) { }
// 即使参数位置或个数不对称,只要需要的参数存在就合法
let p1 = {age: 20, name: "tom"};
test(p1);
可选属性
标记?
的属性表示可选
interface Person {
name: string;
age?: number;
}
function test (person: Person) {
if(person.age){ /* ... */ }
}
let p1 = {name: "tom"};
test(p1);
只读属性
interface Person {
readonly name: string;
age: number;
}
let p1: Person = {name: "tom", age: 20};
p1.name = "sam"; // error
类
class Person {
fullName: string;
// public 参数表示等同于创建了同名的成员变量
constructor(public firstName, public lastName) { // 构造器函数
this.fullName = firstName + " " + lastName;
}
}
var person1 = new Person("li", "si"); // 使用时必须对应构造器参数
编译之后 ↓
var Person = /** @class */ (function () {
function Person(firstName, lastName) {
this.firstName = firstName; // 假如不加 public 此处就不会暴露出这个变量
this.lastName = lastName;
this.fullName = firstName + " " + lastName;
}
return Person;
}());
var person1 = new Person("li", "si");
数据类型
基础数据类型
boolean
和js
一样,值:true
/false
number
let decLiteral: number = 6; // 10进制
let hexLiteral: number = 0xf00d; // 16进制
let binaryLiteral: number = 0b1010; // 2进制
let octalLiteral: number = 0o744; // 8进制
编译后↓
var decLiteral = 6;
var hexLiteral = 0xf00d;
var binaryLiteral = 10;
var octalLiteral = 484;
较新版本js
虽支持某些进制格式,但ts
仍会转换部分进制为10进制以兼容低版本js
string
let text: string = "hello";
let i: number = 1;
let template: string = `text is ${ text },i + 1 = ${ i + 1 }`; // 模板字符串
编译后↓
var text = "hello";
var i = 1;
var template = "text is " + text + "\uFF0Ci + 1 = " + (i + 1); // 模板字符串
较新版本js
虽支持${}
写法,但ts
仍会转换为普通格式以兼容低版本js
Array
格式1:类型 + []
let stringList: string[] = ["a", "b", "c"];
let numberList: number[] = [1, 2, 3];
格式2:数组泛型
let stringList2: Array<string> = ["a", "b", "c"];
let numberList2: Array<number> = [1, 2, 3];
Tuple
元组(数据库中的一行记录称为元组)
let x: [number, string, boolean, number] = [0, "tom", true, 20];
enum
枚举类型
enum Color {Red, Green = 5, Blue} // 注意没有;
let c1: Color = Color.Red; // "Red"
let c2: string = Color[6]; // "Blue"
元素默认开始下标为0,可以用例如 Green = 5
来更改元素的下标
编译后↓
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Green"] = 5] = "Green";
Color[Color["Blue"] = 6] = "Blue";
})(Color || (Color = {}));
var c1 = Color.Red;
var c2 = Color[6];
any
对于不知道的类型可以用any
;
虽然大多数可以用Object
代替,但例如toFiexed
(四舍五入)这类函数不允许对Object
类型使用
let notSure1: any = 10;
console.log(notSure1.toFixed());
let notSure2: Object = 10;
console.log(notSure2.toFixed()); // error
let notSure3 = 10; //ok,但不规范
void
函数返回类型
function say(message: string): void {
console.log(message);
}
变量类型,只能等于undefined
和 null
,用处不大
let u: void = undefined;
let n: void = null;
null,undefined
用处不大
let u: undefined = undefined;
let n: null = null;
默认null和undefined是所有类型的子类型,所以可以赋给任何类型
let u: number = undefined;
never
表示永远不会运行到终点
死循环
function alwaySay(): never {
while (true) {
console.log("hello");
}
}
异常
function error(message: string): never {
throw new Error(message);
}
function fail() {
return error("Something failed");
}
object ,Object
object
表示非基本类型,即除number
,string
,boolean
,symbol
,null
或undefined
之外的类型;
Object
除null
,undefined
外都可接受。
function ObjectTest(o: Object) { }
ObjectTest("string"); // ok
ObjectTest(null); // error
function objectTest(o: object) { }
objectTest([1, 2, 3]); // ok
objectTest({name: "tom", age: 50}); // ok
objectTest("string"); // error
objectTest(null); // error
类型断言
类似强制类型转换,假如自己十分清除变量的类型或作用,可以告诉系统自己的写法没错
// 十分清楚 message 是一个字符串
let message: any = "hello world";
// 尖括号写法
let messageLength: number = (<string>message).length;
// as 写法
let messageLength: number = (message as string).length;
ReadonlyArray
只读数组
let ra: ReadonlyArray<number> = [1, 2, 3];
ra[0] = 4; // error
ra.push(4); // error
ra.length = 10; // error
let a: Array<number> = [1, 2, 3]; // error
a = ra; // error
a = ra as Array<number>; // 可以强转一下 ok
ra = a; // ok
变量声明
let
es6的新特性,TS实现了它并可编译为兼容低版本js的语法
for(let i = 0; i < 10; i++){
setTimeout(() => {
i;
},0);
}
编译为 ↓
var _loop_1 = function (i) {
setTimeout(function () {
i;
}, 0);
};
for (var i = 0; i < 10; i++) {
_loop_1(i);
}
所以尽可能使用let
代替var
吧