TypeScript篇

1. TS basic data types

1. number
2. Boolean value
3. string
4. array
5. tuple
6. enumerate
7. any
8. void
9. null and undefined
10. never

2. Description of TS basic data types

1. number type

const age: number = 25

2. Boolean type

const flag: boolean = 25

3. string type

const name: string = 'wangjiajia'
// 联合类型
const value: number | string = 'wangjiajia'  // value既可以是number类型也可以是string类型

4. Array type (take number type array as an example)

const list: number[] = [1,2,3]
// 或者
const list: Array<number> = [1,2,3]

5. The tuple
   tuple type allows representing an array with a known number and type of elements, 各元素的类型不必相同. For example, you can define a pair of tuples whose values ​​are string and number. When accessing an element with a known index, the correct type is obtained.

const user: [string,number] = ['wangjiajia',25]
x[0].substr(1)  // 正确
x[1].substr(1)  // 错误
// 当访问一个越界元素，会使用联合类型
x[2] = 'wangtongtong'   // 正确
x[3] = true    // 错误，布尔类型不是number和string的联合类型

6. Enumeration: enum

// 数字的枚举
enum Color {
    
    Red,Green,Blue}  // 默认是从0开始，逐个递增
let c: Color = Color.Green;   // 1

enum Color {
    
    Red = 1,Green,Blue}  // 可以指定开始的数字，后面也是逐个递增
let c: Color = Color.Green;   // 2

enum Color {
    
    Red = 1,Green = 4,Blue = 8}   // 可以全部手动指定

// 字符串的枚举，后面必须都要指定，否则报错
enum Sex{
    
    male = '男',female = '女'}
let sex: Sex = Sex.female;    // 女

enum Sex{
    
    male = '男',female}   // female必须指定，否则报错

// 通过枚举的值反推映射的名字
enum Color {
    
    Red = 1, Green, Blue}
let colorName: string = Color[2];  // Green

7. any type: Indicates any type. When the variable type is not clear, you do not want the type checker to check these values ​​but directly let them pass the check at the compilation stage

const name: any = 'wangjiajia'

8. void type: Contrary to any type, it means that there is no type, and it is generally used for a function without a return value.

function warnUser(): void {
    
    
    console.log("This is my warning message");
}
// 声明一个void类型的变量没有么意义，因为只能赋值undefined和null
const name: viod = undefined
const name: viod = null

9. null and undefined:两者有各自的类型，默认是所有类型的子类型

let u: undefined = undefined;
let n: null = null;
let name: string = undefined | null

10. never type: 表示那些永不存在的值的类型, the never type is the return value type of a function expression or an arrow function expression that always throws an exception or has no return value at all;never类型是任何类型的子类型，也可以赋值给任何类型，没有类型是never的子类型或可以赋值给never类型，即使是any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    
    
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    
    
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    
    
    while (true) {
    
    
    }
}

let name: never
let age: any = 18
name = age  // any类型也不可以赋值给never类型 

3. Type assertion

1. <type> value (cannot be used in TSX)

let name: any = "this is a string";
// 将name断言成string类型
let nameLength: number = (<string>someValue).length;

2. value as type

let name: any = "this is a string";
// 将name断言成string类型
let nameLength: number = (someValue as string).length;

3. Variable!: Indicates that the variable is not null or undefined

name! 断言name不为null或者undefined

4. Type aliases

1. Defined by type:

type user = {
    
    
	name: string,
	age: number
}
// 类型扩展
type user2 = user & {
    
    
	address: string
}

2. Defined by interface

interface user {
    
    
	name: string,
	age: number
}

// 类型扩展方法一：
interface user2 extends user {
    
    
	address: string
}

// 类型扩展方法二：同名叠加
interface user {
    
    
	name: string,
	age: number,
	address: string
}

3. The difference between type and interface: type一旦定义之后就不能在添加新的属性，而interface总是可以扩展的.

5. Read-only properties

interface user {
    
    
	readonly name: string,  // name是只读属性，不可以操作
	age: number
}

interface user {
    
    
	readonly name: string,  // name是只读属性，不可以操作
	age: number,
	readonly userInfo: {
    
       // userInfo是只读属性，不可以操作,但是可以操作userInfo下面的address属性
		address:'string'
	}
}

6. Generics

// 定义一个泛型函数
function actionFun<T>(arg:T) :T{
    
    }  // T帮助我们捕获用户在调用函数的时候传入的参数类型

// 使用
let output = actionFun<string>("myString");
// 或者直接写，因为编译器会帮助我们做类型推断
let output = actionFun("myString");

// 泛型约束
function actionFun<T>(arg:T) :T{
    
    
	console.log(arg.length)  // 报错，传入的参数不一定具有length属性
}

// 解决办法
interface Lengthwise {
    
    
	length: number;
}
function actionFun<T extends Lengthwise>(arg:T) :T{
    
    
	console.log(arg.length)  // 报错，传入的参数不一定具有length属性
}
loggingIdentity(3)   // 报错，传入的参数必须包括length属性
loggingIdentity({
    
    length:10})    // 正确

// 在泛型约束中使用类型参数
function getProperty<T,K>(obj: T, key: K) {
    
    
    return obj[key];
}
let X = {
    
     a: 1, b: 2, c: 3, d: 4 };
getProperty(X,'a')  // 正确
getProperty(X,'m')  // 错误，在X中没有m这个键名