ts入门教程
TypeScript 入门实战笔记

1. 安装ts

安装

  1. npm install -g typescript

编译

  1. tsc demo.ts (react 后缀 tsx)

2. 基础

1. 原始数据类型

  1. 布尔值

    1. let isDone:boolean = true

  2. 数值

    1. let money:number = 1000

  3. 字符串

    1. let name:string = 'wuyanbin'

  4. 空值 void (没有任何返回值的函数)

    1. function alertName():void{
    2.  alert('aaa');
    3. }
  1. let unusable:void = undefined
  1. Null 和 Undefined
    1. let u:undefined = undefined;
    2. let n:null = null;

2.任意值

声明为any类型的变量，允许赋值任意类型

3.类型推论（type inference）

如果没有明确的指定类型，TS会根据 type inference 规则推断出一种类型
如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检查

  1. let anyType;
  2. anyType = 'wuyanbin';
  3. anyType = 12;

4.联合类型(union type)

表示取值可以是多种类型中的一种
联合类型，只能访问两者共用的属性或者方法

  1. let myFavoriteNumber: string | number;
  2. myFavoriteNumber = 'wuyanbin'
  3. myFavoriteNumber.length; // 8
  4. myFavoriteNumber = 9;
  5. myFavoriteNumber.length; // error

5.对象的类型 — 接口(interfaces)

使用接口来定义对象的类型。

  1. interface IPerson {
  2.   readonly id:number; // 只读属性（不可更改🙅）
  3.     name: string;
  4.   age: number;      //  确定属性
  5.   gender? : number; //  可选属性
  6.   [propName: string]: any; // 任意属性（确定属性和可选属性必须是任意属性的子集合）
  7. }
  9. let tjl: IPersion {
  10.     name: 'tjl',
  11.   age: 25,
  12. }
  14. let wyb: IPersion {
  15.     name: 'wyb',
  16.   age: 25,
  17.   gender: 1,
  18. }

6.数组的类型

  1. 类型 + 方括号 表示法

    1. let arr:number[] = [1,2,3]

  2. 数组泛型（Array Generic） Array

    1. let arr:Array<number> = [1,2,3]

  3. 接口表示数组 ```typescript interface NumberArray {

  1.     [index: number]: number

} let selfArr:NumberArray = [1,2,3];

  1. 类数组（Array-like Object）像数组，但是不具备数组的方法属性等，如函数的形参数 arguments
  3. ```typescript
  4. function sum(){
  5.     let args: IArguments = arguments;
  6. }

7.函数的类型

  1. 函数声明（Function Declaration）

    1. function sum(x:number, y:number):number{
    2.  return x + y;
    3. }

  2. 函数表达式（Function Expression）

    1. let mySum = function(x:number, y:number):number{
    2.  return x + y;
    3. }
    4. // 虽然能通过编译，但是实际上等号左侧的 类型是根据类型推论推倒出来的

    实际应该写成如下形式：

    1. let mySum: (x:number,y:number) => number = function(x:number, y:number):number{
    2.  return x + y;
    3. }

  3. 接口定义函数的形式

    1. interface SearchFunc {
    2.  (source: string, substring: string): boolean;
    3. }
    4. let mySearch:SearchFunc;
    5. mySearch = function(source: string,substring: string){
    6.  return source.search(sunstring) !== -1;
    7. }

  4. 可选参数（？）

必填参数一定要放在可选参数之前。

  1. 参数默认值
    1. function buildName(firstName: string, lastName: string = 'Cat'){
    2.  return firstName + '' + lastName;
    3. }

  1. 剩余参数（…rest）

    1. function push(array:any[], ...items:any[]){
    2.      items.forEach(function(item){
    3.          array.push(item);
    4.      })
    5. }
    6. let a = [];
    7. push(a,1,2,3);

  2. 重载

重载允许一个函数接受不同数量或者类型的参数时，作出不同的处理。

  1. function reverse(x:number):number;
  2. function reverse(x:string):string;
  3. function reverse(x:number | string):number | string {
  4.         if(typeof x == 'number'){
  5.             return Number(x.toString().split('').reverse().join(''));
  6.         }else if(typeof x == 'string'){
  7.             return x.split('').reverse.join('');
  8.         }
  9. }

8.类型断言（type Assertion）

类型断言用来手动的指定一个值的类型
code <类型>值 或者 值 as 类型

  1. function getLength(something:string | number):number{
  2.     if((<string>something).length){
  3.       return (<string>something).length; // 或者 something as string
  4.   }else {
  5.       return something.toString().length;
  6.   }
  7. }

9.声明文件

10.内置对象