TS语法 | 青训营笔记这是我参与 [第五届青训营] 伴学笔记创作活动的第2天通过课上课下的学习，掌握了ts的基本使用

这是我参与 [第五届青训营] 伴学笔记创作活动的第2天通过课上课下的学习，掌握了ts的基本使用

1.安装相关包(tsc和ts-node)

npm install -g typescript
npm install -g ts-node

2.TS语法

1.类型注解：

在变量后使用 :跟上类型来限定变量类型

const x:number

或着利用ts的类型推断（用于初始化或函数返回值）

const x=5

2.函数类型

指定参数和返回值类型

function test(x:number,y:number):number {
    return x+y
}

通过箭头函数形式同时指定类型

const test: (x:number,y:number)=> number =(x:number,y:number)=>{
    return x+y
}

函数返回值可用void类型指定

3.对象类型

TS的对象类型是在描述对象的属性，可以通过字面量形式指定

let user:{name:string,age:number,hello():void}={
  name:'kkk',
  age:18,
  hello(){}
}

4.可选属性

对象和函数有可选属性，可选属性可以不传递、不使用；在属性后用 ?标识——在函数中可选属性一定要集中在参数后部分

//函数：
const test: (x:number,y?:number)=> number =(x:number,y:number)=>{
    return x
}
//对象：
const user:{name:string,age?:number,hello():void}={
  name:'kkk',
  hello(){}
}

5.联合属性

|在TS为联合类型，可将多个类型联合，表示可以是这些类型中的任何

let arr: (number | string)[] = [1, "2", 3, "4"];

6.类型别名

使用 type 关键字声明自定义类型

type func=(x:number,y:number)=> number;
const test: func =(x:number,y:number)=>{
    return x
}

7.接口

仅用于对象的类型定义，定义一个接口，而对象则是接口的实现

interface user {
  name: string;
  age?: number;
  hello(): void;
}

const userb: user = {
  name: "kkk",
  age: 18,
  hello() {},
};

接口继承：

接口之间使用 extend 关键字继承接口属性

interface Father{x:number};
interface Son extends Father {y:number};
let kit: Son = {
  x: 6,
  y: 7,
};

类实现接口 `implements`

interface Father{x:number};
class Son implements Father{
    x:66;
}

接口定义函数

可以使用接口的方式来定义一个函数需要符合的形状：

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

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

8.元组

元组明确规定了数组元素的类型和元素数量，若不符合元组个数则报错

let arr: [number,string] = [1, "2"];

9.类型断言

当你比ts更知道变量类型时可以使用断言 as 来避免ts报错

比如以下情况：

<a href="http://127.0.0.1:8000" id="link"></a>

const aLink = document.querySelector('#link')
//此时类型为Element

querySelector方法返回值的类型是Element，该类型只包含所有标签公共的属性或方法，不包含a标签特有的 href 等属性。

因此，HTMLElement类型太宽泛，无法操作标签特有的属性或方法，这时就需要类型断言指定更具体的类型

const aLink = document.querySelector('#link') as HTMLAnchorElement

10.字面量类型

const与类型

当使用关键字 const 定义常量时，若不指定变量类型，那么会将值作为类型

const x = 'Hello World'
//此时 x类型为 Hello World——x:'Hello World'

因为x的值不能改变，只能为 ‘Hello World’，所以为该类型

定义字面量类型

可以使用字面量（如字符串、数组、对象等等）作为类型而不仅限于 number、string等——当使用字面量类型时，变量的值就只能为类型值

//提示：不能将类型“number”分配给类型“{ name: "abc"; age: 18; }”
let ln:{name:'abc',age:18}=33

表示可选值列表

当字面量类型与 |可选属性结合时可以用作表示属性的可选值列表（只能选这些值）

let dir:'up'|'down'|'left'|'right';
dir=/*此时会提示上述四个值*/

11.枚举

枚举的成员可以是数字或是字符串，但不能既有数字又有字符串

枚举也可以作为类型表示一组明确的可选值；枚举定义一组命名常量，描述一个可以是这些常量中任意一个的值

enum Dir {Up,Down,Left,Right}
let dir_1: Dir = Dir.Up;

枚举类型的值

当不作初始化时，枚举的值默认为 数字0

可以只对第一个常量赋值数字，其后的值会自增长

enum Dir {Up=10,Down,Left,Right}
let dir_1: Dir = Dir.Down;/*Dir.Down值为11*/

若是字符串枚举，由于字符串没有自增长，所以每个成员都必须有初始值

enum Dir {Up='up',Down='down',Left='left',Right='right'}

枚举类型不仅作为类型，还提供值——其他类型在编译为js代码时会被去掉，而枚举则会被编译为js代码

总结：

TS为JS提供了类型检查，让开发人员在编译前就能发现错误，避免了大量bug；也让已上线的项目可维护性大大增加。不过现在浏览器支持的仍是js，ts需要编译成js才能在浏览器上运行，增加了许多额外配置，也降低了ts的实际可靠性。

TS语法 | 青训营笔记