typescript 知识梳理

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，可以编译成纯 JavaScript 代码。TypeScript 强调类型安全和代码可读性，使得大型项目的开发更加容易和可维护。本文将梳理 TypeScript 的基本语法和常用特性，并附带实例代码。

基本语法

类型声明

TypeScript 强调类型安全，因此需要在变量、函数等声明时明确变量的类型。常见的类型包括：number、string、boolean、any、void、null、undefined、object、Array、Tuple、Enum、Interface 等。

let num: number = 123;
let str: string = 'hello';
let bool: boolean = true;
let anyType: any = 'any type';
let voidType: void = undefined;
let nullType: null = null;
let undefinedType: undefined = undefined;
let objType: object = { name: 'Tom', age: 18 };
let arrType: Array = [1, 2, 3];
let tupleType: [string, number] = ['Tom', 18];
enum Color { Red, Green, Blue };
let colorType: Color = Color.Red;
interface Person {
  name: string;
  age: number;
}
let personType: Person = { name: 'Tom', age: 18 };

函数

TypeScript 中的函数声明需要明确参数类型和返回值类型。

function add(a: number, b: number): number {
  return a + b;
}

let sum = (a: number, b: number): number => {
  return a + b;
};

类

TypeScript 中的类定义需要明确属性类型和方法参数类型、返回值类型。

class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  sayHi(): string {
    return `Hi, my name is ${this.name}, I'm ${this.age} years old.`;
  }
}

let tom = new Person('Tom', 18);
console.log(tom.sayHi()); // Hi, my name is Tom, I'm 18 years old.

接口

TypeScript 中的接口用于声明对象的属性、方法等，接口的属性可以是可选的，也可以是只读的。

interface Person {
  readonly name: string;
  age?: number;
  sayHi(): string;
}

let tom: Person = {
  name: 'Tom',
  sayHi() {
    return `Hi, my name is ${this.name}.`;
  }
};
console.log(tom.sayHi()); // Hi, my name is Tom.

类型断言

TypeScript 中的类型断言可以将一个变量强制转换成指定类型，有两种形式：<类型>变量 和 变量 as 类型。

let str: any = '123';
let num: number = str;
let bool: boolean = str as boolean;

常用特性

类型推断

TypeScript 中的类型推断可以省略变量的类型声明，编译器会根据变量的赋值推断出变量的类型。

let num = 123; // 推断为 number 类型
let str = 'hello'; // 推断为 string 类型

泛型

TypeScript 中的泛型可以在编写通用的函数、类时，支持不特定的数据类型。泛型可以用 表示，T 可以是任意字母。

function identity(arg: T): T {
  return arg;
}

let output = identity('hello');
console.log(output); // hello

可选属性

TypeScript 中的可选属性可以在接口中定义属性时使用 ? 表示，可选属性可以不必在对象中存在。

interface Person {
  name: string;
  age?: number;
}

let tom: Person = {
  name: 'Tom'
};

只读属性

TypeScript 中的只读属性可以在接口中定义属性时使用 readonly 关键字表示，只读属性只能在对象创建时被赋值。

interface Person {
  readonly name: string;
  age?: number;
}

let tom: Person = {
  name: 'Tom'
};
tom.name = 'Jerry'; // 报错，只读属性不能被改变

类型别名

TypeScript 中的类型别名可以用来给一个类型起一个新的名字，常用于联合类型。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
  if (typeof n === 'string') {
    return n;
  } else {
    return n();
  }
}

枚举

TypeScript 中的枚举可以用来定义一组有名字的常量，枚举成员可以是数字或字符串。

enum Color { Red, Green, Blue };
let colorType: Color = Color.Red;
console.log(colorType); // 0

enum Color { Red = 1, Green = 2, Blue = 4 };
let colorType: Color = Color.Red;
console.log(colorType); // 1

enum Color { Red = 'red', Green = 'green', Blue = 'blue' };
let colorType: Color = Color.Red;
console.log(colorType); // red

类型兼容性

TypeScript 中的类型兼容性指的是当一个类型 A 能够被赋值给另一个类型 B 时，类型 A 兼容类型 B。

interface Named {
  name: string;
}

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let tom: Named = new Person('Tom'); // Person 类型兼容 Named 类型

示例代码

React 组件

import React, { Component } from 'react';

interface Props {
  name: string;
  age?: number;
}

interface State {
  count: number;
}

class App extends Component {
  state = {
    count: 0
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    const { name, age } = this.props;
    const { count } = this.state;
    return (
      

        
{`Hi, my name is ${name}${age ? `, I'm ${age} years old.` : '.'}`}
        
{`The count is ${count}.`}
        Click me!
      
    );
  }
}

export default App;

Redux Reducer

import { Reducer } from 'redux';
import { ActionTypes, Action } from './actions';

export interface State {
  count: number;
}

const initialState: State = {
  count: 0
};

const reducer: Reducer = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.INCREMENT:
      return { ...state, count: state.count + 1 };
    case ActionTypes.DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default reducer;

Express 路由

import express, { Request, Response } from 'express';

const app = express();

interface User {
  name: string;
  age: number;
}

const users: User[] = [
  { name: 'Tom', age: 18 },
  { name: 'Jerry', age: 20 }
];

app.get('/users', (req: Request, res: Response) => {
  res.send(users);
});

app.post('/users', (req: Request, res: Response) => {
  const user: User = req.body;
  users.push(user);
  res.send(user);
});

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

总结

本文梳理了 TypeScript 的基本语法和常用特性，并附带了实例代码。TypeScript 的类型安全和代码可读性使得大型项目的开发更加容易和可维护，是前端开发中必不可少的一部分。希望本文能够帮助读者更好地理解 TypeScript。