TypeScript学习笔记

1、TypeScript简介

          TypeScript是一种给 JavaScript 添加特性的语言扩展，支持所有的js语法。

          作用：类型检查

          平时我们申明js变量或者写函数（函数的参数和返回值）时，不会对变量或者函数声明类型， js是弱语言，对变量类型的要求不严格，例如我们写了一个方法：

function f(str){console.log(str.length);}

f('123') ; // 期望这么调用执行，不会报错

f()或者f(123) ; // 但别人这么调用时不会报错，执行时会报错

使用TypeScript可以避免此类错误，TypeScript会这么写：

function f(str: string){console.log(str.length);}

f()或者f(123); // 调用时就会报错

TypeScript语法并不能在浏览器中被识别，需要经过编译生成对应的js文件，执行以下命令：

tsc  xxx.tx

生成的js文件内容如下：

function f(str) {

    console.log(str.length);

}

f('123');

有些框架内置了对TypeScript的支持，开发时使用TypeScript语法，项目部署之前编译的时候会将TypeScript文件编译为js文件。

2、同类对比：TypeScript与Flow对比

类别	TypeScript（编程语言）	Flow（静态类型检查工具）
适用范围	JavaScript、Java、C等	针对JavaScript静态类型检查
易用性	整个项目都需要支持TS类型检查	可以部分js支持类型检查，老项目中引入成本低
可支持框架	Angular、React、Vue3、......	Vue2、React、......

 

3、基本语法

：	类型标注前缀，let  n:number
|	集合（a|b）， 赋值为a或者b，
？	变量不一定存在
readonly	变量只读，不可修改
typeof	获取已有的类型
keyof	详见下面例子keyof例子
<Type>	泛型

 

       基本类型：number、string、boolean

       任意类型：any

       类型申明:

声明方式	type	interface
继承	&	extends
add new properties	no	yes

 4、检查配置 tsconfig.json

      Strictness 里面有2个重要的配置：

      noImplictAny：是否可以默认指定类型为any（即变量未声明类型时默认为any）,true代表所有变量必须申明类型，false代表变量未声明类型时默认为any且类型检查不会报错。

      strictNullChecks: 是否开启null的检查, true代表检查变量指定了类型，则会检查变量类型不可以为null或者undefined, false代表不检查为null或者undefined。

5、例子

keyof用法：

function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {

  return obj[key];

}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a");

6、检查的规则

If the object or class has all the required properties, TypeScript will say they match。（如果满足对象申明或类已申明的属性类型，TS会认为匹配，不会报错）

example: 

interface Type1{

  a: number

};

function f(params: Type1) {};

let p = {a: 1, c: 1};

f(p); // success

f({c: 1}); // error