# typescript_study

**Repository Path**: js-class/typescript_study

## Basic Information

- **Project Name**: typescript_study
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-07
- **Last Updated**: 2021-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# typescript教程
## 原始数据类型

JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。

本节主要介绍前五种原始数据类型在 TypeScript 中的应用。

### 布尔值
布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：

```js
let isDone: boolean = false;
```

### 数值

```js
let decimal:number = 5
```

### 字符串

```js
let myName:string = 'tom'
```

## 任意值

### 什么是任意值类型
如果是一个普通类型，在赋值过程中改变类型是不被允许的：

```js
//报错
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
```

但如果是 any 类型，则允许被赋值为任意类型。

```js
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
```

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

```js
let something;
something = 'seven';
something = 7;

something.setName('Tom');
```

等价于

```js
let something: any;
something = 'seven';
something = 7;

something.setName('Tom');
```

## 类型推论
如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

```js
//如下的代码会报错，因为发生了类型推断
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
```

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查，否则就会进行类型推断

## 联合类型

```js
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
```

## 对象的类型——接口
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

```js
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};
```

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。接口一般首字母大写

定义的变量比接口少了一些属性是不允许的：

```js
interface Person {
    name: string;
    age: number;
}

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

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.
```


多一些属性也是不允许的：

```js
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.
```

### 可选属性
有时我们希望不要完全匹配一个形状，那么可以用可选属性：

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

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

### 任意属性
有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

```js
interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};
```

使用 [propName: string] 定义了任意属性取 string 类型的值。

### 只读属性
有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

```js
interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.
```

## 数组的类型

### 数组第一种写法

```js
let arr: Array<number> = [1, 1, 2, 3, 5];
```


### 数组第二种写法

```js
let arr: number[] = [1, 1, 2, 3, 5];
```

## 函数的类型

```js
function sum(x: number, y: number): number {
    return x + y;
}
```

## 泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

首先，我们来实现一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值：

```js
function createArray(length: number, value: any): number[] {
    let result = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']
```

上例中，我们使用了之前提到过的数组泛型来定义返回值的类型。

这段代码编译不会报错，但是一个显而易见的缺陷是，它并没有准确的定义返回值的类型：

Array<any> 允许数组的每一项都为任意类型。但是我们预期的是，数组中每一项都应该是输入的 value 的类型。
这时候，泛型就派上用场了：

```js
function createArray<T>(length: number, value: T): T[] {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
      result[i] = value;
  }
  return result;
}

console.log(createArray<string>(3, 'x'))
```

上例中，我们在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了。

## 类

### 基础代码
```js
class Person{
  name:string;
  age:number;
  gender:string;
  constructor(name:string,age:number,gender:string){
    this.name = name
    this.age = age
    this.gender = gender
  }
  sayHi(){
    console.log('hi')
  }
}

let xm = new Person('小明',20,'男')
console.log(xm)
xm.sayHi()
```

### 继承代码

```js
class Person{
  name:string;
  age:number;
  gender:string;
  constructor(name:string,age:number,gender:string){
    this.name = name
    this.age = age
    this.gender = gender
  }
  sayHi(){
    console.log('hi')
  }
}

class Student extends Person{
  subject:string;
  constructor(name:string,age:number,gender:string,subject:string){
    super(name,age,gender)
    this.subject = subject
  }
}
```

### 公共，私有与受保护的修饰符
- public
- private
- protected

```js
class Person{
  private name:string;//谁都不可以改
  public age:number;//随便改
  protected gender:string;//只能在子类中修改
  constructor(name:string,age:number,gender:string){
    this.name = name
    this.age = age
    this.gender = gender
  }
  sayHi(){
    console.log('hi')
  }
}

class Student extends Person{
  subject:string;
  constructor(name:string,age:number,gender:string,subject:string){
    super(name,age,gender)
    this.subject = subject
  }
  fn(){
    this.gender = '女'
  }
  fn1(){
    // this.name = '小李'
  }
}
```


## vue中定义一个组件
- https://zhuanlan.zhihu.com/p/99343202
```js
<template>
<div>
  <button @click="message='hello world'">按钮</button>
  <p>{{message}}</p>
</div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

@Component
export default class Test extends Vue {
  private message = 'hello vue'
  public clickFunc (): void {
    console.log(this.message)
  }

  @Watch('message', { immediate: true })
  private fn (val: string) {
    console.log(111)
  }
}
</script>

<style scoped lang="less">

</style>

```