Typescript学习笔记

any

在typescript中，any类型是一种弱类型的类型标识符，它可以标识任何类型的值，，包括原始类型(如number，string，boolean)，对象类型和函数类型

typescript中如何表示函数类型

在TypeScript中，我们可以使用函数类型来表示函数的参数和返回值类型。函数类型由两部分组成：参数类型和返回值类型，用箭头符号=>连接。

以下是表示函数类型的一些例子：

// 表示一个没有参数，返回值为number类型的函数
let fn1: () => number;

// 表示一个有一个参数，参数为string类型，返回值为void类型的函数
let fn2: (arg: string) => void;

// 表示一个有多个参数，参数类型为number和string，返回值为boolean类型的函数
let fn3: (a: number, b: string) => boolean;

// 表示一个参数类型为任意类型数组，返回值为string类型的函数
let fn4: (args: any[]) => string;

// 表示一个参数类型为函数类型，返回值类型为number的函数
let fn5: (fn: () => void) => number;

// 表示一个可选参数类型为string，返回值类型为void的函数
let fn6: (arg?: string) => void;

// 表示一个剩余参数类型为number数组，返回值类型为void的函数
let fn7: (...args: number[]) => void;

在这些例子中，我们使用不同的参数类型和返回值类型来表示不同的函数类型。需要注意的是，参数和返回值类型的顺序是从左到右的，用箭头符号=>连接。

如果我们不知道函数的参数个数或参数类型，可以使用Function类型来表示函数类型。例如：

let fn: Function;

这样表示的函数类型可以接受任意类型和数量的参数，并且返回任何类型的值。不过，使用Function类型也会导致类型信息的丢失，因此应该尽可能地避免使用它。

如何在现有的react项目中添加typescript支持

在一个已有的React项目中添加TypeScript支持可以分为以下几个步骤：

安装TypeScript

使用npm或yarn安装TypeScript：

npm install typescript --save-dev
npm install ts-loader --save-dev
npm install @types/react @types/react-dom --save-dev

添加tsconfig.json文件

在项目根目录下创建一个名为tsconfig.json的文件，这个文件用来配置TypeScript编译器的选项和设置。可以使用TypeScript提供的默认配置，也可以根据具体情况进行修改。下面是一个示例配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2022",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "noEmit": true
  },
  "include": [
    "src/**/*"
  ]
}

这个配置文件中的各个选项的含义可以参考官方文档。需要注意的是，include选项指定了TypeScript编译器需要编译的源代码文件的路径。在这个示例中，编译器会编译src目录下的所有文件和子目录。

修改文件后缀名

将.js和.jsx文件的后缀名改为.ts和.tsx，以便TypeScript编译器能够识别它们。需要注意的是，如果一个组件引用了其他的.js或.jsx组件，也需要将它们的后缀名改为.ts或.tsx。

修改webpack配置文件

如果项目使用webpack打包工具，需要修改webpack配置文件以支持TypeScript。具体地，需要添加一个解析器来处理.ts和.tsx文件，并且使用TypeScript编译器来代替Babel。下面是一个示例配置：

module.exports = {
  // ...
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"]
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader"
          }
        ]
      }
    ]
  }
  // ...
};

这个配置中的解析器ts-loader用来将TypeScript代码编译成JavaScript代码，其中.ts和.tsx文件都会被编译。需要注意的是，需要安装ts-loader和TypeScript类型定义文件的依赖。

tsconfig.json中的compilerOptions的module，可选配置有哪些

tsconfig.json中的compilerOptions的module选项用来指定模块化方案，它可以设置的可选值如下：

commonjs：使用CommonJS模块化方案。
amd：使用AMD模块化方案。
umd：使用UMD模块化方案。
system：使用SystemJS模块化方案。
es2015：使用ES6模块化方案。
es2020：使用ES2020模块化方案。
esnext：使用ESNext模块化方案。

其中，commonjs是默认值，如果不设置module选项，TypeScript编译器将默认使用CommonJS模块化方案。需要注意的是，es2015及其以上的模块化方案需要在支持这些特性的环境中运行，如浏览器或Node.js v13.2及以上版本。另外，如果使用es2015或以上的模块化方案，可以通过target选项设置编译后的JavaScript代码的目标版本，以确保代码能够在目标环境中正确运行。

在 TypeScript 4.5.2 及以上的版本中，es2022 是一个合法的 module 选项的值，用来指定使用 ECMAScript 2022 的模块化方案。

但需要注意的是，目前 ECMAScript 2022 还没有被正式发布，因此使用 es2022 模块化方案会导致一些特性在当前环境下无法使用，需要使用 polyfill 或者其他工具进行兼容处理。

另外，如果你使用的 TypeScript 版本较低，可能不支持 es2022 选项，此时可以升级 TypeScript 版本或者选择其他支持的模块化方案。

知识点

import type { IProps } from ‘./interface’;type的语法是

这是 TypeScript 中的一种类型声明语法，用于声明一个新的类型。具体而言，import type 语法用于从外部模块中导入类型。在你的代码中，import type { IProps } from ‘./interface’; 表示从 ‘./interface’ 模块中导入类型 IProps，而不导入该模块的其他部分。这个语法在 TypeScript 中可以帮助你提高代码的类型安全性，因为它可以让你明确地导入和使用类型，而不会因为导入了不必要的代码而造成混淆。