Ts

在进入模块裁减之前，让咱们看看一些 TypeScript 合并准则，这些准则将随着咱们的提高而变得有用。 TypeScript 反对创立同名的 class 和 interface： class Food { cheese: string;}interface Food { bacon: string;}const food = new Food();food.bacon = "nice bacon";food.cheese = "sweet cheese";console.log(food); // {bacon: "nice bacon", cheese: "sweet cheese"}在咱们下面的例子中，咱们能够看到，即便在 Food 类中只申明了 cheese，食物变量也蕴含 bacon 和 cheese。 这是因为，接口与类合并了。 但如果 interface 里蕴含的是办法，后果又如何？ class Food { cheese: string;}interface Food { bacon: string; bake(item: string);}const food = new Food();food.bake("cake"); // Error: food.bake is not a function然而，bake 办法会在intelliSense 的帮忙下显示在food 变量上，因为Food 类和接口Food 将合并，调用bake 办法会导致谬误，因为接口只蕴含申明而不蕴含实现。 为了解决这个问题，咱们能够将bake的实现增加到Food原型中。 ...

装置cmd输出，这是全局的！不必特意寄存地位npm install typescript -g 将ts转换js创立index.ts, 而后再同级的index.html中引入index.js咱们写完ts后输出tsc ./js/index.ts 主动帮你同级生产index.js比照如下 //TS状态(()=>{ function say(name:string){ return `你好,${name}` } let myname = "常吉孔" console.log(say(myname))})()//JS状态(function () { function say(name) { return "\u4F60\u597D," + name; } var myname = "常吉孔"; console.log(say(myname));})();主动转换js因为每次都须要手动输出tsc ./xxx太麻烦所以换成纯主动，相似Vue运行一样，始终敞开完结 //第一步:生成目录tsc --init//第二步:生成文件夹和js文件，再敞开严格模式"outDir": "./js","strict": false //第三步: 就能够运行监督了tsc -w同级寄存js文件夹之前的形式，ts文件必须放在根目录。生成后js文件夹中只能放js文件解决办法：去掉outDir": "./js。增加include就好了此时：index.js和index.ts能够放在同一个文件夹了 { "compilerOptions": { "target": "es5", "module": "commonjs", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": false, "skipLibCheck": true //"outDir": "./js", }, "include":["./js/*.ts"]}问题总结：再ts中能够写js无所谓。只不过ts的语法不能间接用，须要转换成js如果ts写的全是js的话齐全不须要转换。仅此而已 tsc -V //版本tsc ./xx/index.ts //将他转换js tsc -w //监督tsc --init //生成tsconfig.json调节在vue中defineComponent干什么用的？答：vue3 如果用ts，导出时候要用 defineComponent，这俩情侣套餐。 ...

