1
2
3
let str = 'str'
console.log(typeof str)

1
2
3
4
5
6
7
let numOrStr: number | string // 这个变量可以是数字也可以是字符串
numOrStr = 'abc'
numOrStr = 123
// 联合类型还可以直接时字符串
let str : 'a' | 'b' | 'c'
str = 'b'

1
2
3
4
5
// 函数作用，当入参类型是字符串时，返回长度
fuction getLength(val: string | number): number {
// 因为length属性不是字符串和数字的共同属性，当你直接return val.length时，ts就会报错提示你，可能val为number类型没有length属性
}

1
2
3
值 as 类型 // 推荐写这种，因为更符合JSX的写法
<类型>值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
fuction getLength(val: string | number): number {
const str = val as string // 注意并不是类型转换，而是当做某类型去看
if (str.length) { // 如果是数字类型是没有length属性的
return str.length
} else {
const num = val as number
return num.toString().length
}
}
// 或（推荐）
fuction getLength(val: string | number): number {
if (typeof val === 'string') {
return val.length
} else {
return val.toString().length
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
interface Cat {
name: string;
run(): void;
}
interface Fish {
name: string;
swim(): void;
}
function isFish(animal: Cat | Fish) {
// if (typeof animal.swim === 'function') { 这样写会报错，因为不一定会传Fish类型进来
//
return true;
// }
if (typeof (animal as Fish).swim === 'function') { // 这样就给编译器指定参数为Fish类型，就不会报错了
return true;
}
return false;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
class ApiError extends Error {
code: number = 0;
}
class HttpError extends Error {
statusCode: number = 200;
}
function isApiError(error: Error) {
if (typeof (error as ApiError).code === 'number') {
return true;
}
return false;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
interface ApiError extends Error {
code: number;
}
interface HttpError extends Error {
statusCode: number;
}
function isApiError(error: Error) {
if (error instanceof ApiError) { // 因为编译成es5后，接口的定义被去掉了，此时instanceof找不到ApiError所以报错
return true;
}
return false;
}

1
2
3
4
5
window.foo = 1;
// window 上添加一个属性 foo时，TS会报错，说不存在这个属性
(window as any).foo = 1;
// 断言成any类型后就可以添加了

1
2
3
4
5
6
7
8
9
10
11
12
interface P {
a: number;
}
function fn(x: object) {
if (x as P) {
return console.log("断言成功");
} else {
return console.log("不走断言");
}
}
fn({ b: "1" }); // "断言成功" 记住啦

1
2
3
4
5
type strOrNum = string | number // strOrNum 这个类型别名就包含了string或者number
let str: strOrNum = '123'
// 等同于
let str: string | number = '123'

1
2
3
4
5
interface element {
name: string
}
type Arr = element[]

1
2
3
4
type gender = "man" | "women"
type age = "young" | "old"
type person = gender | age // 类型就综合了"man" | "women" | "young" | "old"

1
2
3
4
5
6
7
8
9
10
11
12
13
interface Language {
id: number;
}
interface Language {
name: string;
// id: number 不能和上面有同样的哦，会报错
}
let lang: Language = {
id: 1,
name: 'name'
} // 这样是没问题的
// 如果把interface换成type就会报错

1
2
3
let str: 'name' = 'name' // 等于name以外的都会报错
let num : 2 = 2 // 等于2之外的都会报错

1
2
3
type Directions = 'Up' | 'Down' | 'Left' | 'Right'
let toWhere: Directions = 'Up' // 这个变量的值被限定在Directions里面这四个了，写成其他的会报错

1
2
3
4
5
interface tools = {
type: 'stick' | 'scissors' | 'knife'
}
// 根据这个接口创建的变量，type属性只能写上面那三个。

1
2
type what = string & number // 意思是这个类型别名既是string 类型又是 number 类型，但我们知道这个是不存在的，所以ts把what 定义为了never

1
2
3
4
5
6
7
8
9
10
interface IName {
name: string
}
type Iperson = IName & { age: number }
// 这时候Iperson就变成
interface Iperson {
name: string
age: number
}

1
2
3
4
5
6
interface A {
name: string,
age: number
}
type B = A & { name : number } // B的name和A的name又交叉合并了一次，变成never了，当然如果name都是同一种类型合并后还是同一种类型。不同的字符串字面量也是一样的哦。

1
2
3
4
5
6
7
8
9
10
// 错误
type A = "a" | "A";
type B = "b" | "B";
type AB = A & B;
let ab: AB = "a"; // 报错，A与B没有交集
type A = "a" | "A";
type B = "a" | "B";
type AB = A & B; // 交集为a，所以 AB类型为 'a' 
let ab: AB = "a"; // 正常赋值

1
2
type BorderColor = 'black' | 'red' | 'green' | 'yellow' | 'blue' | string; // 前面的因为都属于string类型，最后面的又是个string类型，所以整体缩减成 string

1
2
type BorderColor = 'black' | 'red' | 'green' | 'yellow' | 'blue' | string & {}; // 字面类型都被保留

1
2
3
4
5
6
7
8
9
10
type A =
| {
age: "1";
}
| {
age: "1" | "2";
[key: string]: string;
};
let a = { age: "2" }; // 此时age被缩减为"1" | "2"了，怕不怕