typescript入门笔记 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第6天
一、ts 开发环境安装
用 nodejs 安装 ts 的开发环境: npm i -g typescript与npm i -g ts-node编写 ts 文件后执行tsc即可编译 ts 文件为 js 文件。通过tsc -init可生成配置文件。
二、ts 中的类型声明
1
2
3
4
5
| let 变量: 类型;
let 变量: 类型 = 值;
function fn(参数: 类型,参数: 类型): 返回类型{
...
}
|
若值类型与变量类型不相同，则会报错。与 js 相比，ts 增加了为变量声明类型的功能，在开发中可以避免很多麻烦。
三、ts 中的类型
| 类型 | 例 | 描述 |
|---|
| number | 1,-1,22 | 数字 |
| string | ‘hello’,“hello”,`hello` | 字符串 |
| boolean | true,false | 布尔值 |
| 字面量 | 本身 | 变量值就是限制类型 |
| any | * | 任意类型 |
| unknown | * | 类型安全的 any |
| void | 空值(undefined) | 无值 |
| never | 没有值 | 不为任何值 |
| object | {age:20} | 任意 js 对象 |
| array | [1,2,3] | 任意 js 数组 |
| tuple | [1,2] | 元素，定长数组 |
| enum | enum{A,B} | 枚举 |
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
let a: 10;
a = 10;
a = 20;
let b: "male" | "female";
b = "male";
b = "female"
b = "hello"
let c: number | string;
let d: any;
let e: unknown = "hi";
let f:string = "hello";
f = e as string;
function fun():never{
throw new Error('出错');
}
let g: {name:string,age?:age};
let h: {name:string,[propName:string]?:any};
let i:(a: number,b: string)=>boolean;
enum Gender{
Male = 1,
Female = 2
}
let j :{name:string,gender:Gender};
j={
name:"张三",
gender:Gender.Male
}
|
四、ts 的类
1
2
3
4
5
6
7
8
9
| class Person {
readonly name: string = "张三";
static age: number = 20;
static hello() {
}
}
const p = new Person();
p.hello();
|
五、ts 的构造函数和 this
创建构造函数
1
2
3
4
5
6
7
| class Dog {
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
const dog = new Dog("狗1", 2);
|
this 代表 Dog 的每个实例对象，对象是谁 this 就是谁。
六、继承
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
| class Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
call() {
console.log("call");
}
}
class Dog extends Animal {
run() {
console.log("狗跑");
}
call() {
console.log("狗叫");
}
}
class Cat extends Animal {
run() {
console.log("猫跑");
}
call() {
console.log("猫叫");
}
}
|
继承将多个类中共有的代码写道一个父类中，供其他子类继承。
七、super 关键字
super 用于在子类中调用父类的方法或属性。
1
2
3
4
5
6
7
8
| class Cat extends Animal {
run() {
console.log("猫跑");
}
call() {
super.call();
}
}
|
在子类构造函数中默认会调用 super()，并传入值。
1
2
3
4
5
6
7
8
9
10
11
| class Cat extends Animal {
constructor(name: string, age: number) {
super(name, age);
}
run() {
console.log("猫跑");
}
call() {
super.call();
}
}
|
八、抽象类
抽象类以 abstract 开头，不能用于创建对象，只能用于继承。
1
2
3
4
5
6
7
8
9
| abstract class Animal {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
abstract call();
}
|
九、接口
1
2
3
4
5
6
7
8
9
10
11
12
13
| interface MyCode{
name: string;
age: number;
hello():string;
}
interface MyCode{
hobby: string;
}
const obj: MyCode={
name:'张三';
age:20;
hobby:'打球';
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| interface MyCode {
name: string;
hello(): string;
}
class MyClass implements MyCode {
name: string;
constructor(name: string) {
this.name = name;
}
hello(): string {
return "hello";
}
}
|
十、属性的封装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| class Cat {
private _name: string;
private _age: number;
constructor(name: string, age: number) {
this._name = name;
this._age = age;
}
get name(): string {
return this._name;
}
set name(value: string) {
this._name = value;
}
get age(): number {
return this._age;
}
set age(value: number) {
this._age = value;
}
}
|
十一、泛型
在定义函数或类时，如果遇到类型不明确就可以使用泛型
1
2
3
4
5
| function fn<T>(a: T): T {
return a;
}
fn(10);
fn<string>("hello");
|
1
2
3
4
5
| function fn2<T, K>(a: T, b: K): T {
return a;
}
fn2(123, "123");
fn2<string>(123, "123");
|
1
2
3
4
5
6
7
| interface Inter{
length: number;
}
function fn3<T extend Inter>(a:T):number{
return a.length;
}
fn3('123');
|
十二、联合/交叉类型
1
2
3
4
5
6
7
8
9
| type IBookList = Array<{
author: string;
} & ({
type: 'history';
range: string;
} | {
type: 'story';
theme: string;
})>
|
类型保护与类型守卫
1
2
3
4
5
6
7
8
9
10
11
| interface IA {a: 1, a1: 2}
interface IB {b: 1, b1: 2}
function log(arg: IA | IB){
if(arg.a){
console.log(arg.a1)
}else{
console.log(arg.b1)
}
}
|
由于IB中不存在a属性，进行判断时，arg不一定是IA，故arg为IB时程序会产生异常。
修改后：
1
2
3
4
5
6
7
8
9
10
11
| function getIsIA(arg: IA | IB): arg is IA{
return !!(arg as IA).a
}
function log2(arg: IA | IB){
if(getIsIA(arg)){
console.log(arg.a1)
}else{
console.log(arg.b1)
}
}
|
通过getIsIA判断是否为IA，是则输出arg.a1,否则arg为IB，输出arg.b1。