typescript学习记录一

typescript参考网址: https://www.typescriptlang.org/

ts 的安装：npm install typescript

ts中基本类型 string ,number, boolean

数组类型有两种写法

写法一:number[]
写法二: Array<number>

任意类型 any

这种方式就更没加ts限制一样，变量的类型可以是任意的

关于函数 利用ts进行输入和输出的的限制

括弧里面:string是对输入的限制，括弧后面的:number是对输出信息的限制

function demo (s:string):number {
    ......
}

Object类型

分隔对象属性的声明可以用",“或者”；"
可选属性 ?:

function printName(obj: { first: string; last?: string }) {
  // ...
}

Union Types(组合类型)

let a: number | string

类型别名

可以使用类型别名为任何类型命名，关键字type

实例1:
type Obj1 = {
    name: string,
    age: number
}

实例2:
type ID = number | string

接口 （interface)

接口声明是命名对象类型的另一种方式，建议接口首字母大写

interface Obj1 {
    name: string;
    age: number;
}

接口中关于函数属性的限制写法一：

interface Obj2 {
    setInfo (attr:string | number):string
}

写法二：

interface Obj2 {
    setInfo: (attr:string | number)=>string
}

类型别名 和 接口的区别

实例1:

interface Animal {
    name: string
}
接口是通过extends扩展
interface Dog extends Animal {
    skill: string
}
向现有接口里面添加新的字段
interface Dog {
    color: string
}
let dog1:Dog = {
    name: '小白',
    skill: 'catch',
    color: 'white'
}

实例2:

扩展类型是通过"&"
type Animal1 = {
    name: string;
}
type Dog1 = Animal1 & {
    skill: string
}

通过类型别名创建后不能更改,如下操作会报错 (标识符“Dog1”重复)

type Dog1 = {
    color: string
}

Type Assertions （类型断言） 关键字 as

某些情况下。我们会得到TypeScript不知道的值的类型信息，比如你使用document.getElementById，TypeScript只知道这会返回某种HTMLElement，但是我们知道页面总是有一个给定ID的HTMLCanvasElement

实例1： const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement

实例2: const div = document.getElementsByTagName("div")[0] as HTMLDivElement

类型断言的另外一种写法：

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

Literal Types (文字类型)

除了一般类型string和number之外，我们还可以在类型位置引用特定的字符串和数字
实例

let x: "hello" = "hello";
x = 'xxx'  //此时会报错 -->不能将类型“"xxx"”分配给类型“"hello"”

文字类型也可以组合起来,数字文字类型也一样

let alignment: "left" | "right" | "center"
let n: 1 | -1
也可以和无文字的类型组合起来
interface Options {
  width: number;
}

let x: Options | 'auto'

文字断言

const req = { url: "https://example.com", method: "GET" as "GET" };

You can use “as const” to convert the entire object to be type literals: （可以使用“as const”将整个对象转换为类型文字)

此时对象已经完全不能修改了
const req = { url: "https://example.com", method: "GET" } as const; 

若在使用过程中出现变量名下面报错，提示无法重新声明块范围变量

解决方案: tsc --init 生成tsconfig.json文件即可