TS入门

1，使用node.js

**2，**配置typescript node i -g typescript

3，创建ts文件 使用tsc + <文件名>在命令行中跑可以跑出一个一样得js文件默认生成的文件是es3的javascript;而ts中在默认的情况下有错误也会进行编译js文件(ts文件可以编译成任何版本的ES文件)

4.在使用ts中[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-80cWojAX-1658756963641)(C:\Users\WANGCHAO\Desktop\Dingtalk_20220721171359.jpg)]

**问题：**其实问题出在变量命名空间，如果不把文件当作模块使用的话typescript会认为所有文件里的代码都是在一个作用域里的，所以即使在不同文件也不能声明同名变量，

**解决方案1：**最简单的解决办法就是关掉js文件

解决方案2：

**5.**TS中最重要的功能就是把js中的动态数据类型变成静态数据类型

在最大功能是对函数返回值给定类型 例子：

function sum (a:number,b:number):number{    //后面的number是返回的值

  return a+b;

}

// 参数传多传少都会报错

// 此时result的值就是收到返回值的类型number;

let result = sum(123,456);

6，功能可以给定变量数据类型，函数数据类型

​ 类型：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8FLjMTjt-1658756963643)(C:\Users\WANGCHAO\Desktop\Dingtalk_20220721175751.jpg)]

any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测(不建议使用); any类型的变量，它可以赋值给任意变量; 即不止影响自己还影响别人；

let d;   // d 的类型是 any  此时为隐式类型即不指定变量类型
d = 10;
d = 'hello';
d = true

let d :any;  //变量设置为any时候就是相当于给TS关闭了类型检测
d = 10;
d = 'hello';
d = true;
let s :string;
s = d; //这里不会报错

//unknown 表示未知类型的值（当我们不知道类型的时候可以使用)，而unknown

只是影响自己不会影响别人，unknown类型的变量，不能直接赋值给其他变量；

let  e : unknown;
e = 10;
e = 'hello';
e = true;
//不会影响别人
let s : string;
s = e; //这里会报错

//类型断言(就是让e的数据类型必须是这个string类型)
//可以用来告诉我们解析器变量的实际类型； 

s = e as string;  <==>  s = <string>e;

上面用到了类型断言，类型断言的语法 （1）变量 as 数据类型 ，（2） <数据类型> 变量

//void 以函数为例子表示 函数没有放回值 但是函数也可以返回 undefined 和 null 直接返回(即没有返回值但有一个return)

这样写不会报错但是在原则是不建议书写

//使用void数据类型的正确形式
function e():void {
}
//会报错的形式
function e():void {
 return 123/‘rere’/true
}

//never 表示永远不会返回结果

function fn2() :never{
	throw new Error('报错了！')
}

//object 表示一个js对象（应为对象包含的内容太多不具有限制效果所以我们不建议使用

let a :object;
a = {}
a = function(){}

而我们对object的使用如下使用字面量来书写

let b :{name:string};
b = {name:'孙悟空',age:‘18’};  //报错，对象形式就是多了也不行少了也不行必须形式跟定义得时候一模一样
// 语法  {} 用来指定对象中可以包含那些属性
// 语法: {属性名:属性值，属性名：属性值}
//  在属性名后面加上?表示属性可选 例子
   let b :{name:string,age?: number};
/*


下例子中[propName:string]:ang表示任意数据类型但是赋值时候必须有name属性名
*/   
let c :{name:string,[propName:string]:any };
c = {name:'王超',age:18,hobber:'代码'};

......
//设置函数结构得类型声明
//	语法：(形参:类型，形参：类型..) => 返回值
let d:(a:number,b:number) =>number;
//上述语句的意思是希望的到的d可以传入俩个参数，并且返回类型是number
d = function(n1:number,n2:number):number{
    return n1+n2;          //在这里只要传入的值不是number或者返回                            //的值不是number就会报错
}
    
   

//array 因为没有规定数组可以写多少个即数组的长度是多少所以在可以在ts中引入了元组的概念

数组的类型声明有俩种
/*
	1.数据类型[]
	2.Array<数据类型>
*/
//string[] 表示字符串数组
let e:string[];
e = ['a','b','c']; 

//number[] 表示数值数组
let f = [1,2,3,4];

