声明变量

参考文章：https://juejin.cn/post/6844903749501059085
声明变量可以使用interface或type，两者语法有所区别

两者的相同点

都可以描述一个对象或者函数

interface

  1. interface User {
  2.   name: string
  3.   age: number
  4. }
  5. interface SetUser {
  6.   (name: string, age: number): void;
  7. }

type

  1. type User = {
  2.   name: string
  3.   age: number
  4. };
  5. type SetUser = (name: string, age: number)=> void;

都允许拓展（extends）

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

interface extends interface

  1. interface Name { 
  2.   name: string; 
  3. }
  4. interface User extends Name { 
  5.   age: number; 
  6. }

type extends type

  1. type Name = { 
  2.   name: string; 
  3. }
  4. type User = Name & { age: number  };

interface extends type

  1. type Name = { 
  2.   name: string; 
  3. }
  4. interface User extends Name { 
  5.   age: number; 
  6. }

type extends interface

  1. interface Name { 
  2.   name: string; 
  3. }
  4. type User = Name & { 
  5.   age: number; 
  6. }

两者的不同点

type 可以而 interface 不行

  • type 可以声明基本类型别名，联合类型，元组等类型

    1. // 基本类型别名
    2. type Name = string
    3. // 联合类型
    4. interface Dog {
    5.   wong();
    6. }
    7. interface Cat {
    8.   miao();
    9. }
    10. type Pet = Dog | Cat
    11. // 具体定义数组每个位置的类型
    12. type PetList = [Dog, Pet]
    13. 复制代码

  • type 语句中还可以使用 typeof 获取实例的 类型进行赋值

    1. // 当你想获取一个变量的类型时，使用 typeof
    2. let div = document.createElement('div');
    3. type B = typeof div
    4. 复制代码

  • 其他骚操作

    1. type StringOrNumber = string | number;  
    2. type Text = string | { text: string };  
    3. type NameLookup = Dictionary<string, Person>;  
    4. type Callback<T> = (data: T) => void;  
    5. type Pair<T> = [T, T];  
    6. type Coordinates = Pair<number>;  
    7. type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

    interface 可以而 type 不行

    interface 能够声明合并

    1. interface User {
    2. name: string
    3. age: number
    4. }
    5. interface User {
    6. sex: string
    7. }
    8. /*
    9. User 接口为 {
    10. name: string
    11. age: number
    12. sex: string 
    13. }
    14. */

    简单总结

    可以用interface实现就用interface；不能就是用type

    在React组件上使用typescript

    参考网站：https://react-typescript-cheatsheet.netlify.app/

    1. interface WelcomeProps {
    2. name: string;
    3. }
    4. const Welcome: React.FC<WelcomeProps> = (props) => {
    5. return <h1>Hello, {props.name}</h1>;
    6. };
    7. const element = <Welcome name="Sara" />;
    8. ReactDOM.render(element, document.getElementById("root"));

    如上代码所示，这是一个简单的添加typescript的React组件。

    函数组件写法

    1. //<>中的prop用于声明类型
    2. const App: React.FC<Prop> = (prop) => {                                                  
    3.   return ()
    4. }

    类组件写法

    1. type MyProps = {
    2. // using `interface` is also ok
    3. message: string;
    4. };
    5. type MyState = {
    6. count: number; // like this
    7. };
    8. class App extends React.Component<MyProps, MyState> {
    9. state: MyState = {
    10.   // optional second annotation for better type inference
    11.   count: 0,
    12. };
    13. render() {
    14.   return (
    15.     <div>
    16.       {this.props.message} {this.state.count}
    17.     </div>
    18.   );
    19. }
    20. }