TypeScript基础

[Lmagic16]

基础

• tsc 命令，将ts文件编译为js文件
• ts配置文件：tsconfig.json
• 类型boolean、number、string、数组 number[]、数组 Array、元组 [string, number]、枚举 enum、any、void、undefined、null、never、symbol
• 联合类型(string | number),当元组类型访问越界元素时
• void类型表示没有任何类型，可给void变量赋值undefined和null
• 默认情况下null和undefined是所有类型的子类型，而当指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自，鼓励尽可能地使用--strictNullChecks，需要利用undefined和null时，可以使用联合类型；
• never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
  never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
  返回never的函数必须存在无法达到的终点。
• 类型断言（似：类型转换），语法：尖括号和as语法，在JSX中只能使用as语法
• 变量声明：使用最小特权原则，所有变量除了你计划去修改的都应该使用const。 基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。 使用 const也可以让我们更容易的推测数据的流动。
• 解构赋值：解构表达式要尽量保持小而简单。注意深层嵌套解构。
• ...展开符：可展开对象和数组。也可用在函数参数中，收集多个参数。
• 接口定义：可选属性（?），只读属性（readonly，只能在对象刚刚创建的时候修改其值） ， 只读属性必须在声明时或构造函数里被初始化。
• ReadonlyArray类型，它与Array相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改,可以用类型断言重写只读数组。
• readonly vs const
  最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const，若做为属性则使用readonly。
• 函数类型：返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。
  函数中，可选参数必须跟在必须参数后面。也可以传递默认参数，带默认值的参数不需要放在必须参数的后面，但用户必须明确的传入 undefined值来获得默认值。
• 对象字面量存在任何“目标类型”不包含的属性，会报错，解决办法：类型断言、索引签名

interface SquareConfig {
      color?: string;
      width?: number;
     [propName: string]: any;
}

和 将对象赋值给一个另一个变量

• 可索引类型：可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。
  共有支持两种索引签名：字符串和数字。 可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。
• 类类型：与C#或Java里接口的基本作用一样，TypeScript也能够用它来明确的强制一个类去符合某种契约。
  接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。
  当我们比较带有 private或 protected成员的类型的时候，如果其中一个类型里包含一个 private成员，那么只有当另外一个类型中也存在这样一个 private成员， 并且它们都是来自同一处声明时，我们才认为这两个类型是兼容的。 对于 protected成员也使用这个规则。
• 类：在TypeScript里，成员都默认为 public，当成员被标记成 private时，它就不能在声明它的类的外部访问。
  protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问。
  static 为类的静态成员，这些属性存在于类本身上面而不是类的实例上。而public、private、protected属性都是类的实例成员，是仅当类被实例化的时候才会被初始化的属性。
  abstract关键字是用于定义抽象类和在抽象类内部定义抽象方法。
  constructor存在于类的静态部分
• 类型变量：它是一种特殊的变量，只用于表示类型而不是值
• 泛型、泛型函数、泛型接口、泛型类、泛型约束：使用泛型来创建可重用的组件
• 枚举：枚举通过 enum关键字来定义一些有名字的数字常量
• 类型推论
• 类型兼容性
• symbol类型：不可改变且唯一的。可以被用做对象属性的键。
• 命名空间：“内部模块”现在称做“命名空间”。 “外部模块”现在则简称为“模块”。命名空间是为了保证私有性和名称不重复。可加入引用标签///<reference path="Validation.ts" />将一个命名空间分离到多个文件中。
• 不应该对模块使用命名空间，使用命名空间是为了提供逻辑分组和避免命名冲突。 模块文件本身已经是一个逻辑分组，并且它的名字是由导入这个模块的代码指定，所以没有必要为导出的对象增加额外的模块层。

语法

1. 标识变量类型
   变量名:类型
   例如name: string
2. 类型断言
   <类型名>:变量名
   例如<string>someValue
   变量名 as 类型名
   例如someValue as string
3. 解构赋值
   将对象的属性重命名: let { a: newName1, b: newName2 } = o;
   对对象的属性进行类型约束: let {a, b}: {a: string, b: number} = o;
4. 设置一个类型对象
   type C = { a: string, b?: number }
5. 定义接口
   例如

interface LabelledValue {
      label: string;
}

6. 函数类型
   例如

interface SearchFunc {
      (source: string, subString: string): boolean;
}

7. 可索引类型
   例如

interface StringArray {
    [index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];

上面例子里，我们定义了StringArray接口，它具有索引签名。 这个索引签名表示了当用 number去索引
StringArray时会得到string类型的返回值。
8. 类类型
利用implements来约束类的类型

interface ClockInterface {
       currentTime: Date;
}
class Clock implements ClockInterface {
       currentTime: Date;
       constructor(h: number, m: number) { }
}

9. 继承接口
   例如

interface Shape {
       color: string;
}
interface Square extends Shape {
       sideLength: number;
}

10. 混合类型

在react中使用typescript

1）快速应用：使用 create-react-app my-app --scripts-version=react-scripts-ts
参考：https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter

• 需要安装相关@types包，例如：$ npm install @types/react --save-dev
• ReactDOM render时需要 document.getElementById('root') as HTMLElement
• 组件类型约束：需要对react组件传入的props做类型约束，class Header extends React.Component<HeaderPropsType, HeaderstateType> ，其中HeaderPropsType 是该组件prop的接口, HeaderstateType 是该组件state的接口。
• 函数、变量类型约束
• 事件event约束，例如event: React.ChangeEvent<HTMLTextAreaElement>)，HTMLTextAreaElement为对应html元素类型

2）
手动配置，https://www.tslang.cn/docs/handbook/react-&-webpack.html

• 安装声明文件依赖：npm install --save react react-dom @types/react @types/react-dom，使用@types/前缀表示我们额外要获取React和React-DOM的声明文件。
• 安装ts loader：npm install --save-dev typescript awesome-typescript-loader，awesome-typescript-loader可以让Webpack使用TypeScript的标准配置文件 tsconfig.json编译TypeScript代码。
• webpack.config.js文件中需加上awesome-typescript-loader的配置 和entry文件(tsx文件)，以及resolve解析配置

resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

遇到的问题

• JSON.parse(localStorage.getItem('reactTodos'));，会报错[ts]
  类型“string | null”的参数不能赋给类型“string”的参数。不能将类型“null”分配给类型“string”。解决方法：可采用 if()域内类型保护
• 不存在属性的问题，解决办法：https://stackoverflow.com/questions/46215614/property-does-not-exist-on-type-detailedhtmlprops-htmldivelement-with-react