let g:Array<nunber>;    //不建议使用
g = [1,2,3];

//tuple

​ 元组，元组就是固定长度的数组即arr.length的长度是固定的

语法：[数据类型，类型，类型]

let a : [string,string];
a = ['hello',123] //报错因为第二个数据不是string
a = ['hello,'1','2'] //报错因为元组在定义的时候长度为2而此时的长度为3
a = ['hello']   //报错 长度不够

//enum 枚举

​

let i : {name:string,gender:1 | 0}
i = {
    name:'王超',
    gender: 1,
}
console.log(i.gender ===1);
//上述这种情况只是适合于个人开发在团队开发中为了让别人也看清楚引入了enum枚举

///
enum Gender{
    Male = 0,
    Female = 1
}
let i :{name:string,gender:Gender};
i = {
    name:'王超',
    gender:Gender.Male  //'male'
}
console.log(i.gender === Gender.Male);   //true 

//......
// & 表示同时,       |  表示或者
let j :{name: string} & {age:number};
j = {name:'王超'，age:18};  //在这里少一个多一个都不会报错

//
//类型的别名
let k: 1|3|2|4|5;
let l: 1|2|3|4|5;
//上述这样的写起来太麻烦了
type myType = 1|2|3|4|5;  //这里就是给myType的类型与1|2|3..等相                                                         等
let k :myType;
let l :myType;
let h :myType;

k = 6  //报错
k = 4  //true

7优化ts文件的run

优化tsc 文件名.ts 可以使用 tsc 文件名.ts -w 可以减少当修改ts文件的时候需要继续使用tsc 文件名.ts 。但是这样依然是只会单独执行某一个文件

​ 引入tsconfig.json文件是TypeScript编译器的配置文件，TypeScript编译器可以根据它的规则来对代码进行编译

解决办法 1 首先全局安装typescript npm install typescript -g

​ 2 在项目目录下执行 tsc --init

​ 3 至此tsconfig.json 文件就在项目目录下生成好了，当然这个json文件 也可以个人配置如下

• include :指定被编译文件所在的目录。
• exclude: 指定不需要被编译的目录
• extends: 指定要继承的配置文件
• files : 指定被编译的文件
• references: 项目引用，是ts3中的一项新功能，它允许将ts程序组织成更小的部分

target用于指定编译之后的版本目录

"target": "es5",  

module用来指定要使用的模板标准

"module": "commonjs", 

lib用于指定要包含在编译中的库文件

"lib":[
  "es6",
  "dom"
],

allowJs用来指定是否允许编译JS文件，默认false,即不编译JS文件

"allowJs": true,

checkJs用来指定是否检查和报告JS文件中的错误，默认false

"checkJs": true, 

指定jsx代码用于的开发环境:‘preserve’,‘react-native’,or 'react

"jsx": "preserve", 

declaration用来指定是否在编译的时候生成相的d.ts声明文件，如果设为true,编译每个ts文件之后会生成一个js文件和一个声明文件，但是declaration和allowJs不能同时设为true

"declaration": true,

declarationMap用来指定编译时是否生成.map文件

"declarationMap": true,

socuceMap用来指定编译时是否生成.map文件

"sourceMap": true,

outFile用于指定输出文件合并为一个文件，只有设置module的值为amd和system模块时才支持这个配置

"outFile": "./",

outDir用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹

"outDir": "./",

rootDir用来指定编译文件的根目录，编译器会在根目录查找入口文件

"rootDir": "./",

composite是否编译构建引用项目

"composite": true, 

removeComments用于指定是否将编译后的文件注释删掉，设为true的话即删除注释，默认为false

"removeComments": true,

noEmit不生成编译文件

"noEmit": true, 

importHelpers指定是否引入tslib里的复制工具函数，默认为false

"importHelpers": true,

当target为"ES5"或"ES3"时，为"for-of" "spread"和"destructuring"中的迭代器提供完全支持

"downlevelIteration": true, 

isolatedModules指定是否将每个文件作为单独的模块，默认为true，他不可以和declaration同时设定

"isolatedModules": true,

strict用于指定是否启动所有类型检查，如果设为true这回同时开启下面这几个严格检查，默认为false

"strict": true,

noImplicitAny如果我们没有一些值设置明确类型，编译器会默认认为这个值为any类型，如果将noImplicitAny设为true,则如果没有设置明确的类型会报错，默认值为false

"noImplicitAny": true,

strictNullChecks当设为true时，null和undefined值不能赋值给非这两种类型的值，别的类型的值也不能赋给他们，除了any类型，还有个例外就是undefined可以赋值给void类型

"strictNullChecks": true,

strictFunctionTypes用来指定是否使用函数参数双向协变检查

"strictFunctionTypes": true,

strictBindCallApply设为true后对bind、call和apply绑定的方法的参数的检测是严格检测

"strictBindCallApply": true,

strictPropertyInitialization设为true后会检查类的非undefined属性是否已经在构造函数里初始化，如果要开启这项，需要同时开启strictNullChecks,默认为false

"strictPropertyInitialization": true,

当this表达式的值为any类型的时候，生成一个错误

"noImplicitThis": true,

alwaysStrict指定始终以严格模式检查每个模块，并且在编译之后的JS文件中加入"use strict"字符串，用来告诉浏览器该JS为严格模式

"alwaysStrict": true,  

noUnusedLocals用于检查是否有定义了但是没有使用变量，对于这一点的检测，使用ESLint可以在你书写代码的时候做提示，你可以配合使用，他的默认值为false

"noUnusedLocals": true, 

noUnusedParameters用于检测是否在函数中没有使用的参数

"noUnusedParameters": true,

noImplicitReturns用于检查函数是否有返回值，设为true后，如果函数没有返回值则会提示，默认为false

"noImplicitReturns": true,

noFallthroughCasesInSwitch用于检查switch中是否有case没有使用break跳出switch,默认为false

"noFallthroughCasesInSwitch": true, 

moduleResolution用于选择模块解析策略，有"node"和"classic"两种类型

"moduleResolution": "node",

baseUrl用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响

"baseUrl": "./", 

paths用于设置模块名到基于baseUrl的路径映射

  "paths": {
      "*":["./node_modules/@types", "./typings/*"]
    },

rootDirs可以指定一个路径列表，在构建时编译器会将这个路径中的内容都放到一个文件夹中

"rootDirs": [], 

typeRoots用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载

"typeRoots": [],

types用于指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载

"types": [], 

allowSyntheticDefaultImports用来指定允许从没有默认导出的模块中默认导入

"allowSyntheticDefaultImports": true,

esModuleInterop通过导入内容创建命名空间，实现CommonJS和ES模块之间的互操作性

"esModuleInterop": true, 

不把符号链接解析为真实路径，具体可以了解下webpack和node.js的symlink相关知识

"preserveSymlinks": true,  

sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件的位置，这个值会被写进.map文件里

"sourceRoot": "", 

mapRoot用于指定调试器找到映射文件而非生成文件的位置，指定map文件的根路径，该选项会影响.map文件中的sources属性

"mapRoot": "",

inlineSourceMap指定是否将map文件内容和js文件编译在一个同一个js文件中，如果设为true,则map的内容会以//#soureMappingURL=开头，然后接base64字符串的形式插入在js文件底部

"inlineSourceMap": true, 

inlineSources用于指定是否进一步将ts文件的内容也包含到输出文件中

"inlineSources": true, 

experimentalDecorators用于指定是否启用实验性的装饰器特性

"experimentalDecorators": true,

emitDecoratorMetadata用于指定是否为装上去提供元数据支持，关于元数据，也是ES6的新标准，可以通过Reflect提供的静态方法获取元数据，如果需要使用Reflect的一些方法，需要引用ES2015.Reflect这个库

"emitDecoratorMetadata": true,

include也可以指定要编译的路径列表

"include":[],

files可以配置一个数组列表

 "files":[],

exclude表示要排除的，不编译的文件，它也可以指定一个列表，规则和include一样，可以是文件可以是文件夹，可以是相对路径或绝对路径，可以使用通配符

"exclude":[]

extends可以通过指定一个其他的tsconfig.json文件路径，来继承这个配置文件里的配置，继承来的文件的配置会覆盖当前文件定义的配置

"extends":""

compileOnSave如果设为true,在我们编辑了项目文件保存的时候，编辑器会根据tsconfig.json的配置更新重新生成文本，不过这个编辑器支持

"compileOnSave":true

一个对象数组，指定要引用的项目

"references":[]