Typescript入门
好久没有写过这种给自己"入门"的文章了. 不过最近看一篇文章强推Typescript, 还把js比作汇编, ts比作高级语言, 说你看现在还有几个人用汇编, 以后大家一样都是用ts的, 强推味道太重, 不过下载cocos creator, 也已经把ts作为默认语言了, 另外小程序也支持ts(似乎需要特殊设置一下,默认还是js), 再加上最近几年ts在语言排行榜上爬升很快, 看来不得不了解了.
参考教程:https://www.runoob.com/typescript/ts-features.html
在线playground: https://www.typescriptlang.org/play
安装
npm i -g typescript 即可, 安装后tsc可以运行就说明安装成功.
编译
tsc file.ts即可编译成file.js
在项目中, 可以先初始化文件夹tsc --init, 然后修改tsconfig.json,将"outDir": "./build",, 这样只运行tsc可以自动编译到build目录中.
REPL
由于运行tsc是用来编译的, REPL需要安装npm i -g ts-node, 然后运行ts-node即可.
类型定义: 变量后 : 类型名
如果:any则和js一样不限制类型.
- 函数形参: 必须定义类型
- let/const 变量: 可以不定义, 自动取初始化类型. 如果不初始化, 则类型为
any - 对象成员: 可以不定义, 自动取初始化类型. 因为这个过于灵活, 所以有了interface关键词, 专门用来定义class的类型.
新关键字 interface implements
定义class需要遵从的形式
interface Person {
name: string;
age: number;
greet(): void;
}
class Student implements Person {
constructor(public name: string, public age: number) {}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}新关键字 type
定义新类型
type StringOrNumber = string | number;
let value: StringOrNumber = 42;新关键词 as
因为js的不同类型有不同的方法, 有时候ts无法判断any类型,也就不知道这个变量有没有对应方法, 这时候就要用as来强制转换类型,以便访问该类型的方法
let value: any = "hello";
let strLength: number = (value as string).length;新关键字 public private protected
定义对象成员的访问权限
新关键字 enum
定义枚举类型. 注意enum的定义方式比较像C语言, 没有赋值等号.
enum Direction {
Up,
Down,
Left,
Right,
}
let dir: Direction = Direction.Up;很有意思的是Direction定义后, 在js中看起来是这样的
var Direction;
(function (Direction) {
Direction[Direction["Up"] = 0] = "Up";
Direction[Direction["Down"] = 1] = "Down";
Direction[Direction["Left"] = 2] = "Left";
Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));console.log
{
'0': 'Up',
'1': 'Down',
'2': 'Left',
'3': 'Right',
Up: 0,
Down: 1,
Left: 2,
Right: 3
}貌似在新的浏览器和node(v20)中, enum都已经作为保留关键字了, 但还不能使用.
新关键词 abstract
与class的区别就是不能被实例化.
新类型 any
表示任何类型
新类型 unknown
与 any 类似，但更严格。必须经过类型检查后才能赋值给其他类型变量。
let value: unknown = "Hello";
if (typeof value === "string") {
let message: string = value;
}新类型 元组 tuples
这不是一个关键字, 而是允许定义具有固定数量和类型的数组
let point: [number, number] = [10, 20];新类型 泛型 Generics
用尖括号<T>定义, 相当于T是可变化的类型(可以认为类型成了变量了), 在使用函数的时候再去定义类型.
function identity<T>(value: T): T {
return value;
}
let num = identity<number>(42);新类型 void和never
void类型用于表示函数没有返回值，但可以返回undefined或null，并且函数可以正常执行并完成操作。
never类型用于表示函数永远不会返回任何值，通常是因为函数会抛出异常或进入无限循环。
function error(): never { throw new Error("error"); }联合类型
用或|表示类型可以是几种之一
let id: string | number;
id = "123";
id = 456;字面量类型
字面量类型可以让变量只能拥有特定的值，用于结合联合类型定义变量的特定状态。
let direction: "up" | "down" | "left" | "right";
direction = "up";新运算符?和??
TypeScript 增加了 JavaScript 的可选链 (?.) 和空值合并运算符 (??)，简化了代码中对可能为 null 或 undefined 值的处理。
let user = { name: "Alice", address: { city: "Wonderland" } };
console.log(user?.address?.city); // 如果 address 存在则输出 city，否则返回 undefined
let value = null;
console.log(value ?? "default"); // 如果 value 为 null 或 undefined，则返回 "default"
``
`?`确实简化了很多操作, 否则深度访问一个不存在的key, js就会报错.
`??`和`||`还是有区别的, `??`只判断null和undefined, 而`||`还会判断false, 0, 空字符串'', NaN.