{ "compilerOptions": { /* Basic Options */ "target": "es5" /* target用于指定编译之后的版本指标: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */, "module": "commonjs" /* 用来指定要应用的模块规范: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */, "lib": ["es6", "dom"] /* lib用于指定要蕴含在编译中的库文件 */, "allowJs": true, /* allowJs设置的值为true或false，用来指定是否容许编译js文件，默认是false，即不编译js文件 */ "checkJs": true, /* checkJs的值为true或false，用来指定是否检查和报告js文件中的谬误，默认是false */ "jsx": "preserve", /* 指定jsx代码用于的开发环境: 'preserve', 'react-native', or 'react'. */ "declaration": true, /* declaration的值为true或false，用来指定是否在编译的时候生成相应的".d.ts"申明文件。如果设为true，编译每个ts文件之后会生成一个js文件和一个申明文件。然而declaration和allowJs不能同时设为true */ "declarationMap": true, /* 值为true或false，指定是否为申明文件.d.ts生成map文件 */ "sourceMap": true, /* sourceMap的值为true或false，用来指定编译时是否生成.map文件 */ "outFile": "./", /* outFile用于指定将输入文件合并为一个文件，它的值为一个文件路径名。比方设置为"./dist/main.js"，则输入的文件为一个main.js文件。然而要留神，只有设置module的值为amd和system模块时才反对这个配置 */ "outDir": "./", /* outDir用来指定输入文件夹，值为一个文件夹门路字符串，输入的文件都将搁置在这个文件夹 */ "rootDir": "./", /* 用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现以rootDir的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，然而不会进行编译 */ "composite": true, /* 是否编译构建援用我的项目 */ "incremental": true, /* Enable incremental compilation */ "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ "removeComments": true, /* removeComments的值为true或false，用于指定是否将编译后的文件中的正文删掉，设为true的话即删掉正文，默认为false */ "noEmit": true, /* 不生成编译文件，这个个别比拟少用 */ "importHelpers": true, /* importHelpers的值为true或false，指定是否引入tslib里的辅助工具函数，默认为false */ "downlevelIteration": true, /* 当target为'ES5' or 'ES3'时，为'for-of', spread, and destructuring'中的迭代器提供齐全反对 */ "isolatedModules": true, /* isolatedModules的值为true或false，指定是否将每个文件作为独自的模块，默认为true，它不能够和declaration同时设定 */ /* Strict Type-Checking Options */ "strict": true /* strict的值为true或false，用于指定是否启动所有类型查看，如果设为true则会同时开启上面这几个严格类型查看，默认为false */, "noImplicitAny": true, /* noImplicitAny的值为true或false，如果咱们没有为一些值设置明确的类型，编译器会默认认为这个值为any，如果noImplicitAny的值为true的话。则没有明确的类型会报错。默认值为false */ "strictNullChecks": true, /* strictNullChecks为true时，null和undefined值不能赋给非这两种类型的值，别的类型也不能赋给他们，除了any类型。还有个例外就是undefined能够赋值给void类型 */ "strictFunctionTypes": true, /* strictFunctionTypes的值为true或false，用于指定是否应用函数参数双向协变查看 */ "strictBindCallApply": true, /* 设为true后会对bind、call和apply绑定的办法的参数的检测是严格检测的 */ "strictPropertyInitialization": true, /* 设为true后会查看类的非undefined属性是否曾经在构造函数里初始化，如果要开启这项，须要同时开启strictNullChecks，默认为false */ "noImplicitThis": true, /* 当this表达式的值为any类型的时候，生成一个谬误 */ "alwaysStrict": true, /* alwaysStrict的值为true或false，指定始终以严格模式查看每个模块，并且在编译之后的js文件中退出"use strict"字符串，用来通知浏览器该js为严格模式 */ /* Additional Checks */ "noUnusedLocals": true, /* 用于查看是否有定义了然而没有应用的变量，对于这一点的检测，应用eslint能够在你书写代码的时候做提醒，你能够配合应用。它的默认值为false */ "noUnusedParameters": true, /* 用于查看是否有在函数体中没有应用的参数，这个也能够配合eslint来做查看，默认为false */ "noImplicitReturns": true, /* 用于查看函数是否有返回值，设为true后，如果函数没有返回值则会提醒，默认为false */ "noFallthroughCasesInSwitch": true, /* 用于查看switch中是否有case没有应用break跳出switch，默认为false */ /* Module Resolution Options */ "moduleResolution": "node", /* 用于抉择模块解析策略，有'node'和'classic'两种类型' */ "baseUrl": "./", /* baseUrl用于设置解析非绝对模块名称的根本目录，绝对模块不会受baseUrl的影响 */ "paths": {}, /* 用于设置模块名称到基于baseUrl的门路映射 */ "rootDirs": [], /* rootDirs能够指定一个门路列表，在构建时编译器会将这个门路列表中的门路的内容都放到一个文件夹中 */ "typeRoots": [], /* typeRoots用来指定申明文件或文件夹的门路列表，如果指定了此项，则只有在这里列出的申明文件才会被加载 */ "types": [], /* types用来指定须要蕴含的模块，只有在这里列出的模块的申明文件才会被加载进来 */ "allowSyntheticDefaultImports": true, /* 用来指定容许从没有默认导出的模块中默认导入 */ "esModuleInterop": true /* 通过为导入内容创立命名空间，实现CommonJS和ES模块之间的互操作性 */, "preserveSymlinks": true, /* 不把符号链接解析为其实在门路，具体能够理解下webpack和nodejs的symlink相干常识 */ /* Source Map Options */ "sourceRoot": "", /* sourceRoot用于指定调试器应该找到TypeScript文件而不是源文件地位，这个值会被写进.map文件里 */ "mapRoot": "", /* mapRoot用于指定调试器找到映射文件而非生成文件的地位，指定map文件的根门路，该选项会影响.map文件中的sources属性 */ "inlineSourceMap": true, /* 指定是否将map文件的内容和js文件编译在同一个js文件中，如果设为true，则map的内容会以//# sourceMappingURL=而后拼接base64字符串的模式插入在js文件底部 */ "inlineSources": true, /* 用于指定是否进一步将.ts文件的内容也蕴含到输出文件中 */ /* Experimental Options */ "experimentalDecorators": true /* 用于指定是否启用实验性的装璜器个性 */ "emitDecoratorMetadata": true, /* 用于指定是否为装璜器提供元数据反对，对于元数据，也是ES6的新规范，能够通过Reflect提供的静态方法获取元数据，如果须要应用Reflect的一些办法，须要引入ES2015.Reflect这个库 */ } "files": [], // files能够配置一个数组列表，外面蕴含指定文件的绝对或绝对路径，编译器在编译的时候只会编译蕴含在files中列出的文件，如果不指定，则取决于有没有设置include选项，如果没有include选项，则默认会编译根目录以及所有子目录中的文件。这里列出的门路必须是指定文件，而不是某个文件夹，而且不能应用* ? **/ 等通配符 "include": [], // include也能够指定要编译的门路列表，然而和files的区别在于，这里的门路能够是文件夹，也能够是文件，能够应用绝对和绝对路径，而且能够应用通配符，比方"./src"即示意要编译src文件夹下的所有文件以及子文件夹的文件 "exclude": [], // exclude示意要排除的、不编译的文件，它也能够指定一个列表，规定和include一样，能够是文件或文件夹，能够是相对路径或绝对路径，能够应用通配符 "extends": "", // extends能够通过指定一个其余的tsconfig.json文件门路，来继承这个配置文件里的配置，继承来的文件的配置会笼罩以后文件定义的配置。TS在3.2版本开始，反对继承一个来自Node.js包的tsconfig.json配置文件 "compileOnSave": true, // compileOnSave的值是true或false，如果设为true，在咱们编辑了我的项目中的文件保留的时候，编辑器会依据tsconfig.json中的配置从新生成文件，不过这个要编辑器反对 "references": [], // 一个对象数组，指定要援用的我的项目}

如何搭建一个残缺的Vue3.0 + ts 的我的项目一、装置 装置nodejs此处提供nodejs下载地址：https://nodejs.org/zh-cn/down...大家依据本人电脑的配置抉择适配的LTS（最新稳固版本进行下载，装置即可，此处略去装置步骤。2.卸载旧版本如果你当初正在用旧版的Vue-cli1.x或者Vue-cli2.x 须要先进行卸载；如果没有，请疏忽此步骤 关上命令窗口，用以下命令进行卸载：npm uninstall vue-cli -g复制代码3.装置Vue-cli 3.x搭建Vue3.0的我的项目，必须依赖Vue-cli 3.0或者以上的版本，关上命令窗口，通过以下命令进行装置和查看版本号：// 装置最新版的vue-clinpm install -g @vue/cli // 查看版本号vue -V 复制代码二、我的项目搭建过程1.新建我的项目，以下我新建一个名称为my-demo的我的项目vue create my-demo复制代码2.enter之后，依据我的项目提醒，接下来会让你抉择一个预设： newTs : 在我的项目创立实现的最初，会询问你需不需要放弃本次配置，不便下次间接应用;这个newTs就是我之前保留好的一个预设配置Default：默认的预设配置，会疾速构建一个我的项目，提供了babel和eslint的反对Manually select features：手动进行我的项目配置，能够依据我的项目的须要抉择适合的依赖，具备更多的选择性，以下步骤，我将会采纳该种形式。复制代码 Vue-cli3.x 将提供以下个性供选择，大家能够依据我的项目须要进行抉择增加的配置项：通过高低键进行配置项切换，对须要抉择的配置项应用空格键进行选中/反选Babel：应用babel，便于将咱们源代码进行转码（把es6=>es5）TypeScript：应用TypeScript进行源码编写，应用ts能够编写强类型js，对咱们的开发有很大的益处Progressive Web App(PWA)：应用渐进式网页利用（PWA）Router：应用vue-routerVuex：应用vuex状态管理器CSS Pre-processors：应用CSS预处理器，比方：less，sass等Linter/Formatter：应用代码格调检查和格式化Unit Testing：应用单元测试E2E Testing：应用E2E测试, end to end（端到端）是黑盒测试的一种复制代码4.而后对每个选中的配置项进行配置Use class-style component syntax? (Y/n)是否应用Class（类）格调装璜器, 即通过export default class Home extends Vue{} 创立Vue实例 Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)应用Babel做本义, 与TypeScript一起用于自动检测 Use history mode for router?路由模式, 是否抉择history模式，启用history模式，我的项目build之后，可能会呈现关上页面空白的状况哦 Pick a CSS pre-processor?抉择一种css 预处理器, 在这里我抉择less ...

TS 介绍TS 是什么ts 是领有类型查看零碎的 javascript 超集, 提供了对 es6 的反对, 能够编译成纯 javascript,运行在任何浏览器上。TypeScript 编译工具能够运行在任何服务器和任何零碎上。TypeScript 是开源的。 为什么要用 TSts 总体给我的感觉就是, 它能束缚代码, 又有肯定的灵便度, 能够造就你的编程习惯, 输入更高质量, 维护性高, 可读性高的代码 编译代码时,进行严格的动态类型查看, 编译阶段而不是运行时发现很多谬误, 特地是一些很低级的谬误帮忙咱们在写代码的时候提供更丰盛的语法提醒, 不便的查看定义对象上的属性和办法比方: 你给函数传了一个对象, 你在函数实现的时候还得记住对象外面都有啥参数, 你定义的参数名字是啥TS 装置npm init -ynpm install typescript -g数据类型js 中的数据类型:字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。对象(Object)、数组(Array)、函数(Function)ts 蕴含 js 中所有的类型, 而且还新增了几种类型void、any、never、元组、枚举、高级类型类型注解:(变量/函数):type 布尔类型(boolean) let flag: boolean = true数字类型(number) let num: number = 8;字符串类型(string) let str: string = 'sxh';数组类型(array)let arr1:number[]=[1,2,3]let arr2:Array<number>=[1,2,3]只读数组 数组创立后不能被批改 let ro: ReadonlyArray<number> = arr1;// arr1.push(3);// ro[1] = 4;// ro.push(6);// ro.length = 100;// arr1 = ro;// let arr3: number[] = ro元组类型(tuple)管制了数组成员的类型和数量 ...

类型断言有时候会遇到这样的状况，你会比TypeScript更理解某个值的详细信息。通常这会产生在你分明的晓得一个实体具备比它现有类型更确切的类型。 通过类型断言这种形式能够高速编译器，''置信我，我晓得本人在干什么'',。类型断言好比其余语言里的类型转换，然而不进行非凡的数据检查和解构。它没有运行时的影响。TypeScript会假如你，程序员，曾经进行了必须的查看。 断言类型有两种模式。其一是''尖括号''语法： let someValue:any = 'this is a string'；let strLength:number = (<string>someValue).length；另一个为 as 语法： let someValue:any = 'this is a string'；let strLength:number = (someValue as string).length；两种模式是等价的。至于应用哪个大多数状况是凭个人爱好；然而，当你在TypeScript里应用JSX时，只有 as 语法断言是被容许的。

因为vue我的项目是无奈间接操作dom的，然而有时候开发需要迫使咱们去操作dom。 两个方法，一个是很low的再引入jq，而后通过jq来操作，然而这样就失去了咱们应用vue的意义另一个就是增加ref属性，对ref进行操作。 好了完满解决。 很不巧，新我的项目用的是vue还是vue+typeScript的，间接，单纯的this.$refs.xxx不好用了，报错，辨认不了，很难堪。 通过不懈努力终于找到了在typeScript+vue我的项目中应用ref的解决办法： 增加一个申明类型，例如：this.$refs.ceshiREF as HTMLAudioElement这样是不报错了，然而打印的后果却是undefined，有点不讲道理的感觉。起初在一片博客中发现ref不是响应式的，无奈对增加了if的进行反馈，而我不巧就增加在了有if判断的标签下面。此外ref必须要数据渲染之后能力获取到，个别在mounted中。而且也并不是像下面说的那样须要申明一个类型，而是须要申明一个变量： let el:any = this.$refs.ceshi;console.log(el) 这样就好了，我喜爱这样，因为非常简单我能够了解。